Customize Your Docs Site

Docs allows you to manage your knowledge base or help center content right from Help Scout. Out of the box, Docs has a sleek and clean look with some customization built right into Docs settings and our default CSS, no custom coding necessary. If you want to customize your site further and match your brand seamlessly, put your team's CSS skills to work and create your own stylesheet. 

This article covers all of the customization options Docs offers. 

Looking for some inspiration on what to do? Check out Docs Branding Examples for a quick look at some beautiful customer designs!

In this article

Docs Settings

Head to Manage > Docs and choose your Docs site to get to the main Docs settings page. 

Basics

Give your site a Name, change your Sub-domain as you like, and set up a Custom Domain if you want your Docs site to show as your own domain name. Use Your Own Custom Domain With Docs covers the steps to get that set up. 

Branding

Upload your Logo, Favicon, and Touch icon if you'd like to customize those. 

The favicon is the little icon that will appear in your browser tab or on shortcuts and favorites that someone saves for your site. For example, the tab of this article viewed in a web browser will show a Help Scout logo. 

The touch icon is the icon that an iOS mobile device (iPhone or iPad) will show when saved to the home screen of that device. 

Choose the colors you want to use. 

  • Page Background Color is the background color for the entire page.
  • Header Background Color is the background color of the very top of the page.
  • Nav Text Color is the color of header navigation links; these are the links to your collections. 
  • Nav Active Color is the color of the text in the top navigation when you are on a category or article in that collection. 
  • Link Color is the color of links within your articles. 
  • Article Text Color is the color of the text of the articles. 

Site Information

Home Page URL 
The copyright notice at the bottom of your Docs pages will link to the address in this field, typically your main website address. Choose Link the site logo to my home page to use that address as the link for your logo from the header as well. If your logo is set to link to your Home Page URL, the top navigation of your Docs site will include a new home link as well — set the name of that link text with Docs Home Link Text

Site Description
This text is shown on the Docs home page above the search bar and has a limit of 50 characters. 

Meta Description
The meta description applies to every page in your Docs site as the <meta name="description"> tag which is used by search engines and has a limit of 160 characters. 

Show on Home Page
Choose to have your Docs home page start with the list of your Categories or with a list of your Most Popular Articles. Check out Homepage Layout Options for more detailed information on this setting. 

Use CSS (Cascading Style Sheets)

Add your own CSS by linking to a stylesheet you're hosting in your own space, or upload your own custom CSS file to your Docs settings. We've collected some of the more popular customizations in Popular Docs Styling Tricks that you can include in your custom CSS, but you can customize just about everything on your Docs site with do-it-yourself custom CSS! 

Know a little CSS but not sure where to start? HR Partner has kindly shared a super helpful CSS template based on the custom work they did to jazz up their own site — check out their blog post here: Setting up our Help Scout branding

Add your custom CSS

Just head to Manage > Docs > [Your Docs site] > Custom Code to get started. 

External CSS - upload a CSS file to your Docs site
Just click the Choose File button to select the file you want to upload and click Save. This will upload that file to your Docs space and we'll fill in the Custom Stylesheet URL field with the new address. Upload a new one to replace it, or clear out what's in the Custom Stylesheet URL to remove it.  

External CSS - link to a CSS file hosted elsewhere
Just enter the address where your CSS file lives into Custom Stylesheet URL. As long as the CSS file can be read as a CSS file, you can host the file where you would like. 

You can use Dropbox to host your CSS file, but there are some additional steps you'll need to go through to get the right URL to paste in to this field so that the CSS file can be read correctly — the regular Dropbox share link won't work for that. Check out How to Host a Stylesheet on Dropbox for the steps. 

Internal CSS
Just add your CSS to the head code of all of your Docs pages using the Insert <head> Code field. This CSS will automatically apply to all pages of your Docs site. 

Use JavaScript

Sometimes you may want to use JavaScript to customize your docs site. While we don't generally recommend this (and can't promise you won't break the page by doing so), if you're set on modifying the page content with custom JavaScript, you can enter your code in the Insert <head> code field at Manage > Docs > [Your Docs Site] > Custom Code

Docs already includes the popular jQuery library, so if you're keen to use it, do not include your own jQuery <script> tags - instead, enter your script in the custom header field on the Docs settings page, like so:

Any code you place inside the customScript function will be able to $ for jQuery.  

Style Your Articles

Within your articles, you can use some styles that we've built into the Docs product by popping into the HTML editor </> and adding the classes we've defined. Check out Docs Style Guide for the details on what's available to you out of the box. 

Use CSS

Use inline CSS in each article as needed as well. Just pop over to the HTML editor </> and add the styles within the elements you want to customize. 

Note: The HTML editor does not support adding internal CSS or calling an external stylesheet within individual articles. 

Still stuck? How can we help? How can we help?