Help center CSS cookbook

Return to top

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

    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

    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

    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

    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

Please sign in to leave a comment.

Powered by Zendesk