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. 

You must have the  Docs: Create new, edit settings and collections permission to access Docs settings. See User Roles and Permissions for more information on permissions. 

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! 

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 code field on the Docs settings page, like so:

<script type="text/javascript">

  (function() {
    function customScript() {

           /* Your custom code */

    }
    if (window.addEventListener) {
      window.addEventListener("load",customScript,false);
    } else if (window.attachEvent) {
      window.attachEvent("onload",customScript);
    }
  })()
</script>

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

Style Your Articles

Our Docs editor has a number of formatting options built right in that will let you style up your article with just a few clicks. If you want to get even fancier though, you can use an HTML block and use inline CSS to really get custom. 

More about the editor here: About the Docs Editor