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

81 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
  • Seth Wylie
    Comment actions Permalink

    THERE we go! Worked like a charm! Thanks again, Wes.

    0
  • 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
  • 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
  • Wes Drury
    Comment actions Permalink

    @Kevin - This article may get you doing in the right direction.

    0
  • Kevin Lewis
    Comment actions Permalink

    Thanks@Wes

     

    That did not quite work for me. I might just end up creating a static list, but I would much rather have a dynamic list that shows recent articles and one that shows articles from a specific section., 

    0
  • OliviaBasileo
    • Edited
    Comment actions Permalink

    Hello,

    I'm using the Swiftest Elk template and would like to make the Search Bar on the homepage a little smaller, or maybe reduce the padding so that users will be able to see the articles below more readily. Does anyone have any advice on how to achieve this?

    Also, is it possible to insert anchor links below the search bar but above the first category heading, which would then direct down to each category heading?

    Many thanks!! :)

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

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

    Morning awesome people. I am trying to accomplish a few things with my search bar. 

     

    1. I would like the search bar to always stay centered in the image I have in the header of our page, but is shifts around depending on the size of the screen
    2. I want the search text to be darker and call more attention, but it is possible my opacity of the bar is causing a problem here. Ideally it would be dark black and raleway font. Right now the text is more of a light grey
    3.  I would love to change the search icon to something other than a magnifying glass.

     

    Any recommendations on where I am missing this? 

     

    This is the code I have for the search bar right now:

     

    .search-small {
    line-height: 50px;
    position: relative;
    top: 180px;
    left: 250px;
    bottom: 20px;
    opacity: 0.7;
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    }

     

    Here is the look of the page today:

     

     

    https://help.imeetcentral.com/hc/en-us

    0
  • Don Wood
    Comment actions Permalink

    I'm using the Humble Squid template. I want to add a link or button for submitting a ticket. I tried adding a section using the example provided:

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

    But I do not see any change on the main page. What am I doing wrong?
    0
  • Wes Drury
    Comment actions Permalink

    @don.  You will need to add the following placeholder on the HTML tab.

    {{link 'new_request' class='submit-a-request'}}

     

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

    @Don - You can change the width of the article page but you must also adjust the side nav also.  In your CSS find the following two class. Adjust the width to whatever you would like.

    .main-column {
    float: left;
    width: 618px;
    }
    .side-column {
    float: right;
    width: 298px;
    }
    0
  • Morgan King
    Comment actions Permalink

    I am trying to get a three column on my category list. I've succeeded but it has large gaps - is there a way to get there to be less gaps?

     

    Here is my code:

    .category-wrapper .section {
        display: inline-block;
          padding: 0 50px 30px 0;
        vertical-align: top;
            width: 32.5%;

     

    This is what I'm seeing: https://www.screencast.com/t/Xei7JZNE2Nhn

    0
  • Don Findlay
    Comment actions Permalink

    I'm trying to hide the "Submit a request" button by adding the suggested css to the theme.

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

    But the link still renders for the End-user.  Am I missing something?

     

     

    0
  • Andrew Warner
    Comment actions Permalink

    @Don - Have you tried to remove the link from the header?

     

    {{link 'new_request' class='submit-a-request'}} > comment out or delete this line.

    0
  • Wes Drury
    Comment actions Permalink

    @Don - Andrew is correct, the best solution would be to delete or comment out the placeholder for the submit a request.

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

    How can I change the label "Submit a request" to another label (with the same function), like "Open a Ticket"?

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

    @Milton - To bold the category name find the following in your CSS tab.

    .blocks-item-title (located on line 866 in your CSS tab)

    then add what you had

    font-weight: bold.

     

    The category-tree is from an older theme so you can delete that out of your CSS.

    0
  • Milton Marcelo
    Comment actions Permalink

    @Wes - Thanks a lot!!! It worked perfectly!

     

    0
  • Luke Coburn
    • Edited
    Comment actions Permalink

    What is the simplest way to customize content blocks within articles?  Notes, warnings, customizing ordered lists with special-looking numbers to clearly show the steps...these things are happening in a lot of Zendesk sample sites that I'm looking at.  Are they all doing this by going into the Source Code when they are authoring articles?

    For example, in the article above, the author is calling out "Note" sections by adding a yellow background color.  When an agent is authoring an article, do they have to get into the source code and manually add classes to the Note's div tag?  Or is there a way to customize the WYSIWYG editor to allow agents to highlight blocks of the article and inject classes from the front end?

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

    Thanks Nicole. Happy to help where I can. 

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

Please sign in to leave a comment.

Related articles

Related articles

Powered by Zendesk