For those utilizing HubSpot’s content management system (CMS), the ability to create new CSS stylesheets grants users immense flexibility in customizing the look and feel of their website. Whether it’s making minor tweaks to existing styles or implementing a complete overhaul of the site’s design, having control over CSS stylesheets is essential for achieving the desired aesthetic.
In this guide, we will delve into the process of creating new CSS stylesheets for HubSpot. We will cover the necessary steps involved in generating a stylesheet, as well as provide insights into how to manage and utilize these files within the HubSpot CMS effectively.
Step 1. Open Design Tools
In the top navigation under Marketing > Website > Design Tools
Step 2. Create a New File
In the left sidebar look for a folder or create a new folder of where you would like your new CSS stylesheet to be saved. Next, click on the file link and select New File.
Step 3. Select CSS + HubL
Choose the CSS + HubL file option from the list of choices.
Step 4. Edit the CSS Stylesheet
The stylesheet contains some help text to guide you on how to import other stylesheets. To learn more about HubL you can do so in the HubSpot developer documentation.
Final Step. Add the CSS Stylesheet to your Page, Module, or Theme
Once you have your stylesheet created there are various places you can add your stylesheet. For documentation on the various ways to add it read this documentation article.
Summary
Following these steps will make customizing your HubSpot page a lot easier and also more efficient. Contact me if you have questions or need help setting things up.
