COS-General

Can I add CSS classes and  IDs to specific elements or modules on my pages?

Last updated: November 30, 2015

Yes, it is possible to add custom CSS classes and IDs in HubSpot's COS templates, however, at this time, you can only add IDs to module groups.

  • In your Marketing tools, navigate to Content > Design Manager.
Content-Design Manager
Find the template you want to modify

To create a custom CSS class:

  • Locate the module where you'll apply the custom class or ID > click the gear drop down to toggle the options > select the Edit CSS option.
Edit CSS
In pop-up that opens upon clicking "Edit CSS", enter the name of your CSS class you'd like to assign to that module in the Custom CSS Class (advanced) box > click Done.
Custom CSS Class
Custom CSS Class
  • If you would like to add more than one custom class to any module, simply add the multiple classes in that Custom CSS Class (advanced) box, separated by a space.

To create a custom ID:

  • Locate the module group where you'll apply the custom ID > click the gear drop down to toggle the options > select the Edit CSS Declarations option.
Edit CSS Group
In pop-up that opens upon clicking "Edit CSS Declarations", enter the name of your CSS ID you'd like to assign to that module group in the Custom CSS ID (advanced) box > click Done.
Custom CSS ID
You can also add one or more classes to a module group by adding them in the Custom CSS Class section.

Once you've configured the custom class/ID names on your template click the Publish Changes option on the template to push the changes live.