CSS with a CSS (Customer Support Specialist): A 4-Week Guide to Styling (Week 3: CSS Declarations)
Hi Community,
Last week, we talked about adding styling to the Head HTML of your page. (Check it out here.) This week, we’re going to discuss adding styles to the CSS declarations of your template modules.
Method 3: The Module CSS Declarations
Method 3 involves adding CSS Declarations to modules in your templates inside the Design Manager.
Who this method is best for: Anyone with a little CSS experience
Method 3 is a personal favorite of mine, which is adding custom inline styling to the CSS Declarations of a module. I like this method because it allows you to easily target a module on your template, instead of hunting around in the stylesheet for the right classes. It’s still best to keep the bulk of your styling to your stylesheet, but the CSS Declarations of the module works nicely in a pinch.
What I did: I set the background color of the form to “tomato,” added a black border, and added 10px of padding all around the form.
Pros of the Module CSS Declarations:
This method is a little easier to spot than the first two when troubleshooting your CSS. When inspecting the page in Chrome, notice that the styling is coming from “element.style” - when you see this, go check out the CSS Declarations of the module in the template first.
Another cool thing you can do in the CSS Declarations of a module is give it a custom CSS class. What this does is give your module a unique identifier that you can then use in your stylesheet to pinpoint that module. You can also use this custom CSS class option to target specific parts of a module.
For example, I gave my Form module the custom CSS class “.big-form” - if my goal is to make all the form field labels in that particular form purple, I can add a rule to my stylesheet that looks like this:
.big-form .hs-form field {
color: purple;
}
This targets the form fields inside the form module that I gave the class “.big-form.” This method does require some more knowledge of CSS, but it can have great results. (You can learn more about it in this article.)
Cons of the Module CSS Declarations:
Though this method is easier to spot, it still adds another layer to the places where styling can hide and make your troubleshooting difficult. It’s still best practice to keep the bulk of your styling to the stylesheet, which will be our final method for next week!
So there you have it, a quick introduction to the Module CSS Declarations! If you have any questions about anything I’ve discussed above, please post your questions in our designers forum.
Happy HubSpotting!
-Rachel
Resource Guide:
HubSpot Academy Design Manager User Guide
HubSpot Academy How to use the Styles tab
HubSpot Academy Troubleshooting CSS
HubSpot Academy How to create, edit, and attach CSS files to style your site
Team Treehouse (a great resource to take guided design courses)
MDN Intro to HTML and Intro to CSS Tutorials
The tips and tricks outlined above are suggested techniques and meant to empower users. If you are unfamiliar with design, it is always best to work with a designer to implement changes to your site. For a complete outline of HubSpot Support’s design scope, click here.
