Customize a knowledge base theme

Customize how your knowledge base looks by choosing your layout, changing your theme styles, and editing the header or footer content in the theme editor. You can also preview how your knowledge base theme will appear on templates, in different languages, and in different screen sizes.

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.
• You can't customize your knowledge base in the Design Manager or use custom themes.

Customize knowledge base theme styles

Within the knowledge base theme editor, you have options for configuring colors, typography, layout, header, and footer styles.

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 your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Theme.
3. Click to expand the Colors section and select a color for Primary, Secondary, Accent, and Body fields. By default, your brand colors will display.
4. When finished, click Publish theme in the top right.

Typography

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

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Theme.
3. In the left sidebar, click Typography.
4. In the Primary and Secondary sections, click the font dropdown menu and select a font. To change the font color, click the color picker and select a font color. The additional font styling options (e.g., font weight, size, or transform case) will depend on the font selected. 
5. To edit heading, body or link fonts, click to expand the Heading (H1-H6), Body, or Link sections, click the font dropdown menu, and select a font. To change the font color, click the color picker and select a font color.
6. When finished, click Publish theme in the top right.

Layout

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Theme.
3. Click to expand the Layout section and select an option (e.g., Tiles or Minimal). Different layout options will support different styling options.
4. When finished, click Publish theme in the top right.

Header

You can edit your knowledge base theme's header styles, including the header width, top bar, language switcher, menu, button, and search bar. You can also edit colors, fonts, and hover styles within those elements.

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Theme.
3. In the left sidebar, click Header and select from the following:
   
   • 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 Base font, Hover font, Background color, and Drop down styles.
   • Button: select Font, Text transform, Background color, Border style, Corner radius, and Hover font styles.
   • Search bar: select the Background color, Label text, and Input text styles.
4. When finished, click Publish theme in the top right.

Footer

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Theme.
3. In the left sidebar, click Footer and select from the following:
   1. Footer width: select Full Width or Content width. 
   2. Background: click the color picker and select a color.
   3. Menu: select the Base font and Hover font. To change the font color, click the color picker and select a font color.
   4. Text: select a Font. 
   5. Social icons: select an Icon size, Icon shape, Icon color, Background color, and Alignment.
4. When finished, click Publish theme in the top right.

Edit knowledge base header content

Customize your knowledge base header content to feature your brand or navigation links. Published updates appear automatically across all knowledge base pages.

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top 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 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 top right.

Edit knowledge base footer content

Customize your knowledge base footer content to feature your brand or navigation links. Published updates appear automatically across all knowledge base pages.

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Footer.
3. In the global content editor, click the siteTree Contents icon and select from the following:
   • 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 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.
4. When finished, click Publish to [#] assets in the top right.

Preview a knowledge base theme

Once you've created your knowledge base, you can view how your theme looks in the theme editor. You can view how the theme looks across different templates, languages, and screen sizes. 

1. In your HubSpot account, navigate to Service > Knowledge Base.
2. In the top right, click the Configure dropdown menu and select Theme.
3.  To view a template with sample content, click the View on dropdown menu in the top left and select a template. Changes to the theme will be applied to all knowledge base templates.

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

5. To view how a template will display on different devices, click the device icons at the top of the editor, or enter a screen width in pixels.