Help Center CSS cookbook (Guide Professional and Enterprise)

Return to top
Have more questions? Submit a request

96 Comments

  • Trapta
    Community Moderator

    Hi @Genevieve,

    May you please share the URL of yoyr HC so that I can take a look at why it is not working for you?

    Thanks

    0
  • Genevieve

    Trapta my url is https://fetchd.zendesk.com/hc/en-gb 

    Thanks for helping 

    (btw i noticed that this changed the results from the search, but not the live search recommendation in the search bar) 

    0
  • Trapta
    Community Moderator

    Hi Genevieve,

    Please try putting the below code at the bottom of your style.css file and let me know if it works for you.

    zd-autocomplete-title-multibrand {color: green !important;}

    Thanks

    0
  • Allison S

    Hello! 

    How can I add "strikethrough" in text in articles? Basically I have a pricing table and I want to show the original price with a slash to show the reduction. 

    Here's what I'm looking to replicate in ZD Guide: https://www.sideline.com/sideline-pro/

    I "inspected" the webpage and saw:

    <span class="line_through">&nbsp;<span class="sign_dollar">$</span>30&nbsp;</span>

    But not sure if I need to add the JS to the theme, then add in that snippet into the article?

     

    Thanks for your prompt assistance!

    0
  • Phil Williams
    Community Moderator

    You can do this with css and the text property class.

    You would need a class to your style.css template. You can find the variations here:

    https://css-tricks.com/almanac/properties/t/text-decoration/

    E.g.

    .line_through { text-decoration: line-through; }

    Then switch to the html view in your guide editor (the <> symbol) and apply your new class to the element you want as per the example you saw above.

    0
  • Jordan Dayton

    We're exploring migrating to Zendesk. In our current product documentation, we use the following global CSS, to modify images so they don't take up a lot of space, in the article, but if a user wants to see the image they can hover (desktop) or tap (mobile) to see the full-size image.

    Perhaps implementing a "on-click" solution to pop open an image (lightbox, etc.) might be better, but I'm not savvy with javascript.

    I've tried to inject some custom CSS in the style.css file but it doesn't seem to work. 

    On our current documentation, I wrap our articles in a div with a class of "docs" which references the following code:

    .docs img {
    width: 200px;
    height: auto;
    transition: width 1s;
    padding: 20px 0px;
    }
    .docs img:hover {
    width: 80%;
    transition: width 1s;
    transition-delay: .25s;
    cursor: zoom-in;
    }

    Here's an example of the functionality:

    ––––––––––––––––––––––––––––––––––––

     

    0

Please sign in to leave a comment.

Powered by Zendesk