Theme custom classesIn 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.
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.
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.
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.
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.