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

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

    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

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

Please sign in to leave a comment.

More about

Related articles

Powered by Zendesk