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.
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
- 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 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.
To change your logo size
- In Guide, click the Customize design (
) icon in the sidebar.
- Click Edit theme.
- 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).
- Modify the height property in the ".logo img" selector to match the height of the image.
- 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;
}
96 Comments
@Seth - For the user name
THERE we go! Worked like a charm! Thanks again, Wes.
@Seth - Your welcome, glad to hear everything is working. If you need anything else along the way just let me know.
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!
@Kevin - This article may get you doing in the right direction.
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.,
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
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!
Morning awesome people. I am trying to accomplish a few things with my search bar.
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
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:
@don. You will need to add the following placeholder on the HTML tab.
{{link 'new_request' class='submit-a-request'}}
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?
@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.
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
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?
@Don - Have you tried to remove the link from the header?
{{link 'new_request' class='submit-a-request'}} > comment out or delete this line.
@Don - Andrew is correct, the best solution would be to delete or comment out the placeholder for the submit a request.
You should probably update the cookbook to properly indicate how to "Hide the Submit a Request link" then.
How can I change the label "Submit a request" to another label (with the same function), like "Open a Ticket"?
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?
@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.
@Wes - Thanks a lot!!! It worked perfectly!
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?
@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:
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.
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
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
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!
Thanks Nicole. Happy to help where I can.
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?
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!
Please sign in to leave a comment.