Help center CSS cookbook

Return to top


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

  • Amy Gracer
    Community Moderator

    That looks like no change from the default theme. When I load the default theme (Copenhagen) and view, the blocks resize properly. 

    So if I were troubleshooting, my next step would be to load the default Copenhagen theme and see if it works properly. If it does, then replace all of the blocks code in your CSS with that from the Copenhagen CSS. If you don't want to replace it, then comment out your code and copy in Copenhagen, and see if that fixes your issues

  • Jessica Peck

    I see instructions on how to hide the 'submit request' in the header and we've done that to hide for anonymous users (not logged in) by adding the below in the script.js:

      // Show div html based on role
    if (HelpCenter.user.role=="anonymous"){

    I was hoping to do the same with the 'Community' link in the header but I can't seem to get it to work - not sure what the class name is or if this is possible?

  • Amy Gracer
    Community Moderator

    Maybe it has something to do with  your HTML code? What does that look like?

    I ask because your title and description are running into eachother, so I'm wondering how the class is defined


    <li class="blocks-item custom">
    <a href='https://URL/hc/en-us/categories/201772406-General' >

    <h3 class="blocks-item-title">General Information</h3>
    <p class="blocks-item-description">Latest announcements and what's new</p>




  • Amy Gracer
    Community Moderator

    Hi Ian,

    I too am an amateur... so take my suggestion with a grain of salt. I'm not exactly sure why, but try changes max-width to min-width.

    Let me know if that works. If not, I'll brainstorm other ideas, or someone with more CSS experience will have a solution that does actually work!

  • Ian Morgan

    Hi. I am trying to hide the .block-item-description if the screen width goes below 600px. The reason is that when looking at the site on a mobile phone/ smaller screen the description and .blocks-item-title merge together in one line. I have tried adding to the CSS as shown. I placed it after the .blocks-item-description but no matter what I do I still see the description. It does not appear to be seeing the command. Can anyone help me with this? I should point out I am an amateur CSS and HTML programmer learning as I go so be gentle with me. 

    Thank you in advance.

    @media screen and (max-width: 600px){

    This is what it currently looks like. "General" is the title and "Non product specific articles" is the description.

    This is what it looks like when the screen is larger

  • Amy Gracer
    Community Moderator

    Isaac Starobin

    Hi Isaac,

    It looks like you don't need to put it within article body. Just create a selector - I called it "fancy" - and then apply that to the ordered lists where you want it to appear. 

    In style.css

    .fancy {
      list-style: none; 
      counter-reset: li
    .fancy > li::before {
      content: counter(li); color: red;
      display: inline-block; width: 1em;
      margin-left: -1em
    .fancy li {
      counter-increment: li

    In your HTML

    <ol class="fancy">




  • Don McCall

    I am trying to use the media info to hide some elements when printing a KB article.  I see syntax in the CSS Sheet that uses the media width to style "@media (min-width: 1160px)"

    Does anyone know how to structure a CSS entry for Zendesk that will apply a style if the Media is "Print"

  • David Kingsbury

    Hey there, had a question about this: Is it possible to make content that appears within the banner or other places in help-center time sensitive?

    I'd like to try and make it so things will automatically serve things like holiday messages when appropriate, and then retire them automatically as needed.

  • Stephen Kairys


    Happy Holidays. :)

    Do you have an article explaining how to use CSS (or whatever else) to create an automated ToC? (Table of Contents)? Ideally, the section #s would also prefix any headings in the actual article.


    1.2.4 Modifying Vendor



Please sign in to leave a comment.

Powered by Zendesk