Documentation
Create a Child Theme
Before you start building your site it is strongly recommended to create a child theme from the Base theme. When you first install the Base theme, the files are downloaded into the @marketplace folder which you cannot edit. In order to have the ability to ever make code level changes in the future you will need to have first created a child theme from the Base theme.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder, click the @marketplace folder. Right click the BASE folder, then select Create child theme.
- In the dialog box, enter a name for the child theme. Example "BASE Your Company".
- To finish the process, click Create child theme.
Create a Brand Kit
Before you start customizing the theme settings, make sure you have created a Brand Kit. The Base theme will use your brand kit's primary colors and favicon logos by default.
- In your HubSpot account, click the settings icon in the top navigation bar.
- In the left sidebar menu, click Account defaults.
- Click the Branding tab.
- Click Create a new brand kit.
Theme Settings
Theme settings are where you control the style and design of the entire site. While in the theme editor select to view any template or page that you have created. This will allow you to see your changes in real time as you are adjusting the settings. The theme settings are organized into these six main categories.
Global
The Global settings are the starting point of your theme’s style guide. Here, you have access to changing a few global settings that will be inherited across the entire site including modules purchased from the marketplace.
- Colors: The primary color and secondary color are taken from your brand kit by default. The primary color is typically your brands main color and is used as the default color for links and buttons.
- Fonts: The heading font applies to heading tags H1 through H6. All other text defaults to the body font. The default colors for each font are intentionally slightly different to help differentiate heading text from body text.
- Corners: The global corner radius setting applies throughout the entire site. This allows you to quickly change the overall design of the site to be rounded or square.
Typography
The typography settings control the style of all the text across the entire site. These settings are broken down into categories based on the different html tags you can create within HubSpot's rich text editor. By default these settings will inherit your global heading font and body font.
- Body: These font styles apply to the body tag. Allows you to set a background color for the site.
- Links: Sets the default style for all text links.
- Headings: Sets the default style for all heading tags. Each heading allows you to specify a custom font size for laptop and mobile screen sizes. Laptop screen size is <1200px and mobile screen size is <992px.
- Paragraph: Sets the default style for all paragraph text.
- Code: Styles text wrapped in the <code> tag. The rich text editor has a code button that allows you to apply this style to text.
- Blockquote: Styles the blockquote tag. Includes settings for background color and border so that you can style the blockquote to stand out from normal paragraph text.
- Lists: Sets the default style for all ordered and unordered lists. Allows you to choose a custom marker icon for unordered lists.
Buttons
These settings set the default style for all buttons across the entire site including form submit buttons.
- Button: Styles the default button module. In the drag and drop editor when you place a button module you will have the ability to override these styles for that individual button if needed.
Forms
The form settings allow you to control the style for all forms across the entire site including system pages.
- Form: Styles the default form module. These styles also apply to blog comments and subscribe forms.
- System form: Styles the system pages forms. This includes subscription preferences, password prompt and all membership forms.
Menus
The menus section allows you to control the style of HubSpot's default menu modules.
- Menu: Styles the default Menu module. These settings also allow you to style the dropdown and collapse menus for menu modules that have "flyouts" enabled.
- Simple menu: Styles the default Simple Menu module. This module is intended for menus that do not require complex dropdown or collapse functionality.
Layout
The layout section sets the default spacing for the drag and drop grid. It also controls the spacing of all elements elements across the entire site.
- Sections: The default padding top and bottom for drag and drop sections for both desktop and mobile screen widths.
- Columns: The default gutter width for both desktop and mobile. This is the width of the left and right padding of each drag and drop column.
- Maximum content width: This sets the default value for each drag and drop sections "Maximum content width" field. Changing this value allows you to easily adjust the overall the width of your site.
Header
The BASE theme has two global headers; one for website page templates and one for landing page templates. Both headers are full drag and drop areas allowing you to create any header layout you would like for either website pages or landing pages.
- Header: The main header.html global partial is used by all website page templates.
- Header no navigation: The header-no-navigation.html global partial is used by all landing page templates.
Footer
The BASE theme has two global footers; one for website page templates and one for landing page templates. Both footers are full drag and drop areas allowing you to create any footer layout you would like for either website pages or landing pages.
- Footer: The main footer.html global partial is used by all website page templates.
- footer no navigation: The footer-no-navigation.html global partial is used by all landing page templates.