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

Help Center CSS cookbook (Guide Professional and Enterprise)

Charles Nadeau
  • Edited

professional enterprise plans

You can easily customize the look and feel of Help Center using Cascading Style Sheets (CSS). This cookbook is designed to help you make Help Center look the way you want. Access to the page code is available on Guide Professional and Enterprise.

Note: Trial users are given the Guide Professional plan, which includes code editing options, but they can no longer access that feature if they do not purchase the Guide Professional or Enterprise plan.

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 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 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-vote-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-count {
  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;
}
Have more questions? Submit a request

87 Comments

Sort by Date Votes
  • Wes Drury
    Comment actions Permalink

    @Seth - For the user name

    .user-info #user-name {
    font-size: 12px;
    font-weight: bolder;
    color: white;
    }
    1
  • Jessie Schutz
    Comment actions Permalink

    Hi Alex!

    We've got a couple Help Center customization gurus among our Community Moderators, so I'll check with them to see if they can help you figure this out!

    1
  • Andrew Warner
    Comment actions Permalink

    Thanks Nicole. Happy to help where I can. 

    1
  • Trapta
    • Edited
    Comment actions Permalink

    Hi @Alex,

    If you are using default Copenhagen theme then this is what you have to do -

    Go to line no.709 in your CSS file and replace 

    .hero-inner {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-width: 610px;
      margin: 0 auto;
    }
    with
    .hero-inner {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-width: 1160px;
      margin: 0 auto;
    }

    form.search.search-full {
      max-width: 610px;
    }
    Let me know if you face any issue.
     
    Thanks
    Team Diziana
    1
  • OliviaBasileo
    Comment actions Permalink

    Hello! So much useful advice in these comments.

    We're using the Swiftest Elk theme and would like to know how to make the search box appear flush left on the homescreen. Tried altering the coding in a few different places but can't seem to figure it out.

    We would also like to know if it's possible for us to add an image with a hyperlink to our main website somewhere on the Help Center homepage?

    Thank you!

    1
  • Andrew Warner
    Comment actions Permalink

    Hi Paul, 

     

    I have just had a look on my own HC and if you are trying to change the description color on the home page then you'll need to change the ".blocks-item-description" class. 

    Hope this helps

    1
  • Wes Drury
    Comment actions Permalink

    @Seth - Your welcome, glad to hear everything is working.  If you need anything else along the way just let me know.

    0
  • Alex Caton
    Comment actions Permalink

    Hi!

    Have been looking around and haven't found how to do this:

    I'd like to move the search bar left to always sit in line with the edge of the left-most category block.

    Now, I've worked out how to shift the bar to the desired spot by adding a % to the relative position (.search {position: relative; right: 45%}) but that unfortunately plays havoc with the responsive nature of the search bar - when you change the window size the search bar drops off the left side of the screen.

    Is there any way to have the search bar sit & remain left aligned with the category blocks?

    0
  • Suman Saha
    Comment actions Permalink

    Hey Pedro...Thanks for the help .... your suggestions worked great...Thank u again...

    0
  • Wes Drury
    Comment actions Permalink

    CSS tab starting with line 1875 (add the margin-top and adjust your pixels.)

    /Page Footer/
    .homefooter {
    border-top: 2px solid #47D9BF;
    margin-top: 80px;
    }

    Let me know if this is what you are trying to accomplish.

    0
  • Trapta
    Comment actions Permalink

    Hi @Emma,

    In your article_page.hbs template replace {{t 'was_this_article_helpful'}} with the TEXT you want to show and you'll be good to go.

    Let us know how it goes for you.

    Team Diziana

    0
  • Wes Drury
    Comment actions Permalink

    @Luke - Since I coded this Help Center I can give you some insight here.  There is not a current way to do this via the editor.  In this case, there is a backend tool that adds the classes needed and then the CSS displays it.  No matter how you look at it, you would have to go into the source editor and add the classes that you need unless you used some third party backend tool.  I normally use bootstrap classes with my themes which allow the author to go into the source editor and add:

    <div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

    I've also done some Help Centers where the classes would call images.  This help center also does this for its plan availability.  

    I was able to create a Table of Contents automatically that would look for Headers that would automatically create a Table of Contents that would link you into each heading if you had longer articles.  Other than that I've always had to use the source editor to put some code in like above that would then display the CSS.  Hope this helps and let me know if you have any further questions.

     

    0
  • OliviaBasileo
    • Edited
    Comment actions Permalink

    How can I customize my homepage footer? I was able to get the images and hyperlinks in for the most part but to adjust sizing and alignment where would I do that in CSS?
    domain is bloomsburyfashioncentral

    UPDATE: Sorry, I've been figuring things out little by little. Right now I'm trying to get all my hyperlinked images next to each other, if anyone has tips it would be greatly appreciated :)

    Thank you!

    PS:@Larisa, Thank you! I did eventually get it to work by changing the width from 49.5% to 33%

    0
  • OliviaBasileo
    Comment actions Permalink

    That worked perfectly, thank you!!

    0
  • OliviaBasileo
    Comment actions Permalink

    Hi Wes,

    I actually figured it out! The only thing left I'm trying to do that I'm having trouble with is increasing the padding between the footer and the content above (on the homepage and articles). You can see it best here: https://bloomsburyfashioncentral.zendesk.com/hc/en-us/articles/206725228-Current-Berg-Authors

    Tried inserting a padding line under a few of the comment and footer rules in the CSS but nothing has worked.

    Would greatly appreciate your help!

    0
  • Kevin Lewis
    Comment actions Permalink

    Hey ZD users!

     

    I was wondering if anyone has had success creating their own custom Recent activity type lists? I wondering how I could add something similar to what ZD support has on their home page that references release notes and maybe top articles. Any help you can provide would be great. Thanks! 

    0
  • Milton Marcelo
    Comment actions Permalink

    How can I bold the category name in the homepage (profsense.zendesk.com). I tried this solution:

    .category-tree .category h2 a {
    color: inherit;
    font-weight: lighter;
    }

    Make the following change to font-weight:
    font-weight: bold;

    But nothing happened.

     

    Any idea how to do it?

    0
  • OliviaBasileo
    • Edited
    Comment actions Permalink

    Update: I managed to create the anchor links, now I just need to adjust the size of my home page search bar. I've been able to play with the width and kind of get it smaller, but I can't shrink the box and text inside independently, and it looks disproportionate to shrink the box but have larger text... Would appreciate help!

    0
  • OliviaBasileo
    • Edited
    Comment actions Permalink

    Hi Wes,

    Here is our HC: https://bloomsburyfashioncentral.zendesk.com/hc/en-us

    Since it's activated the logo is as it comes, but we would like to link the logo to our own website. I've tried deleting the logo from HTML and adding in an image (same logo) in that same spot that would link to the website, but to no avail.

    Thank you!

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Thanks for sharing, Andrew! It's always great when our users can help one another. 

    Also, I see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the Welcome Thread in The Lounge to introduce yourself.

    We look forward to seeing you around the Community. Happy Zendesking!

    0
  • Paul Burrows
    Comment actions Permalink

    The "Description" text that can be added to explain what a Category or a Section of knowledge articles is all about defaults to a very light grey that in the best of conditions is difficult to read.  

     

    I've scoured the knowledge articles and CSS in the Knowledge Base to find where I can change the font color for a Category Description or a Section Description.  I thought I had located the correct area in the CSS:

    }

    .category-description, .section-description {
    color: $color_4;
    margin-bottom: 50px;
    margin-top: -15px;

    }

    ...but alas all permutations and attempts to change the actual color (whether selected from the 5 color settings or a custom color) have no effect.  I suspect something is over-riding the change or, in my dimmest of moments, I have yet to find the magic CSS color change.  Certainly would appreciate guidance or corrections to my thinking.

    Paul

     

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Andres,

    It looks like one of our Community Moderators was able to provide some custom code on the following post: Help Center - Change design header to match hero image

    You may want to give that a try and see if that gets you the results you're looking for.

    Hope this helps!

    0
  • Wes Drury
    Comment actions Permalink

    @Olivia - Glad to hear. If you run into anything else along the way just let me know.

    0
  • Reed Matheny
    Comment actions Permalink

    Hi, question for folks here:

    I'm trying to move the article-sidebar to the right side of my article page, so that the orientation of the article grid is reversed, resulting in the following layout: 

    Free Space | Content | Sidebar

          17%       |   66%    |   17%

    Seems like it would be simple change to the CSS, but I must be missing it here. Let me know if you have any pointers. Thanks!

    0
  • Andrew Warner
    Comment actions Permalink

    Hi Heather,

    Try this;

    .article-body a {
    color: #4289f4;
    }

    0
  • Wes Drury
    Comment actions Permalink

    @Olivia - Yep you are correct - I was looking at the section titles and not the category titles. They are very similar. Find the below code in your CSS

    .category-tree .category h2 a {
    color: inherit;
    font-weight: lighter;
    }

    Make the following change to font-weight:
    font-weight: bold;

    Sorry about that!

    0
  • Don Findlay
    Comment actions Permalink

    You should probably update the cookbook to properly indicate how to "Hide the Submit a Request link" then.

     

     

    0
  • Don Wood
    Comment actions Permalink

    Is there a way to change the width of the articles? I'm using Hubble Squid as the base and the articles seem narrow. Or, is it not advised to widen the Article size?

    0
  • Heather
    Comment actions Permalink

    Thanks Andrew, that worked.

    But...

    Now there's no change to a link when you click it, so no way to tell what links you may have already visited on a page.  Any way to get both a custom link color and a way to change the color when a link's been visited?

    Thanks!

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi Ashley - 

    I believe the solution presented in this community post will do what you're looking for: 

    Changing all "My Activities" text to "My Tickets"


    0

Please sign in to leave a comment.

Related articles

Related articles

Powered by Zendesk