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

Verify that you have one of the following user permissions:

• Super Admin permissions.
• Knowledge base settings permissions, Global content and theme settings permissions, and a Service Hub seat. Learn more about HubSpot's seats-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 cannot 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. 

• To view a knowledge base template with sample content:

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

• To view a knowledge base template in different languages with sample content:

• 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 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. Click the second dropdown menu in the top left and select a language.

• To view a knowledge base template in different screen sizes with sample content:

1. 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 the device icons at the top of the editor, or enter a screen width in pixels. 

Edit a knowledge base theme's styles

You can customize your theme's styles, including colors, typography, layout, header, and footer.

Edit a knowledge base theme's colors

• To edit the colors used in the knowledge base theme:
  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 theme editor, click the Colors dropdown menu on the left sidebar.
  4. Enter a hex value or select a color from the color picker for Primary, Secondary, Accent, and Body background. Your brand colors will display for each options.
• When you've finished editing the knowledge base theme colors, click Publish theme in the top right.

Edit a knowledge base theme's typography

• To edit the typography in the knowledge base theme:
  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 theme editor, click the Typography dropdown menu on the left sidebar.
  4. In the Primary and Secondary sections in the left sidebar, select the font, font color, and font style (e.g., Light, Bold, Regular). Your brand fonts and brand colors will display for each option. 
  5. In the Heading (H1-H6) sections in the left sidebar, select the font, font size, font color, font style (e.g., Light, Bold, Regular), and transform case (e.g., Capitalize, Uppercase, Lowercase).
  6. In the Body and Links sections on the left sidebar, select the base font, font size, font color, and font style (e.g., Light, Bold, Regular). 
• When you've finished editing the knowledge base theme typography, click Publish theme in the top right.

Edit a knowledge base theme's layout

• To customize the layout style for the knowledge base theme:
  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 theme editor, click the Layout section on the left sidebar.
  4. Click the Layout option. Different layout options will support different styling options.
• When you've finished editing the knowledge base theme layout, 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 header width, top bar, language switcher, menu, button, and search bar styles. You can also edit colors, fonts, and hover styles within those elements.

• To edit the header width in the knowledge base theme:
  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 width field, select Full width or Content width.
• To edit the header top bar style in the knowledge base theme:
  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.

1. 4. In the Header section, click Top bar.
   5. In the Top bar section, select the background color in the color picker or enter a hex code value in the Background color field. To edit the font, click the font, font color, and font style for the Base font and Hover font fields.

• To edit the header language switcher style in the knowledge base theme:
  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.

1. 4. In the Header section, click Language Switcher.

• 5. In the Language Switcher section, click Drop downs.
  6. In the Drop downs section, click Background.
  7. In the Background section, select the color in the color picker or enter a hex code value for the Color and Hover fields.
• To edit the header menu style in the knowledge base theme:
  
  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.

1. 4. In the Header section, click Menu.
   5. In the Menu section, click Drop downs and then click Background or Text. 
      • In the Background section, select the color in the color picker or enter a hex code value for the Color and Hover fields.
      • In the Text section, select the font, font color, and font style.
   6. In the Menu section, click Text or Background:
      • In the Text section, select the font, font color, and font style for the Base font and Hover font fields.
      • In the Background section, select the color in the color picker or enter a hex code value for the Color field.

• To edit the header Button style in the knowledge base theme:
  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. In the Button section, click Text, Background, Border, Corner or Hover.
     • In the Text section, select the font, font size, font color, font style (e.g., Light, Bold, Regular), and transform case (e.g., Capitalize, Uppercase, Lowercase).
     • In the Background section, select the color in the color picker or enter a hex code value for the Color field.
     • In the Border section, select a border style in the Style field.
     • To edit the hover style, click Hover and then click Text, Background or Border.
       • In the Text section, select the font, font size, font color, font style (e.g., Light, Bold, Regular), and transform case (e.g., Capitalize, Uppercase, Lowercase).
       • In the Background section, select the color in the color picker or enter a hex code value for the Color field.
       • In the Border section, select a border style in the Style field.
• To edit the header search bar style in the knowledge base theme:
  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. In the Search bar section, click Background, Label text or Input.
     • In the Background section, select the background type and select a color in the color picker or enter a hex code value. 
     • In the Label text section, select the font, font size, font color, font style (e.g., Light, Bold, Regular).
     • In the Input section, select a color in the color picker or enter a hex code value for the Text color, Button color, and Icon color fields.
• When you've finished editing the knowledge base theme header styles, 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.

• To edit the footer width in the knowledge base theme:
  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 Full width or Content Width.
• To edit the footer background in the knowledge base theme:
  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, select a color in the color picker or enter a hex code value in the Background field..
• To edit the footer menu style in the knowledge base theme:
  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 Menu.
  5. Select the font, font color, and font style (e.g., Light, Bold, Regular) in the Base font, and Hover font fields.
     
• To edit the footer text style in the knowledge base theme:
  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 Text.
  5. Select the font, font size, font color, and font style (e.g., Light, Bold, Regular) in the Font field.
• To edit the footer social icon style in the knowledge base theme:
  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 Social icons. 
     • To change the social icons size, click the Icon size dropdown menu and select Small, Regular, or Large.
     • To change the social icons shape, click the Icon shape dropdown menu and select Circle or Square.
     • To change the social icons color, select the color in the color picker or enter a hex code value in the Icon color field.
     • To change the social icons background color, select the color in the color picker or enter a hex code value in the Background field.
     • To change the social icons alignment, click blockAlignmentLeftIcon Left align, blockAlignmentCenterIcon Center align, or blockAlignmentRightIcon Right align icons in the Alignment field.
• When you've finished editing the knowledge base theme footer styles, click Publish theme in the top right. 

Edit a knowledge base's header content

You can edit the content of your knowledge base header, including the logo, menu, button, language switcher, and additional support options. Changes will be visible across all knowledge base pages.

• To edit a knowledge base's header logo 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. In the Website header module, click Logo.
  6. 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.
  7. If you selected to override the default logo, you can click Upload or Browse images to add a new logo.
  8. Click Apply options at the bottom left of the sidebar editor to see your changes.
• To edit a knowledge base's header menu 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. In the Website header module, click Menu.
  6. To display a header menu, click the Menu dropdown menu and select a menu.
  7. To edit an existing header menu, click Edit in the Menu field.
  8. To create a new header menu, click Create new in the Menu field.
  9. 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. 
  10. Click Apply options at the bottom left of the sidebar editor to see your changes.
      
• To edit a knowledge base's header button 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. In the Website header module, click Button.
  6. To add a button to your header, select the Add button checkbox.
  7. To edit the button text in the header, enter the text in the Button text field. 
  8. To edit the URL link, the button directs visitors to, click the Link to dropdown menu and select the link option.
  9. To have the URL link open in a new window, toggle the Open link in new window switch on. 
  10. To edit the link type, select the checkbox next to No follow or Add icon fields.
  11. Click Apply options at the bottom left of the sidebar editor to see your changes.
• To edit a knowledge base header for the language switcher 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. In the Website header module, click Language Switcher.
  6. To add the language switcher to the header, select the checkbox next to the Add language switcher field.
  7. To edit the display mode of the language switcher, click the Display mode dropdown menu and select Localized, PageLang, or Hybrid.
  8. Click Apply options at the bottom left of the sidebar editor to see your changes.
• To edit a knowledge base header for the additional support options 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. In the Website header module, click Additional support options.
  6. To show a customer portal link, toggle the Show customer portal link switch on.
  7. In the Customer portal link text field, enter the text that you want displayed.
  8. To show a sign-in for restricted content, toggle the Show sign-in for restricted content switch on.
  9. In the Sign-in link text and Sign-out link text fields, enter the text that you want displayed.
  10. Click Apply options at the bottom left of the sidebar editor to see your changes.

• When you've finished editing the knowledge base header content, click Publish to [#] assets in the top right.

Edit a knowledge base's footer content

You can edit the content of your knowledge base footer, including the menu, logo, footer address, social follow, and footer copyright options. Changes will be visible across all knowledge base pages.

• To edit a knowledge base's footer menu 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. In the left sidebar, click the Footer menu module.
  5. To display a footer menu, click the Menu dropdown menu and select a menu.
  6. To edit an existing footer menu, click Edit in the Menu field.
  7. To create a new footer menu, click Create new in the Menu field.
  8. 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 Max levels field. 
     
  9. To show a footer menu, select the checkbox in the Show menu field.
  10. Click Apply options at the bottom left of the sidebar editor to see your changes.
• To edit a knowledge base's footer logo 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. In the left sidebar, click the Logo module.
  5. To override the default footer logo, toggle the Override default logo switch on or click Edit default logo in this domain to update the default logo.
  6. If you selected to override the default footer logo, you can click Upload or Browse images to add a new logo.
  7. To customize how the footer logo loads, click the Image loading dropdown menu and select Browser default, Lazy, or Eager.
  8. To add a link URL to the footer logo, enter the URL text in the Link URL field.
  9. Click Apply options at the bottom left of the sidebar editor to see your changes.
• To edit a knowledge base's footer address 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. In the left sidebar, click the Footer address module and then click Edit in expanded view.
  5. In global content editor, enter the text for the footer address.
• To edit a knowledge base's footer social follow 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. In the left sidebar, click the Social follow module.
  5. 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. 
  6. To show social follow icons, select the checkbox next to the Show icons field.
• To edit a knowledge base's footer copyright 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. In the left sidebar, click the Footer copyright module and then click Edit in expanded view.
  5. In global content editor, enter the text for the footer copyright.
• When you've finished editing the knowledge base footer content, click Publish to [#] assets in the top right.