Help Center CSS cookbook Follow

team 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.

Note: Access to the page code is available on Team, Professional, and Enterprise. Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase the Essential plan.

To access and edit the CSS in Help Center, 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 - 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 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 the Help Center 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 My Activities link text

Add the following jQuery statement to the $(document).ready(function() function in the JavaScript template:

$('#user-menu .my-activities').html(' See my requests');

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;
}

Swiftest Elk home page

The layout of the Swiftest Elk template consists of the following elements stacked vertically in the main content area:

  • a page-wide search box
  • links to knowledge base content with a sidebar on the right side containing trending questions in the community, if the community is enabled

Back to the table of contents.

Change the width of the main content area

Change the width value in the following selector:

main, .header-inner, .footer-inner {
  width: 800px;
}

Change the width of the knowledge base or community area

Change the width value in the following selectors:

body.community-enabled .knowledge-base {    
  width: 760px;
}

body.community-enabled .community { 
  width: 220px;
}

Adjust the space above the knowledge base or community area

Add the following selectors and properties.

Knowledge base:

.knowledge-base {
  margin-top: 10px;
}

Community:

.community {
  margin-top: 10px;
}

Exchange the positions of the knowledge base and community areas

Change the float property in the following selectors:

body.community-enabled .knowledge-base {
  float: right;
}

body.community-enabled .community {
  float: left;
}

Wiry Merchant home page

The layout of the Wiry Merchant template consists of the following elements stacked vertically in the main content area:

  • a page-wide search box
  • a category tree with collapsed categories and sections

Back to the table of contents.

Add a link to your community

The Wiry Merchant template by default doesn't contain a link to your community.

To add a link

  1. In the Theme editor, select the Home page template from the HTML menu.
  2. Add the following div tag and component placeholder after the {{category_tree}} placeholder in the HTML:
    <div id="community-link">
      {{community_header}}
    </div>
  3. Select the CSS stylesheet and add the following selector to style the component (your properties will vary):
    #community-link {
      font-size: 105%;
      font-style: italic;
      color: #00ff00;
    }

Humble Squid home page

The layout of the Humble Squid template consists of the following elements stacked vertically in the main content area:

  • a knowledge base div containing a tiled category list, following by a list of promoted articles
  • a community div containing a list of trending questions with a link to your community next to it

Back to the table of contents.

Change the width of the main content area

Change the width value in the following selector:

main {
  width: 900px;
}

Change the size of the category tiles

Change the width and height properties in the following selector:

.category-list li {
  width: 296px;
  height: 203px;
}

Change the background color of the category tiles

Change the background property in the following selector:

.category-list li {
  background: #666;
}

Change the headings in the category tiles

Change or add text properties in the following selector:

.category-list li {
  color: #FCC;
  font-weight: bold;
}

Curious Wind home page

The layout of the Curious Wind template consists of the following elements stacked vertically in the main content area:

  • a section containing the Help Center name and a search box
  • a vertical column of boxed links to the knowledge base with a sidebar on the right side containing links to trending questions in the community

Back to the table of contents.

Change the width of the main content area

Change the width value in the following selector:

main, .header-inner, .footer-inner {
  width: 800px;
}

Change the width of the knowledge base and community area

Change the width value in the following selectors:

body.community-enabled .knowledge-base {
  width: 55%;
}

.community {
  width: 43%;
}

Because the articles are displayed on the home page when a user clicks a link, make sure each area is wide enough to display images in your articles.

Tip: For best results, the two percentages should total 98.

Exchange the positions of the knowledge base and community areas

Change the float values in the following selectors:

body.community-enabled .knowledge-base {
  float: right;
}

.community {
  float: left;
}

Change the appearance of the Help Center name

Change the text properties and values in the following selector:

.help-center-name {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: 100;
  margin-top: 20px;
  margin-bottom: 30px;
}

Change the size of the article boxes

Change the padding property in the following selector:

.article-list > li {
  padding: 16px 30px;
}

Change the spacing between the article boxes

Change the margin-bottom property in the following selector:

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

Change the background color of the article boxes

Change the background property in the following selector:

.article-list > li {
  background: #666;
}

Change the appearance of the article links

Change or add text properties in the following selector:

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

Change the color of the article links

Add the following selector:

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

Noble Feast home page

The layout of the Noble Feast template consists of the following elements stacked vertically in the main content area:

  • a section containing a page-wide search box
  • a category tree with collapsed categories and sections

Back to the table of contents.

Change the width of the main content area

Change the width value in the following selector:

main, .header-inner, .footer-inner {
  width: 800px;
}

Change the size of the category boxes

Change the padding property in the following selector:

.category-list a {
  padding: 30px;
}

Change the spacing between the category boxes

Change the margin-bottom property in the following selector:

.category-list a {
  margin-bottom: 20px;
}

Change the background color of the category boxes

Change the background property in the following selector:

.category-list a {
  background: #CCF;
}

Change the border of the category boxes

Change or add border and box-shadow properties in the following selector:

.category-list a {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  box-shadow: inset 0 -3px #e6e6e6;
}

Change the appearance of the category links

Change or add text properties in the following selector:

.category-list a {
  color: #888;
  font-size: 20px;
  font-weight: bold;
}
Have more questions? Submit a request

Comments

  • 0

    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!

  • 0

    One other question, how can I make the category titles bold on the homepage but leave the rest of the text (section and articles) alone? Seems like they all fall under the same font.

    Thanks!

  • 0

    @Olivia - Yes everything that you mentioned is possible with some HTML and CSS. Just add the necessary HTML to your image and link it back to your main site. I've also seen some companies add a link in the header which redirects back to their main site so either one is possible.

    To make the category title bold find the following class in your CSS:

    .community h2, .community h3, .section h3 {
    color: #555555;
    font-size: 13px;
    font-weight: lighter;
    margin: 10px 0 15px;
    text-transform: uppercase;
    }

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

  • 0

    Hi Wes,

    Thank you for the quick response! That coding actually made the section on the homepage bold (which looks kind of cool) but is there any designation for the category titles?

    Would you have any advice on how to move the search box to the left margin?

    Thank you!

  • 0

    @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

    Hi Wes,

    Thanks for all your help.

    I'm still having a little trouble getting an image to link back to my website. Would you be able to provide an example of how to do that? I uploaded an image to assets and I'm trying to place it where the logo would go, but I can't get the URL to attach to the image in the HTML.

    Thank you!

  • 0

    @Olivia - Is is possible to post the link to your Help Center so that I can see what's going on.

  • 0

    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!

    Edited by OliviaBasileo
  • 0

    @Olivia - Thanks for the URL, that will help. I'll do my best to take a look at this by tomorrow and post some code for you.

  • 0

    @Olivia - You could just add the following into the HTML. Remove the {{logo}} placeholder and add: (change googole.com to your homepage.

    <div class="logo"><a title="Home" href="http://google.com">
    <img src="//p5.zdassets.com/hc/settings_assets/793026/200142987/IfCi1DgjYXsJwgER4p5rVA-zen_logo.jpg" alt="Logo">
    </a></div>

  • 0

    Worked like magic, Wes, thank you so much!

  • 0

    @Olivia - Awesome - best of luck and if you run into any other issues just let me know.

  • 0

    How can I vertically center the text in category-list? The vertical-align property seems to have no affect in either the "category-list li" or "category-list li a" code.
    One of my categories now has 2 lines of text and using margins to position the text does not work.
    My HC is: https://aarpfoundationtaxaide.zendesk.com/hc/en-us

  • 0

    Hello,

    We are using a customization of the Swiftest Elk Help Center, we have our community disabled. I was wondering if there was any way we could have 3 section columns listed on the homepage rather than the default 2? I've increased the margins and would like to squeeze one more column in each row to make the page shorter.

    Our Help Center is https://bloomsburyfashioncentral.zendesk.com/hc/en-us

    Thank you!

    Edited by OliviaBasileo
  • 0

    @Olivia - I did this in the previous incarnation of our Help Center which used Swiftest Elk. As far as I can tell, in the CSS section for the home page, I used the following code (right now I can't remember if there was another component):

    body.community-enabled .knowledge-base {
    width: 900px;
    }

    .knowledge-base, .community {
    display: inline-block;
    vertical-align: top;
    }

    .knowledge-base {
    width: 100%;
    }

  • 0

    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%

    Edited by OliviaBasileo
  • 0

    @Olivia - Can you provide a URL or screenshot so that I can fully understand what you trying to accomplish.

  • 0

    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

    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

    That worked perfectly, thank you!!

  • 0

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

  • 0

    Another question (sorry!)

    I used a JS code to change "submit a request" to "submit a query" on my homepage and that worked great. But on the bottom on the articles it still says "submit a request"-- how can I change it to match the homepage?

    Thank you!

  • 0

    @Olivia - Instead of writing more code, I'm just gonna add onto the code that you already have. Edit line 48 in JS code with the code below.

    $('.user-nav .submit-a-request, div.article-more-questions a').html(' Submit a Query');

  • 0

    Perfect, thank you! :)

  • 0

    Feel like I'm going crazy here. I'm trying to customize the login link color, since our link color is the same as the primary theme color.

    • Added CSS based on info above:

    • Viewing page as
    • Sign In link doesn't show in white:





  • 0

    @Seth - add !important at the end.  That should get it.

    .login {

    color: white !important

    }

  • 0

    The good news is that worked! #CSSvoodoo @ZenTeam, should that be added to the documentation in this article?

    The bad news is that I was hoping the .login property would also affect the styling of the name of a logged-in user, which still shows with the old styling. Any idea what CSS will change the styling of the text for a logged-in user?

    • Preview as Anonymous:
    • End-User or Agent:



  • 0

    @Seth - thats a different class.  I normally use the below class for both of them.

    .login, .user-info {
     
    color: #176883;
    }
     
    Change the color there, you may still have to use the !important.
  • 0

    That class is located in your CSS already so you can find it there and make the change or if you add it manually then you will need to use the !important to override the one thats already in your CSS file.

  • 0

    Thanks again, Wes. Unfortunately the .user-info approach didn't have an effect. Also, a search in the existing CSS doesn't find either .login or .user-info, so I can't just edit them there. I did find .user-nav, and tried the following, which also didn't have an effect. (I also added in the submit-a-request link.)

    .login, .submit-a-request, .user-nav {
    color: white !important;
    }

Please sign in to leave a comment.

Powered by Zendesk