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