Help center CSS cookbook

Return to top
Have more questions? Submit a request

103 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 Katelis

    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 Katelis,

    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

    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
  • Ginger Collison

    I want to change the color of the uploaded file on my new request form. Our background is black making the grey link color hard to read. I can't for the life of me find out in the style.css where you would style this. During inspection it labels this as class = "upload-link" but no such option is in style.css.

    0
  • John

    Hi Ginger:

    I just did this the other day.  In my style sheet it's line 1611, under upload-dropzone.  You'll see the last line I added is the background color.  I also resized the drop zone.

    .upload-dropzone span {
    color: lighten($text_color, 20%);
    font-size: 15px;
    height: 80px;
    width: 300px;
    border: 2px solid #000000;
    border-radius: 4px;
    background-color: #ccf5ff;

    This is the result:

    Hope this helps.

    0
  • Brett Bowser
    Zendesk Community Team

    Thanks so much for sharing your solution John! This is super helpful :)

    0
  • Marci Abraham

    I would like to do some advanced CSS in Guide, particularly accordions, but other things as well. I have tried several options recommended in the Community involving Bootstrap, but they don't seem to play well with Zendesk. I found Zendesk Garden (e.g., https://garden.zendesk.com/components/accordion), but it seems to revolve around building apps rather than modding the Zendesk Guide. Any suggestions?

    0
  • Justina Thompson

    What would the code be to add a horizontal line divider between article titles on the category and see all article pages?

    0
  • Amy Gracer
    Community Moderator

    Hi Justina,

    You can use border-top

    For example, 

    .section-tree-title {
    1. margin-bottom: 0;
    2. font-size: 18px;
    3. font-weight: 600;
    4. color: #333333;
    5. margin-top: 10px;
    6. border-top: #336699 1px solid;
    }
    I'm not exactly sure what element you want to apply this to, but the border-top should work. 
     
     
    0
  • Anthony Inman

    Hi Marci Abraham I just noticed your comment as I was look through this article. Not sure if you still need help with accordions, but here is a comment I made a few years ago on using <detail> html 5 https://support.zendesk.com/hc/en-us/community/posts/115006989888/comments/360002254267

    Hope it helps.

    0

Please sign in to leave a comment.

Powered by Zendesk