Edit your theme settings

A theme is a set of styles and templates you can apply to your website pages and blogs in HubSpot. To make sure that your website looks consistent, style settings for all pages using the same theme are managed in your theme settings.

Before you get started

Theme settings control the main colors, fonts, and button styles for pages using your theme templates.

Please note: the styling options available in your theme setting depend on the theme field options included by the web developer who created your theme.

Some of the content for your website is managed in other parts of your account settings, including:

• Your company logo: update your company logo in your Account Defaults in the Branding tab.
• Your navigation menu: menu colors are set in theme settings, but your navigation menu content and links are managed in your Navigation settings. Learn how to create a navigation menu you can add to the global header or global footer content within the page editor.
• Your domain for publishing: the number of subdomains, brand domains, and top-level domains you can connect depends on your subscription. Learn more about about subscription limits for domains and connecting a domain to HubSpot. 

Edit theme settings

You can edit a theme's settings from the content editor for any page or post using that theme: 

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
  • Blog: In your HubSpot account, navigate to Content > Blog.
• Click the name of your content. 
• In the content editor, click the Edit menu and select Theme. 

Colors

Your theme's color settings apply a primary, secondary, and background color to all elements included in your theme templates. These styles will be applied to all elements on your website. To customize more specific settings for headings, fonts, and links, click Edit next to More settings.

Fonts

Choose a primary and secondary font to apply to your website's headings, forms, buttons, and body text. All Google fonts are supported. Click the color bubble to customize your primary or secondary font colors. You can choose a simple color value or click the Advanced tab and choose a specific hexadecimal value with a color picker. 

Spacing 

Your theme settings for spacing control the maximum width of your page content, and the vertical spacing in between different elements on your page.

More settings

Within your theme settings, you may have additional detailed settings to more specific styles on your page. The style options in your theme are based on the theme fields included in your theme's coded template. If you aren't able to locate the setting you're looking for, reach out to your template designer to see what options were included in your template.

The example below is a general guide to what types of additional may be included within your theme. For a complete reference of theme fields that may be included on your templates, see the designers documentation.

Please note: remember that you can customize fonts, colors, and styles within a rich text module on your page, or by overriding default styles of your theme within the page editor. Only modify these styles if you want them to be applied to all pages using this theme.

Typography

In your typography settings, you can control the fonts applies to certain elements in your templates. All Google fonts are supported. You can also select custom colors for certain headings, fonts, or links in your theme.

• Headings: you can customize the exact font, color, size, and style for any headings included on your theme.
• Body: customize the font, color, or text size of the body of your page only. 
• Links: customize the default color of links on your website. You can also customize the color and behavior of links when a visitor hovers over or clicks your link.

Buttons

You can set custom colors, fonts, and styles for buttons on your pages and blog. Within the page editor for a specific page, you may be able to swap button sizes or types, depending on how your theme was created by your website developer.

• Size: specify the dimensions of small, regular, and large buttons on your page. 
• Primary: a primary button is for the most important action a visitor takes on your page. This color should stand out and catch your visitor's attention.
• Secondary: a secondary button is used for relatively less important actions when there's already one primary button on your page. Secondary buttons are typically applied to pages for lower priority actions. 
• Simple: these are the default fonts and styles applied to simple button modules in your page.

Forms

Customize the default colors, fonts, and text styles, and buttons styles for your forms.

• Title: these are styles applied to the text field that appears above your entire form. This typically includes a greeting and instructions for completing the form. These styles on your form can only be managed here in your theme's settings.
• Labels: styles applied to the labels that appear above a form field.
• Fields: styles applied to the names of the form fields themselves.
• Help text: this is the sample content that appears inside each form field, indicating what type of information your visitor should submit.
• Submit: choose which button style and size should be applied to your forms.
• Background color: the background color applied to your form.
• Border: the border color around the form fields.
• Padding: the amount of spacing around the form on your page.

Tables

Set the default colors, fonts, spacing, and borders for tables added to your page.

• Table head: the colors applied to fonts in your table header, and the default background color across the full width of the first row of your table. You can also set a bottom border for an accent color along the bottom of edge of your table header.
• Font color: default color for fonts in your table.
• Background color: default background color for the background of your table's cells.
• Border: the default border color, width, and style of your table.
• Padding: the amount of space above and below your table on your page. 

Learn more about how to insert a table into a rich text module on your page.

Website header

These settings control the colors and fonts that appear in your page header, including your navigation menu. Learn how to set up your navigation menu in your account settings. To set your company logo on your theme templates, add your logo image to your account defaults in the Branding section.

• Menu: select the color and style of the font for your navigation menu when visitors view, hover over, or click a menu item. These styles can only be managed here in your theme settings.
• Background color: select the color for the background of the header of your website.
• Bottom border: if desired, you can add a horizontal line as a border underneath your website header. Select a style to activate the bottom border, then select a color and width for your border.

Footer

These settings control the colors and fonts that appear in your page footer, including any navigation menus. Learn how to set up your navigation menu in your account settings. 

• Menu: select the color and style of the font for the navigation menu in your theme's footer. You can customize the colors for when visitors view, hover over, or click a menu item. These styles can only be managed here in your theme settings.
• Background color: select the color for the background of the footer of your website.
• Bottom border: if desired, you can add a horizontal line as a border underneath your website footer. Select a style to activate the bottom border, then select a color and width for your border.

Blog

These settings control the style of your listing page template and blog post template.

Banner images: upload images to use in the background of your blog template's header. You can choose one image for your blog's homepage, and one image to apply to all your blog posts. 

Tags: set the default color, fonts, and styles for your blog tags, which appear at the top of your blog posts.