You can easily customize the look and feel of your help center using Cascading Style Sheets (CSS). This cookbook is designed to help you make your help center look the way you want.
To access and edit the CSS in Guide, seeCustomizing 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 CSSis 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 Tutorialgives you just enough to get started.
You can also customize the look of your help center using the Help Center templating language or JavaScript:
Table of contents
The cookbook is organized into sections covering elements of a help center. Each section includes CSS code that you can paste directly into your theme's stylesheet. Use the code as-is or edit it to make it your own.
The cookbook isn't exhaustive. By modifying the HTML templates and CSS stylesheet, the number of things you can do is limited only by your imagination.
Header and footer
- Change the background color of the header or footer
- Change the height of the header or footer
- Change the space above or below the header or footer
- Change the appearance of the selected language
- Change the appearance of the Submit a Request link
- Hide the Submit a Request link
- Change the appearance of the Sign In link
- Change the logo dimensions
Search
- Change the width or height of the search field
- Change the background color of the search field
- Change the appearance of the search text
- Change the appearance of the results page heading
- Change the appearance of search result keyword highlighting
- Change the appearance of the Knowledge base and Community headings
- Change the spacing between the results
- Change the appearance of the result text
- Change the color of the result links
Breadcrumbs
Article lists
Knowledge base articles
- Change the appearance of article titles
- Change the appearance of article text
- Change the color of article links
- Change the appearance of the author's name
- Change the appearance of the last updated string
- Change the appearance of "Was this article helpful?"
- Change the appearance of the vote counter
- Change the appearance of "Have more questions? Submit a request"
- Change the appearance of the Comments title
- Change the appearance of comment text
Community questions and answers
- Change the appearance of question titles
- Change the appearance of question text
- Change the color of question links
- Change the appearance of the question author's name
- Change the appearance of the time since question published
- Change the appearance of the share question link
- Change the appearance of the answers heading
- Change the appearance of answer text
- Change the appearance of the answer author's name
- Change the appearance of the time since answer published
- Change the appearance of the share answer link
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 thetable of contents.
Change the background color of the header or footer
Change or add thebackground-colorproperty 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 theheightproperty in the following selectors.
Header:
.header { height: 70px; }Footer:
.footer { height: 20px; }Change the space above or below the header or footer
Change or addmargin-bottomandmargin-topproperties 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.
To change your logo size
- In Guide, click theCustomize design(
) icon in the sidebar. - ClickEdit theme.
- ClickCSSto 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).
- Modify theheightproperty in the ".logo img" selector to match the height of the image.
- ClickSave.
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 thesearch helperin the Help Center Templates guide.
Back to thetable of contents.
Change the width or height of the search field
Change thewidthorheightvalues 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 thebackgroundproperty 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 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 amargin-bottomproperty 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 thecolorproperty in the following selector:
.search-result a { color: #484; }Breadcrumbs
Breadcrumbs help users navigate content in your help center. If you want, you can remove the breadcrumbs. For more information, see thebreadcrumbs helperin the Help Center Templates guide.
Back to thetable of contents.
Change the space above and below the breadcrumbs
Add or change thepaddingproperties 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 thecolorandcontentproperties 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 thetable of contents.
Change the space around the list of articles
Add or modify the following selector andpaddingproperties:
.article-list { padding-left: 16px; padding-right; 20px; }Change the spacing between the articles
Change themargin-bottomproperty 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 thetable of contents.
Change the appearance of article titles
Add or modify the following selector and properties:
.article-header h1 { color: #993; font-family: Verdana, Geneva, sans-serif; font-size: 20px; }Change the appearance of article text
Add or modify the following selector and properties:
.article-body { color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }Change the color of article links
Add or modify the following selector and property:
.article-body a { color: #930; }Change the appearance of the author's name
Add or modify the following selector and properties:
.article-author a { color: #669; font-family: Georgia, Times New Roman, serif; font-size: 16px; }Change the appearance of the last updated string
Add or modify the following selector and properties:
.article-updated { color: #CCC; font-family: Tahoma, Geneva, sans-serif; font-size: 13px; }Change the appearance of "Was this article helpful?"
Add or modify the following selector and properties:
.article-votes-question { color: #763; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }Change the appearance of the vote counter
Example: "6 out of 8 found this helpful". Add or modify the following selector and properties:
.article-vote-label { font-family: Georgia, Times New Roman, serif; font-size: 10px; }Change the appearance of "Have more questions? Submit a request"
Add or modify the following selector and properties:
.article-more-questions { font-family: Arial, Helvetica, sans-serif; font-size: 105%; }Change the appearance of the Comments title
Add or modify the following selector and properties:
.article-comments h2 { color: #666; font-family: Georgia, Times New Roman, serif; font-size: 130%; }Change the appearance of comment text
Add or modify the following selector and properties:
.comment-body { color: #666; font-family: Verdana, Geneva, sans-serif; font-size: 12px; }Community questions and answers
You can change the look and feel of the content in your community.
Back to thetable 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; }改变链接的颜色,添加或修改下ing 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{颜色:# 4 cc;字体类型: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; }改变链接的颜色,添加或修改下ing 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; }
38 Comments
HeyTimo Boezeman, it's added as a element. There are no css classes, but you can style the element directly.
ThanksChristopher Stock!
Hi All,
We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code.
If you are interested please answersign up hereand answer the 3 survey questions. I will reach out to you to setup a 30 min Zoom call.
The interview will be a semi-structured interview where we would like to hear you take us through examples of what you have done or tried to do with customizations and your experience with the tools, documentation etc. you used.
Looking forward to talking to all of you.
Gorka Cardona-Lauridsen
Sr. Product Manager, Zendesk Guide
Hi Everyone - Anyone have any ideas why the closing tag for