Customize the Knowledge Base HTML & CSS

Last Updated: July 12, 2022

What's in this article?

Can I customize the look of my external facing Knowledge Base?

Besides being able to change small branding aspects of the Knowledge Base (e.g. banners, colors, fonts, etc.), you can also edit the base HTML and CSS of the Knowledge Base to customize the look and feel of your Knowledge Base. 

You can edit the base HTML templates of seven parts of the default Knowledge Base:

  • Header: HTML associated with the look of the header on each page of the Knowledge Base
  • Home Page: HTML associated with the look of the Home Page
  • Sub Pages: HTML associated with the look of Sub Pages within the Knowledge Base (e.g. Label pages)
  • Articles: HTML associated with the look of Articles
  • Embedded Article: HTML associated to how Embedded Articles look
  • Search Box: HTML associated with the look of the Knowledge Base search box
  • Footer: HTML associated with the look of the footer on each page of the Knowledge Base

e93d01851102a5247093519a3702234d.png

You can also edit the base CSS Stylesheet to add and edit the CSS of the Knowledge Base to fit with your brand. 

fe4e744a23d0a48de5644b55de6f2944.png

How do I customize the HTML and CSS of my Knowledge Base?

To edit the HTML and CSS of your Knowledge Base - 

  1. Go to Settings by clicking the Avatar in the top-right corner of the Platform and selecting the Settings option from the mnu
  2. Go to the Knowledge option on the left menu under the Organization header
  3. Click the Edit button (pencil icon) of the Knowledge Base you would like to edit
  4. Click the Edit Code button under the Template HTML and CSS header to open the Custom Code pop-up window
  5. Select the HTML Template or CSS Stylesheet you want to customize in the menu on the left. The right side of the screen will open a View Only look at the HTML or CSS associated with your choice 
  6. Click Customize under the Header on the right side to begin editing the HTML or CSSec9c8734d23fd796f033c999ef415c91.png


You can now customize the HTML or CSS associated with that Template or Stylesheet by editing the text in the Text Box. Use the Preview button to validate the changes you made and once complete click Save to make these changes take effect on your Knowledge Base. 

Help us improve. Was this article helpful?


Can't find what you're looking for? Submit an Article Request.