Add HTML to the Category Description

14 コメント

  • Andrea Saez
    コメントアクション Permalink

    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

    0
  • Marci Abraham
    コメントアクション Permalink

    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!

    0
  • Andrea Saez
    コメントアクション Permalink

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

    0
  • Andrea Saez
    コメントアクション Permalink

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

    0
  • Marci Abraham
    コメントアクション Permalink

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

    0
  • Matthieu ETIENNE
    コメントアクション Permalink

    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

     

    1
  • Peter Andersen
    コメントアクション Permalink

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

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

    Regards ;-)

    1
  • Wes Drury
    コメントアクション Permalink

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

    0
  • Rowan Walker
    コメントアクション Permalink

    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.

    0
  • Rowan Walker
    コメントアクション Permalink

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

    3
  • Joshua Stewart
    コメントアクション Permalink

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

    0
  • Jessie Schutz
    コメントアクション Permalink

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

    0
  • Becky Boyce
    コメントアクション Permalink

    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?

    0
  • Amy Gracer
    コメントアクション Permalink

    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?

     

    0

ログインしてコメントを残してください。

Powered by Zendesk