While the overall look and feel of your site is defined in CSS files that apply to some or all of your pages, you may sometimes want to style particular aspects of a single site or landing page. HubSpot makes this easy with the content editor's Style tab. Some useful applications of this feature include:
- Changing the background color or a form on a single landing page.
- Changing the spacing around a CTA on a particular site page.
- Adding a border to a rich-text area of a specific thank you page.
It is important to remember that this feature is designed to be used to make style alterations and tweaks, by the content creator. Stylesheets created by your designer or HubSpot's Technical Services team define the overall presentation of your site. To learn more about adding CSS files to control the presentation of your entire site, check out this article.
Follow these steps to make stylistic changes on individual pages.
1. Edit a page
Navigate to Content > Site Pages. Also note that the style tab is also available on Landing Pages.
Choose the page you would like to edit. Click the gear icon and select Edit.
2. Choose the Style Tab
3. Choose the module to style
Select the module you would like to style. In addition to modules you will have the ability to style some other page elements such as the body, the form submit button, and the form fields.
4. Apply styling
Select which style category you want to adjust, and enter the appropriate value. In the image below, the background color of the form is being set to a light blue color.
5. Save your page
Save you changes. If you are ready to publish your page click Publish. If you are editing a page that is already published, the blue button will read Update page.
You can always remove any styling for a particular module by clicking Reset to default.
Options in the Style tab
The style tab contains the following four categories:
- Text - contains presentation options for the text within a particular module.
- Spacing - controls the spacing inside and outside of a selected module.
- Background - adjusts the style of the background of the chosen module.
- Border - sets border options for the module.
The Text tab gives you the ability to control the following properties for that particular module:
- Font - controls the font-family of that module. The standard web fonts are available in the drop down. If you are adding a custom font, reference the font files and include the font-family in your CSS file.
- Font Size - controls the font-size inherited by text elements within a module. This field supports various units of measurement, such as px or em.
- Text Color - adjusts the color of the text within a module.
- Text Alignment - sets the justification or alignment of text within a module. Left is the default.
- Line Height - defines how tall each line of text is. This field supports various units of measurement, such as px or em.
- Styles - defines the font-weight and style of text within the module. Options include normal, bold, lighter, italic, small capital.
The Spacing tab gives you the ability to control the following properties for that particular module:
- Margins - defines spacing around a particular module. Check Uniform to make your input adjust the space for all sides of the module. This field supports various units of measurement, such as px or em.
- Padding - sets the spacing within a particular module between it's edge and the content. Check Uniform to make your input adjust the space for all sides of the module. This field supports various units of measurement, such as px or em.
Be aware that adding excessive horizontal spacing can break the responsiveness of your page. If you are having issues making your spacing look right on mobile, you may want to work with a designer to add media queries to your CSS file that adjust spacing at different screen sizes.
The Background tab gives you the ability to control the following properties for that particular module:
- Color - defines the background color of the module.
- Opacity - defines the transparency of the module and its contents. To adjust only the opacity of background, see the note below.
- Corner radius - controls the roundness of the corners of the module. This field supports various units of measurement, such as px or em.
The opacity property not only affects the transparency of the background, but also the transparency of contents of the module. If you are trying to only affect the background, you need to use a rgba value for the background property of the element, in your CSS file.
The Border tab gives you the ability to control the following properties for that particular module:
- Border Color - defines the color of the border.
- Border Style - selects they type of border (ie dotted, solid, dashed, etc).
- Border width - sets the thickness of the border.
- Box Shadow - sets the dropshadow or glow of the module. The first box controls horizontal offset of the shadow, the second box controls a vertical offset, the third box controls the amount of blur, and the fourth box controls the color of the shadow. This field supports various units of measurement, such as px or em.
CSS generated by the Style tab
The style tab generates CSS that is added to the footer of your source code. This code uses very specific selectors and !important tags to try to ensure that your style changes apply. If changes made with the Style tab are not taking effect, you may need to work with your site's designer to identify any CSS that is conflicting and overriding that generated by the Style tab.
Next Article: How to use the content editor