How to Make CSS Style Customizations to HubSpot CMS Pages

Are you creating a HubSpot landing page or website page but want to make a small design style adjustment? Sometimes you just have to dig in and get your hands dirty writing some code. But don’t worry it isn’t as bad as it looks. And if this is your first time, afterward you will think you have superpowers. Ok, let’s get started changing the page design.

1. Open page in Google Chrome

My example uses Google Chrome. If you use Safari you can also use their developer tools.

2. Open the developer tools panel

• Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
• Or right-click on the page and then choose Inspect

3. Inspect the element on the page you would like to customize

If you are new to using the Chrome Developer Tools, watch the video below showing how to inspect and modify CSS styles on the page. You can also add a new CSS style to see how it impacts the page.

4. Copy your CSS style declaration and add it to your HubSpot Landing Page template

1. Login to your HubSpot account
2. Edit the website page or landing page you want to modify. You can also click the HubSpot sprocket button in the top right corner if you’re already logged in.
3. Once the page is loaded, click on the settings tab
   
4. Scroll down and click the Advanced Options button
   
5. Add your new CSS style in the HEAD HTML textarea. But we also need to wrap the code with a style tag. Below is an example.

   <style>
   .row-number-2.dnd-section .dnd_area-column-5-background-color {
       border-radius:30px;
   }
   </style>

   

6. Click the Update button in the top right corner
7. Preview the live URL to see if your CSS customization worked as expected

Common Questions

Where can I find a list of standard CSS selectors for HubSpot templates?

You can find a comprehensive list of standard CSS selectors for HubSpot templates by referring to the resource called Boilerplate CSS.

How can I check for HubL errors in my CSS code?

To check for HubL errors in your CSS code, you can follow these steps:

1. Look for error indicators in the error console: The error console is usually located at the bottom of the code editor. It displays any errors or warnings that may be present in your code. HubL errors will appear in red, and general warnings will appear in yellow.
2. Check the error gutter: The error gutter is located on the left-hand side of the code editor. It displays error indicators for each line of code that contains errors or warnings. Hovering over the red error indicators will show you the specific error or warning on that line.
3. Utilize the scrollbar annotations: The scroll bar on the right-hand side of the code editor may also contain annotations. These annotations point out specific areas of the code that have errors or warnings. Clicking on a scrollbar annotation will navigate you directly to that part of the code where the error or warning is located.
4. Expand the error console for more details: At the bottom of the code editor, there is an option to “Show details”. Clicking on this will provide you with more information about the errors or warnings in the error console. Conversely, you can also collapse the error console by clicking on “Hide details”.
5. Follow the links in the error console: The error console often includes links that direct you to the exact spots where HubL errors or warnings are present in your code or custom module. Clicking on these links will take you directly to the location in your code where the error or warning occurs.

By following these steps, you can effectively identify and address any HubL errors in your CSS code.

Conclusion

The screenshots show a before and after of a customization I made to my Industrial Webinar Landing Page Template. The drag and drop column has a background color with square corners. I wanted to make it have rounded corners so I inspected the element and wrote a custom CSS class declaration to add a border-radius.

Important to keep in mind, this CSS customization is not saved to the template. So if this customization is something you want to use on all future pages, it is best to share your customization to your developer. They can then hard code it into the template so you don’t have to remember copy and pasting this code snippet each time.

Contact me, if need help or get stuck following these steps.

BEFORE

AFTER