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

83 Comments

Sort by Date Votes
  • 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
  • Mike Tamosaitis
    Comment actions Permalink

    How do I break up the categories on my home page? I have like 23 categories and I want to break them up into different sections on my home page with a title at the top of each section.Any help would be appreciated. 

    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
  • Trapta
    Comment actions Permalink

    Hi @Reed,

    Considering that you are using Copenhagen Theme, go to line no. 1172 in your style.css file and replace the code with the below code -

    .article-container {
      flex-direction: row-reverse;
    }

    Let me know if you face any issue.

    Team Diziana

    0
  • Heather
    Comment actions Permalink

     

    Having a bit of an issue with trying to modify the appearance of links in my articles.

    In my CSS, the only code snippet that looks somewhat like the one posted in this article for links, is this:

    .article-body a:visited {
    color: darken($link_color, 20%);
    }

    It feels as though this snippet is used to control the appearance of a visited link, but I can't tell if it's also supposed to be used to control the appearance of an un-visited link.  Right now the link text in our articles is a very dark blue--almost indistinguishable from the regular black text.  I wanted to change that to a lighter blue (something like hex #4289f4) but if I try to add that code to the above snippet, nothing really happens.

    If I add the link code snippet shown in the above article, and enter a color number, there is still no change to the link appearance.  I've even tried wildly different colors (like bright red) to test this, but...nothing.  I'm saving my code changes and previewing them, as well as logging in to the Help Center and looking at articles directly, but all links continue to show as a dark blue.

    Any ideas on what I might be doing wrong?  

    0
  • Andrew Warner
    Comment actions Permalink

    Hi Heather,

    Try this;

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

    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
  • Andrew Warner
    Comment actions Permalink

    Ah, sorry i should have stated that you'd need both, like so;

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

    .article-body a:visited {
    color: darken($link_color, 20%);
    }

    0
  • Heather
    Comment actions Permalink

    Hmmm.  So, when I have just the one snippet, then I can change the link color, no problem.  But when I have both snippets, the link color won't change, no matter what color code I put in.

    So right now my scenarios are like this:

    With just the .article-body a code snippet - link color can be changed, but no indication of what links have been visited.

    With just the .article-body a:visited snippet - link color cannot be changed, and no indication of what links have been visited

    With both the snippets - link color cannot be changed and no indication of what links have been visited

    Not sure what's causing the problem, but when the .article-body a:visited snippet is present, it doesn't seem to like it.

    0
  • Emma MacDonald
    Comment actions Permalink

    I'm interested in changing the text of the 'Was this article helpful?' button. I believe these instructions just explain how to change the style/format. Is there a way to edit this text? 

    0
  • Trapta
    Comment actions Permalink

    Hi @Heather,

    Try this:

    .article-body a {color: #4289f4;}
    .article-body a:visited {color: darken(#4289f4, 20%);}

    Let me know if this solves your issue.

    Team Diziana

    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
  • Emma MacDonald
    Comment actions Permalink

    Hi @Trapta,

    Thanks for the reply. It seems that whenever I change anything about {{t 'was_this_article_helpful'}}, the text disappears from the article page entirely. Can you give me an example of what it should look like if I want it to say "Did this article answer your question?"? 

    Thanks!

    0
  • Heather
    Comment actions Permalink

    Hi @Trapta,

    Thanks for the response.  When I use the code snippet provided there's still no color change to indicate links have been visited.

    Interestingly enough, if I try to use the snippet provided with a different color code (e.g. #990099, etc.) all the links go black, same color as the text, no matter what color code I use.  And still nothing indicates clicked links.  The only way I can get the links to go back to a bright blue is to change the code back to #4289f4.

    Thanks!

     

    0
  • Trapta
    Comment actions Permalink

    @Emma,

    It should look like this

    <span class="article-votes-question">Did this article answer your question?</span>

    Let us know how it goes for you.

    Team Diziana

    0
  • Timothy Rogers
    • Edited
    Comment actions Permalink

    Hello All, 

     

    I have a few things that I would like to change on my modified Copenhagen Set.

     

    1. I would like to make the FAQ and Announcement buttons Solid all the time. I am able to set the color, but it is transparent until I hover. I want it to be the color without the hover.

    2. I would like to make the Submit a Request link a button in the header. I have seen this done, but I have not been able to find any hints on how to do it. I feel like i have read that I would need to remove the current code for the link, and replace it with button code.

    3. I would like to remove the graphic where the search field is,and just have the search field on the main background.

    4. I would like to change the search field to have a button on the right side of the field that says search, and match the colors to what my other buttons are set to.

     

    I can separate these into separate questions if the makes more sense.

     

    0
  • Brett - Community Manager
    • Edited
    Comment actions Permalink

    Hey Timothy, 

    Hopefully some of our community members can jump in here and provide some guidance for you :) 

    In the meantime, I would recommend taking a look at the following documentation: 

    We also do have a Professional Services team available that can assist with these customizations at an additional cost. 

    If this is something you're interested in let us know. We can get a ticket created on your behalf and passed over to the appropriate team.

    Cheers!

    0
  • Suman Saha
    Comment actions Permalink

    Hi Charles,

    I need a help with customizing the help center..I have been able to customize the copenhegan theme as below:

    What I need is.... when the user clicks on any of the Buttons above, application should be taking me to a Ticket form (from the list) as appropriate, skipping the new_request_page.hbs (request page).

    The ticket forms list are as below:

     

    Do you have any articles handy, that can guide me?

    Thanks,

    Suman

    0
  • Pedro Rodrigues
    Comment actions Permalink

    Hi Suman, if I understand correctly, what you want is to find the ID of the form you wish to link.

    You can get each form's ID by editing it, and the URL will give you the ID, as in:

    yourdomain.com/agent/admin/ticket_forms/edit/XXXXXXXXX

    Once you have the form IDs, the path behind each anchor button should be like so:

    yourdomain.com/hc/es/requests/new?ticket_form_id=XXXXXXXXX

    0
  • Suman Saha
    Comment actions Permalink

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

    0
  • Pedro Rodrigues
    Comment actions Permalink

    Awesome! Happy to help :-)

    0
  • Andres Rincon
    Comment actions Permalink

    Is it possible to add a background image to a header section? I want it to be in line with the hero image, and have it be a sticky header as users navigate down the page. 

    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

Please sign in to leave a comment.

Related articles

Related articles

Powered by Zendesk