Customize a knowledge base theme

You can customize the appearance of your knowledge base by selecting your layout and configuring your theme in the theme editor. You can also view how your knowledge base theme will appear on templates, in different languages, and in different screen sizes.

Before you get started

Before you begin working with this feature, make sure to fully understand what steps should be taken ahead of time, as well as the limitations of the feature and potential consequences of using it.

Understand requirements

• Super Admin permissions.
• Knowledge base settings permission, Global content and theme settings permission, and an assigned Service Hub seat. Learn more about HubSpot's seat-based pricing.

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.

View 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. 

Edit a knowledge base theme's colors, typography, and 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. To change a theme's colors, click to expand the Colors section. Then enter a hex value or select a color from the color picker for Primary, Secondary, Accent, and Body background fields. Your brand colors will display for each option.
4. To change a theme's typography, click Typography:
   • 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, font size, or transform case) will depend on the font selected.
   • To edit heading, body, or link typography, click to expand the Heading (H1-H6), Body or Link sections:
     • Click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
     • To change the font color, click the color picker and select a font color.
5. To change a theme's layout, click to expand the Layout section and select an option (e.g., Tiles or Minimal). Different layout options will support different styling options.
6. When finished, click Publish theme in the top right.

Edit a knowledge base theme's header styles

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.

Header width

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 Header in the left sidebar.
4. In the Header section, select Full width or Content width.

Header top bar

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 Header in the left sidebar.
4. In the Header section, click to expand the Top bar section.
5. To edit the background color, enter a hex code value or select a background color in the color picker for the Background color field.
6. Click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
7. To change the font color, click the color picker and select a font color.
8. When finished, click Publish theme in the top right.

Header language switcher

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 Header in the left sidebar.
4. In the Header section, click Language switcher.
5. In the Language Switcher section, click Drop downs.
6. Click to expand the Background section.
7. Enter a hex code value or select a color in the color picker for the Color and Hover fields. 
8. To edit the transparency, enter a percentage value in the second field. For example, a transparency of 100% will be opaque, while a transparency of 0% won't be visible. 
9. When finished, click Publish theme in the top right.

Header menu

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 Header in the left sidebar.
4. In the Header section, click Menu.
5. To edit styles for drop downs, click Drop downs:
   • Click to expand the Background section and enter a hex code value or select a color in the color picker for the Color and Hover fields. To edit the transparency, enter a percentage value in the second field. 
     
   • Click to expand the Text section. Then click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
   • To change the font color, click the color picker and select a font color.
6. To edit the font text style, click to expand the Text section:
   • Click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected. 
   • To change the font color, click the color picker and select a font color.
7. To edit the background color, click to expand the Background section, and then enter a hex code value or select a color in the color picker.
8. When finished, click Publish theme in the top right.

Header buttons

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 Header in the left sidebar.
4. In the Header section, click Button.
5. To edit the font, click to expand the Text section:
   • Click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
   • To change the font color, click the color picker and select a font color.
6.  To edit the background, click to expand the Background section, and enter a hex code value or select a color in the color picker. To edit the transparency, enter a percentage value.
7. To edit the border style, click to expand the Border section click the Style dropdown menu and select a border style (e.g., Dashed).
8. To edit the corner style, click to expand the Corner section. Then enter a pixel value (e.g., 30px) in the Radius field.
9. To edit the hover style, click Hover:
   • Click to expand the Text section.
     • To change the font color, click the color picker and select a font color.
     • To apply font text styles, select the italicizeIcon italic icon or the underlineIcon underline icon.
   • Click to expand the Background section and enter a hex code value or select a color in the color picker. To edit the transparency, enter a percentage value.
   • Click to expand the Border section and then click the Style dropdown menu to select a border style (e.g., Dotted).
10. When finished, click Publish theme in the top right.

Header search bar

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 Header in the left sidebar.
4. In the Header section, click Search bar.
5. To edit the background, click to expand the Background section: and then click the Background type dropdown menu to select an option (e.g., Color, Image, or Gradient). Additional styling options will display depending on the background type selected.
6. To edit the label text styles, click to expand the Label text section: 
   • Click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
   • To change the font color, click the color picker and select a font color.
7. To edit the input font style, click to expand the Input section, and then enter a hex code value or click the color picker to select a color. To edit the transparency, enter a percentage value.
8. When finished, click Publish theme in the top right.

Edit a knowledge base theme's footer styles

You can edit your knowledge base theme's footer styles, including footer width, background, menu, text, and social icons. You can also edit colors, fonts, and hover styles within those elements.

Footer width and background

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 Footer in the left sidebar.
4. To change the footer width, select Full width or Content Width in the Footer width field.
5. To change the footer background color, enter a hex code value or click the color picker to select a color.

Footer menu

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 Footer in the left sidebar.
4. In the Footer section, click to expand the Menu section.
5. To edit the menu's font styles, click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
6. To change the font color, click the color picker and select a font color.
7. When finished, click Publish theme in the top right.

Footer text

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 Footer in the left sidebar.
4. In the Footer section, click to expand the Text section.
5. To edit the menu's font styles, click the font dropdown menu and select a font. The additional font styling options (e.g., font weight, font size, or transform case) will depend on the font selected.
6. To change the font color, click the color picker and select a font color.
7. When finished, click Publish theme in the top right.

Footer social icons

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 Footer in the left sidebar.
4. In the Footer section, click to expand the Social icons section.
5. To change the social icons size, click the Icon size dropdown menu and select an option (e.g., Small, Regular, or Large).
6. To change the social icons shape, click the Icon shape dropdown menu and select an option (e.g., Circle or Square).
7. To change the social icons color, enter a hex code value or click the color picker to select a color in the Icon color field.
8. To change the social icons background color, enter a hex code value or click the color picker to select a color in the Background field. To edit the transparency, enter a percentage value. 
9. To change the social icons alignment, click blockAlignmentLeftIcon Left align, blockAlignmentCenterIcon Center align, or blockAlignmentRightIcon Right align icons in the Alignment field.
10. When finished, click Publish theme in the top right. 

Edit a knowledge base theme's content

You can edit the content of your knowledge base header and footer. Published changes will be visible across all knowledge base pages.

Header content

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.
5. To edit the header logo content, click to expand the Logo section:
   • To override the default logo, toggle the Override default logo switch on or click Edit default logo in this domain to update the default logo.
   • If you selected to override the default logo, you can click Upload or Browse images to add a new logo.
   • To show your company name when a logo isn't set, toggle the Show company name when logo isn't set switch on.
   • To add a URL link to your logo, enter a URL in the Link field.
   • Click Apply options to see your changes.
6. To edit the header menu content, click to expand the Menu section:
   
   • To display a header menu, click the Menu dropdown menu and select a menu.
   • To edit an existing header menu, click Edit.
   • To create a new header menu, click Create new.
   • To edit the number of menu tree children that can be displayed in the header menu, use the upIcon increase and downIcon decrease icons in the Max levels field. 
   • Click Apply options to see your changes.
7. To edit the header button content, click Button:
   
   • To add a button to your header, select the Add button checkbox.
   • To edit the button text in the header, enter the text in the Button text field. 
   • To edit the button URL link, click the Link to dropdown menu and select an option (e.g., External). Additional fields will display depending on the selected option.
   • To have the button URL link open in a new window, toggle the Open link in new window switch on. 
   • To edit the button link type, select the checkbox next to No follow.
   • To add an icon to the button, select the Add icon checkbox:
     • Click Replace to change the button icon. 
     • Click the Position dropdown menu and select the position of the button icon.
   • Click Apply options to see your changes.
8. To edit the language switcher content, click to expand the Language switcher section:
   
   • To add the language switcher to the header, select the Add language switcher checkbox.
   • To edit the display mode of the language switcher, click the Display mode dropdown menu and select an option (e.g., Localized, PageLang, Hybrid).
   • Click Apply options to see your changes.
9. To edit additional support options content, click to expand the Additional support options section:
   
   • To show a customer portal link, toggle the Show customer portal link switch on. In the Customer portal link text field, enter the text that'll be displayed to visitors.
   • To show a sign-in for restricted content, toggle the Show sign-in for restricted content switch on. In the Sign-in link text and Sign-out link text fields, enter the text that'll be displayed to visitors.
   • To show a support form, toggle the Support form switch on, and then select a form in the Form dropdown menu. In the Support form text link and Support form title fields, enter text that'll be displayed to visitors.
   • Click Apply options see your changes.
10. When finished, click Publish to [#] assets in the top right.

Footer content

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 in the left sidebar.
4. To display a footer menu, click the Footer menu module: 
   
   • Click the Menu dropdown menu and select a menu.
   • To edit an existing footer menu, click Edit.
   • To create a new footer menu, click Create new.
   • To edit the number of menu tree children that can be displayed in the footer menu, use the upIcon increase and downIcon decrease icons in the Menu display depth field. 
   • To show the footer menu, select the Show menu checkbox.
   • Click Apply options to see your changes.
5. To edit the footer logo content, click the Logo module: 
   
   • To override the default logo, toggle the Override default logo switch on or click Edit default logo in this domain to update the default logo.
   • If you selected to override the default logo, you can click Upload or Browse images to add a new logo.
   • To customize how the footer logo loads, click the Image loading dropdown menu and select Browser default, Lazy, or Eager.
   • To add a link URL to the footer logo, enter the URL text in the Link URL field.
   • Click Apply options to see your changes.
6. To edit the footer address content, click the Footer address module :
   
   • Click Edit in expanded view.
   • In global content editor, enter the text for the footer address.
   • Click Close expanded view in the left sidebar.
7. To edit the footer social follow content, click the Social follow module:
   
   • In the Social links section, click the editIcon edit, or deleteIcon delete icon to edit or delete an existing social link. To add a social link, click the + Add button. 
   • To show social follow icons, select the Show icons checkbox.
8. To edit the footer copyright content, click the Footer copyright module:
   • Click Edit in expanded view.
   • In global content editor, enter the text for the footer copyright.
   • Click Close expanded view in the left sidebar.
9. When finished, click Publish to [#] assets in the top right.