Customize a knowledge base theme

Customize the appearance and content of your knowledge base to align with your brand and create a consistent navigation experience for visitors. Use the theme editor to update colors, typography, homepage and article layouts, and header and footer styles. Use the global content editor to update header and footer content, including the logo, menus, support options, and social links. 

Before you get started

Before you customize your knowledge base theme, review these requirements and the considerations.

Understand limitations & considerations

• These tools are only available for migrated knowledge bases. Learn more about migrating your knowledge base.
• For knowledge bases that haven't been migrated, learn more about creating and customizing a legacy knowledge base.
• Knowledge base customization isn't supported in the design manager or with custom themes. For deeper customization, you can add code snippets to your knowledge base settings, including in the site's header and footer.

Customize knowledge base theme styles

Use the knowledge base theme editor to establish a consistent visual style and layout for your knowledge base. Update colors and typography, choose layouts for the homepage and article pages, and configure header and footer styles.

1. In your HubSpot account, click More, then navigate to Service > Knowledge Base. If More doesn't appear in your account, navigate to Service > Knowledge Base directly.
2. In the upper right, click the Configure dropdown menu and select Theme.

Customize colors

A knowledge base theme's color settings apply a primary, secondary, accent, and body color to all elements included in the theme's template. These styles are applied to all elements on your knowledge base. 

1. In the theme editor, click the Colors section in the left sidebar.
2. For each color type (e.g., Primary), click the color picker and select a color for the Primary, Secondary, Accent, and Body fields. By default, your brand colors will display.

Customize typography

Choose a primary and secondary font to apply to a knowledge base's headings, body, and URL links. 

1. In the theme editor, click Typography in the left sidebar.
2. In the Primary and Secondary fields, click the font dropdown menu and select a font. To change the font color, click the color picker and select a font color. Additional font style options may be available (e.g., font weight) depending on the font selected. 
3. To edit the heading, body or link fonts, click the Heading (H1-H6), Body, or Link sections. Then click the font dropdown menu, and select a font. To change the font color, click the color picker and select a font color.

Customize page layouts

Choose layouts for your knowledge base homepage and article pages. Available layout options and styling settings vary by page type.

Customize the homepage layout

1. In the theme editor, click the View on dropdown menu in the upper left and select Knowledge base homepage.
2. In the left sidebar, click the Homepage section and select a layout option, such as Tiles or Minimal.

Customize the article page layout

1. In theme editor, click the View on dropdown menu in the upper left and select Knowledge base article.
2. In the left sidebar, click the Article section and select a layout option, such as Left sidebar or Right sidebar

Customize header and footer styles

Customize the styles of your knowledge base theme's header and footer, including their width, colors, fonts, menus, and other elements. The available options vary by section.

Customize header styles

• Header width: select Full width or Content width.
• Top bar: select the background color, base font, and hover font.
• Language switcher: click the color picker and select a color.
• Menu: select the base font, hover font, background color, spacing, and dropdown styles.
• Button: select the font, text transform, background color, border style, corner radius, and hover font.
• Search bar: select the background type, such as color or image, and configure the spacing, label text, and input text styles.

Customize footer styles

• Footer width: select Full width or Content width.
• Background: click the color picker and select a color.
• Menu: select the base font and hover font. To change the font color, click the color picker and select a font color.
• Text: select a font.
• Social icons: select the icon size, icon shape, icon color, background color, and alignment.

Preview and publish theme changes

Preview your theme across templates, languages, and devices before publishing your changes.

1. In your HubSpot account, click More, then navigate to Service > Knowledge Base. If More doesn't appear in your account, navigate to Service > Knowledge Base directly.
2. In the upper right, click the Configure dropdown menu and select Theme.
3. In the theme editor, click Preview in the upper left.
4. To view a template with sample content, click the View on dropdown menu in the upper left and select a template. 

4. To view a template in different languages, click the language dropdown menu in the upper left and select a language.

5. To view how a template will display on different devices, click the device icons in the upper right.

6. When finished, click Back in the upper left.

7. To take your changes live, click Publish theme in the upper right.

Edit global header and footer content

Use the global content editor to customize the content displayed in your knowledge base header and footer.

Edit header content

Customize the header content displayed across your knowledge base pages, including the logo, navigation menu, support options, button, and language switcher.

1. In your HubSpot account, click More, then navigate to Service > Knowledge Base. If More doesn't appear in your account, navigate to Service > Knowledge Base directly.
2. In the upper right, click the Configure dropdown menu and select Header.
3. In the global content editor, click the siteTree Contents icon in the left sidebar. 
4. In the left sidebar, click the Website header module and select from the following:
   • Logo: toggle the Override default logo switch on or click Edit default logo in this domain. To show your company name, toggle the Show company name when logo isn't set switch on.
   • Additional support options: toggle the Show customer portal link, Show sign-in for restricted content, or Support form switches.
   • Menu: select a Menu and Max levels.
   • Button: select the Add button checkbox, Link to, and Link type.
   • Language switcher: select the Add language switcher checkbox and Display mode.
5. When finished, click Publish to [#] assets in the upper right.

Edit footer content

Customize the footer content displayed across your knowledge base pages, including the logo, menu, address, social links, and copyright text.

1. In your HubSpot account, click More, then navigate to Service > Knowledge Base. If More doesn't appear in your account, navigate to Service > Knowledge Base directly.
2. In the upper right, click the Configure dropdown menu and select Footer.
3. In the global content editor, click the siteTree Contents icon in the left sidebar.
4. In the left sidebar, click a module to edit the content:
   • Footer menu: click the Menu dropdown menu and select a menu. To show the footer menu across all knowledge base pages, select the Show menu checkbox.
   • Logo: toggle the Override default logo switch on or click Edit default logo in this domain. 
   • Footer address: click Edit in expanded view and enter the footer address.
   • Social follow: hover over a social link and click the editIcon edit icon. Click the Link to dropdown menu and select an option.
   • Footer copyright: click Edit in expanded view and enter the footer copyright.
5. When finished, click Publish to [#] assets in the upper right.