Help center CSS cookbook

Return to top

40 Comments

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

    1
  • Brett Bowser
    Zendesk Community Manager

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

    1
  • Permanently deleted user

    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
  • 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){
    .blocks-item-description{
    display:none;
    }
    }

    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

    0
  • 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!

    0
  • Ian Morgan

    Thank you Amy

    I tried min-width as well but all this did was remove the description from the wider screen. 

    Thank again.

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

    mine: 

    <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>
    </li>

     

     

     

    0
  • Ian Morgan

    Hi Amy. 

    That is definitely possible. Here is the code. I can't see a problem but it might be obvious to someone with better knowledge.

    Thanks again

    <section class="categories blocks">
    <div class="container">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <div class="blocks-item-description"> {{excerpt description}}</div>
    </a>
    </li>
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">
    {{name}}
    </span>
    <div class="blocks-item-description">{{excerpt description}}</div>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </div>
    </section>

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

    0
  • Ian Morgan

    Hi Amy

    Thank you so much for your continued support both here and in my other post regarding the sign-in drop-down. This community has been great in helping me resolve issues as I have been learning how to modify our website.

    I have tried what you suggested and as you suspected there is an error in my code. It appears to be in my CSS file so I am in the process of comparing my CSS to the CopenHagen version. I will update here when I find my mistake for the benefit of others who may see the same issue.

    0
  • Stephen Kairys

    Hi,

    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.

    e.g.,

    1.2.4 Modifying Vendor

    Thanks.

    0
  • Brett Bowser
    Zendesk Community Manager
    Hey Stephen,
     
    It looks like you got a response around setting this up in the following post: Table of contents?
     
    Hope this points you in the right direction!
    0
  • Stephen Kairys

    I'll take a look next week. Thank you.

    0
  • 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"

    0
  • Eric Nelson
    Zendesk Developer Advocacy
    Hey Don,

    The easiest way to handle this is to create a separate stylesheet instead of on the entry level. 

    <link rel="stylesheet" media="screen" href="main.css" />
    <link rel="stylesheet" media="print" href="print.css" />

    Hope this helps!
    0
  • Jana Debusk
    Zendesk Luminary

    We have the Copenhagen theme, and all of the images within articles are being changed to "avatars" when published (they are full size in the draft). Any advice on how to fix this with the CSS? 

    0
  • Jeff C
    Zendesk Customer Care

    Hey Jane,

    I would suggest that you reach out to us via Option 2 mentioned here so we can look further into your request. I'd like to set your expectation though that custom code is outside scope specially if your Copenhagen theme is customized but we will be happy to provide options.

    0
  • Isaac Starobin

    I'm trying to customize the numbers in ordered lists so they have pretty circled backgrounds. I started with this CSS:

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

    It did indeed format the numbers, but it also added numbers to some very strange places around the article page, like the social icons on the bottom.

    Any ideas how to modify the CSS so that it applies ONLY to ordered lists within the article body?

    Thanks!

    0
  • Amy Gracer
    Community Moderator

    Isaac Starobin

    I think what is happening is that you are including all OL within article body. So you'd handle that with ol class that says to use your special coding only when you apply that special class.

    I hope that's enough for you to get started on. I haven't played around with this kind of styling in a while, so I can't write out the exact statement now, but if you need more help (and no one else more experienced jumps in), I'll play around with it and figure it out.  Let me know and good luck!

     

     

    1
  • Isaac Starobin

    Amy Gracer Amy Gracer

    Thanks for taking a look! Unfortunately this looks like it's beyond my very limited CSS capabilities. If you have any ideas, I'm all ears!

    0
  • 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">
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>

     

     

     

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

    0
  • Eric Nelson
    Zendesk Developer Advocacy
    Hey David,
     
    You could definitely do this. The best way to do this would be to write a comparative date checking function that shows / hides the custom element depending on the date.
     
     
    The below example would show or hide a custom element named "myBanner" depending on if the date matches the one provided. 
     
    function isToday(date) {
    const today = new Date();

    if (today.toDateString() === date.toDateString()) {
    return true;
    }
    return false;
    }

    if (isToday(new Date('Nov 10 2022')) === true){
    document.getElementById('myBanner').style.display = 'block';
    }
    else {
    document.getElementById('myBanner').style.display = 'none'
    }
     
    0
  • 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"){
      $('a.submit-a-request').hide();
    }

    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?

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Jessica! If you go to the header.hbs template, you can just wrap the existing community block with a conditional to check if the user is signed in, like this:

     {{#if signed_in}}
      <li>{{link 'community'}}</li>
    {{/if}}
    0
  • Jessica Peck

    Greg-Katechis that worked, thank you!  I modified a bit so it wouldn't add spaces:

      {{#if signed_in}}
        {{link 'community'}}
     {{/if}}

    Thanks again!

    0
  • Timo Boezeman

    Hi,

    I'm busy altering our Guide theme, which is going perfectly well, except for one element which I can't seem to find in the style.css file.

    What I want, is to change the appearance of the instant search results dropdown. But I really have no clue where to find the classes.

    This is the dropdown I'm talking about:

    0

Please sign in to leave a comment.

Powered by Zendesk