Theme

Custom CSS

Add site-wide CSS without changing managed theme files.

Put site-wide overrides in css/custom-styles.css. Do not edit a managed base stylesheet, such as css/base.css or css/base-overrides.css, because a later update can replace it.

The app adds css/custom-styles.css when it's missing and never overwrites it, so updates from Files leave your rules alone. The theme loads it in its own CSS layer, so a rule there wins over the theme's base styles. It does not automatically win over a module's own stylesheet, so check the result on a page that uses the module.

Edit the file in HubSpot's design tools:

  1. Open the installation's theme folder in HubSpot and find css/custom-styles.css. If the file isn't there, create it in the css folder with exactly that name. The theme's css/base.css loads it by that name.
  2. Add your rules. If the file has a "Start your custom style here" comment, add them below it.
  3. Publish the file, then check a page that uses the affected element.