Understanding a theme's required files

Last updated: May 30, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A
Themes require various CSS and JavaScript files to render and function properly. This article describes these various required assets that makes HubSpot default themes work. 
HubSpot default themes are only available in new HubSpot accounts. If you would like to have a standard HubSpot theme installed in your existing account, follow these instructions to ensure that your account is compatible with these themes.

Theme custom classes

In order to achieve aspects of the HubSpot theme's design, custom classes must be applied to certain groups and modules. When modifying theme templates, it is best to add modules within existing groups to ensure the custom classes stay intact. For a list of some of the commonly custom classes, click here.

Required theme stylesheets

By default, HubSpot themes will have a master stylesheet named for that theme attached to each template. The CSS file will be named after the theme, for example the Stratus theme's CSS file is named stratus-style.css. This stylesheet is responsible for the theme's aesthetic and is the primary file that should be edited if design changes need to be made. 

Each CSS file attached is at the template level (Edit > Edit Head), and will have any global CSS files disabled. This configuration helps ensure that the theme is styled correctly. 

Edit head tag
Please note: CSS files that are hardcoded as link tags in your Site Header HTML in Content Settings will apply to your theme templates. This can create display issues if those files conflict with the themes CSS. For more information about ensuring there are no conflicting scripts of link tags in Content Settings, follow these instructions.

Included CSS file

Within the [nameofhubtheme]-style.css (e.g. velocity-style.css, clarity-style.css, etc.) file editor, you will also see a reference to the [nameofhubtheme]-modules.css file. This is a required file that contains base styles for COS modules and is included into the style.css file. You should not need to edit this file.

If for any reason you do edit this file, you will need to also republish the master [nameofhubtheme]-style.css to include the updated file in the final unified CSS file. 

Included CSS files

Included fonts

HubSpot default themes use an @import tag at the top of the CSS file to include load various Google Fonts. To learn more about including custom Google Fonts in a HubSpot CSS file, check out this article.

@import tag for fonts

Color variables

Theme CSS files use the concept of accent color variables in the stylesheet to help you create on-brand content fast. First, find the hex value of your brand's color(s). Once you have the color value, edit [nameofhubtheme]-style.css (e.g. stratus-style.css, clarity-style.css, etc.) in Design Manager. Colors are defined in HubL variables towards the top of the CSS file (depicted below). Change the HEX value(s) in quotes (e.g.  "#67b5ae"). Republish the CSS file to alter the colors used throughout your theme.

Color variables
Please take note that making syntax mistakes in these HubL variables can cause your CSS file to fail to compile. When making edits to these color variables, make sure you are only changing the value in quotes.

Required Javascript file

HubSpot default themes also rely on a key Javascript file: [nameofhubtheme]-main.js (ie stratus-main.js, velocity-main.js). This Javascript file is responsible for creating/activating the mobile menu, for setting the theme banner background images.

The file is included in an HTML module in the global footer. This global footer is included on every theme template and should not be removed.

Javascript footer module
Removing [nameofhubtheme]-main.js will break various features of the theme. Do not remove the global footer or the footer's Javascript HTML module from theme templates. To learn more, check out this article.

Was this article helpful?

Previous article:

Next article: