Customize your theme

Each knowledge base theme has associated theme files. Theme files define the way that each of the pages will be displayed to your customer. They are written in a superset of HTML called JSX, which is a technology developed by Facebook. Learn more about JSX through the Offical JSX Documentation. You can also adjust styles through CSS. For a primer on CSS, check out this introduction.

In this article

• Ensure proper article formatting in your custom theme
• Track analytics in your knowledge base
• Add suggested articles to your search bar

Ensure proper article formatting in your custom theme

The knowledge base offers a WYSIYWG or "What you see is what you get" editor, so your content creators can preview the appearance of an article during the authoring process. This works out-of-the-box with the default knowledge base themes, but if you plan to use a custom theme, your theme file will need to have a few particular settings in place to ensure that formatting publishes as expected.

Before making the following changes, we strongly recommend backing up your current CSS file.  Copy and paste the existing styles.css file into another text editor to serve as a backup. 

1. Edit the theme by going to Settings > Knowledge Base > Themes, then select Edit for the theme you wish to edit.

   Note: If you created a theme using the visual theme builder, you can access the editor by selecting your theme, going to More Options , and selecting Go to Code Editor.

   
   
2. From the Theme Files panel on the right, open the Pages category and select article.jsx.
3. Add fr-view in front of article-body, as shown below.
   
   
   
4. In the Globals category, open the styles.css file and add the following styles:

   .article-body blockquote {
     border: none;
     color: #222222;
     padding-left: 4em;
   }
   
   
   body[dir="rtl"] blockquote {
     padding-left: auto;
     padding-right: 4em;
   }
   
   
   body[dir="rtl"] blockquote:before {
     left: auto;
     right: 1rem;
   }

   
   

   Here is an example of the code in the file:

   
   
   
5. Use search to locate and remove the article-body img style block.
   
   
   
6. Remove the Quill indent support styles. The entire block should be removed, up until the Search Page section.
   

Track analytics in your knowledge base

You can add Google Analytics to your knowledge base to help track its performance. You can add a Google Analytics script via a theme's GA.js global theme file. For more information, see Add Google Analytics to your knowledge base.

Add suggested articles in your search bar

You can add the ability to suggest articles in your knowledge base's search bar so that customer's can find the information they are searching for faster. For more information, see Show suggested articles in your knowledge base search bar.