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

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