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

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!

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!."); | |   |   | |   | } |

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!.");

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

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

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

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

Regards ;-)

@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.

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.

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).

@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.

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

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

any ideas?

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?

@...
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.

@...

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?

@...

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() ); 

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.

@... 

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

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.

@...

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());

Amy, that worked! Thank you very much.