Understanding a theme's required files

Last updated: June 14, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise
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 apsects 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 themes aesthetic, and is the primary file that should be edited, if design changes need to be made. 

Each CSS file attached 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 that while HubSpot themes are set up to only apply their corresponding stylesheet, CSS files that are hardcoded as link tags in your Site Header HTML in Content Setttings will still apply to these 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 files

Within the theme-name.css (ie velocity.css, clarity.css, etc.) file editor, there are a few other CSS files that get included and compiled into a single final CSS file. These files include:

  • required-base.css - a CSS file that contains code for HubSpot's responsive grid
  • theme-foundation-v1-0.cssThis file contains all of the css for the font icons as well as the CSS3 animations. This file includes font-awesome icon CSS as well as code from animate.css code for animations. 
  • hubtheme-modules.cssThis 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.
  • recommended.css - An additional CSS file that includes some recommended fixes and styling for HTML5 elements.

If you edit any of these files, you will need to also republish the master theme-name.css to include the updated files into to 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 get you up and creating on-brand content fast. If you don't know what this means, dont worry, it is super easy.  All you need is a company color (hex value) and in no time you will have a website that in closer to your company brand and color.

To change the color, edit theme-name.css (ie stratus.css, clarity.css, etc.) in Design Manager. Colors are defined in HubL variables towards the top of the CSS file (depicted below). Changing the HEX values in quotes (ie  "#666") and repulishing the CSS file will 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 files

HubSpot default themes also rely on two key Javascript files: theme-name-main.js (ie stratus-main.js, velocity-main.js) and theme-foundation-v1-0.js. Thes files are included in that order 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

theme-name-main.js

This Javascript file is responsible for creating/activating the mobile menu, for setting the theme banner background images, as well as code to make icon module shortcodes render as font-awesome icons. 

theme-foundation-v1-0.js

This Javascript file includes code from wow.js for scroll-triggered animations, as well as code to make icon module shortcodes render as font-awesome icons (also contained in the theme-name-main.js). 

Removing theme-name-main.js or theme-foundation-v1-0.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.

Previous article:

Next article: