• Andrea Saez

  • 2015年02月11日 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

  

• Marci Abraham

  • 2015年02月13日 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

  • 2015年02月13日 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

  • 2015年02月13日 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!.");

• Marci Abraham

  • 2015年02月13日 16:52

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

• Matthieu ETIENNE

  • 2015年10月01日 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

  • 2016年02月12日 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

  • 2016年02月12日 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

  • 2017年10月11日 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

  • 2017年10月11日 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

  • 2017年12月14日 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

  • 2017年12月20日 17:27

  Zendesk Customer Care

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

• Becky Boyce

  • 2018年06月11日 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

  • 2019年01月24日 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 (admin)

  • 2020年03月05日 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

  • 2020年03月05日 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 (admin)

  • 2020年03月05日 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

  • 2020年05月13日 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

  • 2020年05月13日 20:26

  @... 

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

• Jason

  • 2020年05月13日 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

  • 2020年07月15日 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

  • 2020年07月21日 15:39

  Amy, that worked! Thank you very much.

投稿コメントは受け付けていません。