English (US)
  1. Zendesk help
  2. Guide
  3. Using Guide for help center
  4. Using themes and customizing your Help Center

Help center CSS cookbook

Charles Nadeau
  • Edited
Zendesk Documentation Team

What's my plan?

Suite Growth, Professional, Enterprise, and Enterprise Plusprofessional enterprise plans

You can easily customize the look and feel of your help center using Cascading Style Sheets (CSS). This cookbook is designed to help you make your help center look the way you want.

Note: Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase Suite Team.

To access and edit the CSS in Guide, see Customizing the CSS or JavaScript.

If you're new to CSS or maybe a little rusty, check out the following tutorials to get you up to speed:

  • Getting started with CSS is the most complete CSS tutorial aimed at complete beginners. It guides you through the basic features of the language with practical examples that you can try for yourself.

  • CSS Beginner Tutorial gives you just enough to get started.

You can also customize the look of your help center using the Help Center templating language or JavaScript:

Table of contents

The cookbook is organized into sections covering elements of a help center. Each section includes CSS code that you can paste directly into your theme's stylesheet. Use the code as-is or edit it to make it your own.

The cookbook isn't exhaustive. By modifying the HTML templates and CSS stylesheet, the number of things you can do is limited only by your imagination.

Header and footer

The header displays a logo and other components depending on the theme and user roles. You can use the footer to display related links, information about your company, or legal notices.

Back to the table of contents.

Change the background color of the header or footer

Change or add the background-color property in the following selectors.

Header:

.header {
  background-color: #666;
}

Footer:

.footer {
  background-color: #333;
}

Change the height of the header or footer

Change or add the height property in the following selectors.

Header:

.header {
   height: 70px;
}

Footer:

.footer {
   height: 20px;
}

Change the space above or below the header or footer

Change or add margin-bottom and margin-top properties in the following selectors.

Header:

.header {
     margin-bottom: 20px;
}

Footer:

.footer {
     margin-top: 10px;
}

Change the appearance of the selected language

Add the following selector and property:

.language-selector .dropdown-toggle {
  color: green;
}

Change the appearance of the Submit a Request link

Add the following selector and add or modify text properties:

.submit-a-request {
  font-size: 14px;
  color: green;
}

Hide the Submit a Request link

Modify the following selector:

.submit-a-request {
  display:none;
}

Change the appearance of the Sign In link

Add or modify text properties in the following selector:

.login {
  font-size: 14px;
  color: green;
}

Change the logo dimensions

Although the recommended logo image size is 200px by 50px, you can override this default if needed.

Note: To use a logo larger than the recommended size, you need to host the logo image somewhere outside your instance of Zendesk Support.

To change your logo size

  1. In Guide, click the Customize design () icon in the sidebar.
  2. Click Edit theme.
  3. Click CSS to open the CSS stylesheet, then search for the following rule: 
    .logo img {
  max-height: 37px;
}

    To search, click inside the code editor and press Control+F (Windows) or Cmd+F (Mac).

  4. Modify the height property in the ".logo img" selector to match the height of the image.
  5. Click Save.

Search

The search box looks for content in both the knowledge base and community and displays links on a results page. If you want, you can remove the search box. For more information, see the search helper in the Help Center Templates guide.

Back to the table of contents.

Change the width or height of the search field

Change the width or height values in the following selectors.

Large search box:

.search input[type=search] {
  height: 50px;
  width: 90%;
}

Small search box:

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

Change the background color of the search field

Change the background property in the following selectors.

Large search box:

.search input[type=search] {
  background: #999;
}

Small search box:

.search-small input[type=search] {
  background: #999;
}

Change the appearance of the search text

Change or add text properties in the following selectors.

Large search box:

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Small search box:

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Change the appearance of the results page heading

The heading on the search results page consists of the number of results returned for the search term. Example: 9 results for "serial number".

Add the following selector if it's not already in the stylesheet, and change or add text properties:

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

Change the appearance of search result keyword highlighting

Highlighted terms within search results are wrapped with the inline element <em> under the .search-result-description container. If you want to have highlights appear as bold with a yellow background, you would do the following:

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

Change the appearance of the Knowledge base and Community headings

Add or modify text properties in the following selector:

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

Change the spacing between the results

Add a margin-bottom property in the following selector:

.search-result {
  margin-bottom: 20px;
}

Change the appearance of the result text

Change or add text properties in the following selector:

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

Change the color of the result links

Add or modify the color property in the following selector:

.search-result a {
  color: #484;
}

Breadcrumbs

Breadcrumbs help users navigate content in your help center. If you want, you can remove the breadcrumbs. For more information, see the breadcrumbs helper in the Help Center Templates guide.

Back to the table of contents.

Change the space above and below the breadcrumbs

Add or change the padding properties in the following selector:

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

Change the appearance of the breadcrumb text

Change or add text properties in the following selector:

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Change the color of the breadcrumb links

Add the following selector and property:

.breadcrumbs li a {
  color: #484;
}

Change the pointer character (>) in the breadcrumbs

Change the color and content properties in the following selector:

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

Article lists

Depending on the theme, article lists are used on the home page, category landing pages, and section landing pages.

Back to the table of contents.

Change the space around the list of articles

Add or modify the following selector and padding properties:

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

Change the spacing between the articles

Change the margin-bottom property in the following selector:

.article-list > li {
  margin-bottom: 10px;
}

Change the appearance of the article links

Change or add text properties in the following selector:

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Change the color of the article links

Add the following selector and property:

.article-list li a {
  color: #FFF;
}

Knowledge base articles

You can change the look and feel of the articles in your knowledge base.

Back to the table of contents.

Change the appearance of article titles

Add or modify the following selector and properties:

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

Change the appearance of article text

Add or modify the following selector and properties:

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

Change the color of article links

Add or modify the following selector and property:

.article-body a {
  color: #930;
}

Change the appearance of the author's name

Add or modify the following selector and properties:

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

Change the appearance of the last updated string

Add or modify the following selector and properties:

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

Change the appearance of "Was this article helpful?"

Add or modify the following selector and properties:

.article-votes-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Change the appearance of the vote counter

Example: "6 out of 8 found this helpful". Add or modify the following selector and properties:

.article-vote-label {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

Change the appearance of "Have more questions? Submit a request"

Add or modify the following selector and properties:

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

Change the appearance of the Comments title

Add or modify the following selector and properties:

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

Change the appearance of comment text

Add or modify the following selector and properties:

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

Community questions and answers

You can change the look and feel of the content in your community.

Back to the table of contents.

Change the appearance of question titles

Add or modify the following selector and properties:

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

Change the appearance of question text

Add or modify the following selector and properties:

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

Change the color of question links

Add or modify the following selector and property:

.question-text a {
  color: #484;
}

Change the appearance of the question author's name

Add or modify the following selector and properties:

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

To change the link color, add or modify the following selector and property:

.question-author a {
  color: #484;
}

Because the question author's name, the time since the question was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Change the appearance of the time since question published

Add or modify the following selector and properties:

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Change the appearance of the share question link

Add or modify the following selector and properties:

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Change the appearance of the answers heading

Add or modify the following selector and properties:

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

Change the appearance of answer text

Add or modify the following selector and properties:

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

Change the appearance of the answer author's name

Add or modify the following selector and properties:

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

To change the link color, add or modify the following selector and property:

.answer-author a {
  color: #484;
}

Because the answer author's name, the time since the answer was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Change the appearance of the time since answer published

Add or modify the following selector and properties:

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Change the appearance of the share answer link

Add or modify the following selector and properties:

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}
Return to top

40 Comments

  • 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
  • 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
  • Brett Bowser
    Zendesk Community Manager

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

    1
  • 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
  • Greg Katechis
    Zendesk Developer Advocacy

    Thanks for sharing! I just tried a for loop on my new request page and I was getting a similar linting "error", but when I loaded the page, it was executing properly. I can bring this to our dev team to see what's going on here, but first I'd like to know if you're seeing the same behavior as I am. Just let me know if the code is working and if it is, at least we know that's not the issue and we can narrow the scope of the fix.

    0
  • Casey Keefe

    Hi Everyone - Anyone have any ideas why the closing tag for <script> here is showing in red? I've gone line-by-line, but can't seem to figure it out. Thanks in advance!

    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
  • Stephen Kairys

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

    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
  • 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
  • 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
  • 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
  • Timo Boezeman

    Thanks Christopher Stock!

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

    Hello there, 

    I am trying to modify the appearance of Send a request link button, but nothing changes.. I am with Copenhagen v3.1.0. Is it because the colour chosen on the homepage og theming is overriding my code ? 

    Here is my code if it can help

    /***** Change style of the request button *****/
    .submit-a-request {
      font-size: 14px;
      color: #B78A6B;
      background: #ffffff;
    }

    Thank you loads !

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Casey! It's difficult to say for sure, but one possibility is that you're adding this to your script.js file, that could be one possibility. You don't need to wrap any js code in script tags on that file, so this is one possible error that would show up. If that isn't what you're doing, could you let me know which file you're adding this to?

    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
  • 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
  • Gorka Cardona-Lauridsen
    • Edited
    Zendesk Product Manager

    Hi All, 

    We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code.

    If you are interested please answer sign up here and answer the 3 survey questions. I will reach out to you to setup a 30 min Zoom call.

    The interview will be a semi-structured interview where we would like to hear you take us through examples of what you have done or tried to do with customizations and your experience with the tools, documentation etc. you used.

    Looking forward to talking to all of you.

    Gorka Cardona-Lauridsen
    Sr. Product Manager, Zendesk Guide 

    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
  • Jana Debusk

    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
  • 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
  • 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
  • Andrey Nikolaev

    Can I change an article's CSS template for just one section or category rather than the entire Help Center?

    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
  • 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
  • Casey Keefe

    Hi Greg Katechis - Thanks! Yes, we have been getting the same result. This code has been on the live page for months with no reported issues as well.

    For a bit more scope - we are essentially trying to add some login functionality to one of the forms and when updating the code, I came across this script error, so figured I would try and fix it while adding the new functionality.

    0
  • Christopher Stock
    Community Moderator

    Hey Timo Boezeman, it's added as a <zd-autocomplete> element. There are no css classes, but you can style the element directly.

    0
  • Casey Keefe

    Thank you Greg Katechis ! This code is currently on new_request_page.hbs

    0

Please sign in to leave a comment.

More about

Related articles

Powered by Zendesk