• Andrea Saez

  • February 11, 2015 08:42

  Hi Marci,

  Yes, you would have to create a custom JS script that tells the Help Center when and how to replace text/images/headers.

  Here's an example

  

• Permanently deleted user

  • February 13, 2015 16:39

  Hi Andrea,

  Thanks for the direction...unfortunately that image is so small I can't read it. Did that come from another thread somewhere? Can you point me at it?  I'm just a hacker...I have to learn from other people's code and comments. Thanks!

• Andrea Saez

  • February 13, 2015 16:50

  Here you go:

  | /* Replace images and text in categories*/ | |   | if ("Category1" == "Category1") { | |   | $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/112345/123123/category1-image.png')").css("height", "351px").css("margin-top", "20px"); | |   | $(".subtext-stronger").html("Read everything you need to know about Category 1 here!."); | |   | } else if ("Category1" == "Category2") { | |   | $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/16458/255345/API-pannel-new.png')").css("height", "351px").css("margin-top", "-50px"); | |   | $(".subtext-stronger").html("More stuff here!."); | |   |   | |   | } |

• Andrea Saez

  • February 13, 2015 16:51

  ugh sorry, that didnt format properly...

   

  /* Replace images and text in categories*/
   if ("Category1" == "Category1") {
  $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/112345/123123/category1-image.png')").css("height", "351px").css("margin-top", "20px");
   $(".subtext-stronger").html("Read everything you need to know about Category 1 here!.");
   } else if ("Category1" == "Category2") {
  $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/16458/255345/API-pannel-new.png')").css("height", "351px").css("margin-top", "-50px");
  $(".subtext-stronger").html("More stuff here!.");

• Permanently deleted user

  • February 13, 2015 16:52

  Thanks, Andrea. I'll play around with that and see what I can make it do. :)

• Matthieu ETIENNE

  • October 01, 2015 10:12

  HI,

  Will be happy to understand this solution but on a lower level.

  We want to know if there is a way, using  JS or CSS to format on the  text of every category description (bold, bullets, Italic, indent etc.).

  Thanks

   

• Peter Andersen

  • February 12, 2016 06:31

  I would like the same as Mattieu.. :-) 

  Where would i enter that code ? i need to style both category and section..

  Regards ;-)

• ModeratorWes

  • February 12, 2016 13:59

  

  @Peter - Can you give me a little more details on what you are trying to accomplish.  You can easily style things using JQuery if needed but I would always try and style with CSS first.

• Rowan Walker

  • October 11, 2017 02:30

  Wes - I think the jQuery is a work around - a hack. What Marci is trying to achieve would be pretty common (I'm trying to do the same); add some basic formatting to the section or category descriptions.

  I've tried both HTML and Markdown, but when published, both formats aren't parsed and are just verbatim outputted.

  

• Rowan Walker

  • October 11, 2017 02:45

  OK - I've just come up with a fix.

  In your theme's JS file add the following code to allow you to use HTML in your section & category descriptions.

  $('.description').html( $('.description').text() );

  The class/container element will depend on your theme. You'll also need to make sure it's run after the required HTML is ready (call in your footer or within an window.onload function). It also assumes your theme is using jQuery (I think this might even be required by Zendesk - so you should be safe).

• Josh Stewart

  • December 14, 2017 21:26

  @Rowan

  Good find! I have been trying to use this in our theme with no luck. I've even added it as script in the section_page.hbs. Is there another trick to get it to work?

  Thanks!

  Edit: Nevermind! I had to change the class name.

• Jessie Schutz

  • December 20, 2017 17:27

  Zendesk Customer Care

  I'm glad you got it figured out, Joshua!

• Becky Boyce

  • June 11, 2018 15:09

  Hoping someone can help - I applied @Rowan fix above and it appears to work, but now I get an error screen at random times (when I don't get the message it actually displays the correct description that has HTML in it):

  502 Bad Gateway

  ---

  nginx

  any ideas?

• Amy Gracer

  • January 24, 2019 16:47

  I appreciate the solution, but I don't 100% follow.

  The description class is page-header-description.

  So I added this to my script.js file.

  //Edit HTML in Description of category and section pages
  $('page.header.description').html( $('page.header.description').text() );

  But as I'm sure you know, it's not working :)

  What do I have to do to add line breaks, character formatting, and links to the Descriptions of Sections and Category pages?

   

• Karl Löfdahl

  • March 05, 2020 09:23

  @...
  This solution works good for me in Chrome, but it does not seem to work in Internet Explorer

  $('.description').html( $('.description').text() );

  If someone knows a fix for that, please let me know.

• Amy Gracer

  • March 05, 2020 12:42

  @...

  This is working on my site in Chrome and Explorer. I am only using it on the section page, but I imagine Category should be the same, just replacing section with category.

  $('section.description').html( $('section.description').text() );

  If it doesn't want on your category, try the section as above and see if that works. If that fails, too, then we might have it narrowed down to your IE settings?

• Karl Löfdahl

  • March 05, 2020 13:15

  @...

  I am indeed doing this for section descriptions, although in a different manner. 

  I am specific about which ones should use HTML by targeting IDs. I have good reason for doing it like this. 
  It works on modern browsers but displays the HTML as plain text in IE11. 

  example: 

  $('#desc_id_360001778878').html( $('#desc_id_360001778878').text() ); 

   

• Jason

  • May 13, 2020 19:08

  I tried what has been suggested by placing the JS in the script file: 

  

   

  Next, I tried adding some sample html in a category description. The text is not rendered as expected:

  

   

  I also tried being more specific by using the desc_id as Karl suggested above but this didn't help in my case. Is there something else I need to do? I tested this in Chrome.

   

• Amy Gracer

  • May 13, 2020 20:26

  @... 

  Try eliminating the <DOCTYPE> <HTML> and <Body> tags and limit to just paragraph and character styles.

• Jason

  • May 13, 2020 21:21

  Thanks, Amy but I still don't see the html being rendered. Am I doing all the things I need to do? I put the js line in the script.js file:

  $('category.description').html( $('category.description').text() );

  Then just put tags in the plain text edit field for the category. I didn't change the CSS or anything else.

   

  

• Amy Gracer

  • July 15, 2020 18:46

  Community Moderator

  @...

  Sorry for the late reply. When I first tried this, I had the same problem, and  it was due to an undiagnosed problem with my JS file. Zendesk didn't catch it.

   

  When it wasn't working, I ran the JS through a code checker and it identified the problems. Check out this one: https://jslint.com/

  Once the error was found and corrected, the code worked. 

  This is my code snippet, and it appears before the final });

    //starting custom code
   // HTML in section
      $(".page-header-description").html($(".page-header-description").text());
      $(".category-description").html($(".category-description").text());
      $(".section-description").html($(".section-description").text());

   

   

• Jason

  • July 21, 2020 15:39

  Amy, that worked! Thank you very much.

Post is closed for comments.