One of the standout features of a HubSpot CMS theme is the ease with which you can style it globally, without needing to dive into a CSS file! The Redwood Industrial theme fully embraces this capability. By default, the styling aligns with what you see on the Redwood demo site, but you have the flexibility to customize fonts, colors, form styling, spacing, alignment, header/footer attributes, link styles, and much more!
Utilizing Your HubSpot Brand Kit
First and foremost, it's essential to know that your HubSpot portal includes a brand kit. If you haven't set this up yet, now is the perfect time! Here’s how to locate your brand kit in your HubSpot portal settings:
- Click the settings icon in the top navigation bar of your portal.
- Select "Account Defaults" from the left menu.
- Navigate to the "Branding" tab.
- Click on "My Brand Kit" to make edits. Here, you can set your default portal logo, favicon, and color palette.
When you select colors within modules, your "favorite colors" will be drawn from this brand kit. The brand kit will designate a primary color, which will be used by Redwood as the Primary Color. If you have additional colors in your brand kit, the second color will serve as the Secondary Color, and the third will be the Tertiary Color. However, you can still modify these colors within the theme settings if you prefer not to use the brand kit colors.
Styling the Redwood Theme
From any web page that you are editing (that utilizes a Redwood theme), you can access the theme styling. These are global settings, meaning any changes you make will apply to every page built within the Redwood theme. While in the edit view of a web page, click "Edit" in the top toolbar, then select "Theme: Redwood Industrial" (or whichever Redwood theme you have).
This action will load the theme settings display, where you will see a panel on the left featuring options for Global Colors, Global Fonts, Typography, Forms, Spacing, and more. Click on a heading to expand all available options.
After making your desired changes, click "Apply Changes" at the bottom of the left panel to save them. To ensure these changes are reflected on your website pages, you must click the Publish button in the top right corner of the window. Since this will affect multiple pages, you will receive a warning about how many assets will be impacted.
If you make any changes in these settings, a reset icon will appear, indicating that modifications have been made from the original default settings. Clicking this icon will revert those items back to their default state. At the very top of the settings list, next to "Edit theme settings," you’ll find a text link labeled "Reset." Clicking this will reset ALL theme settings back to default.
While most of the settings are quite intuitive, there are a few unique options worth highlighting.
Buttons in the Redwood Theme
There are three style groups available in this theme. Within any custom module that includes a button option, you can select which button style to use for that instance. All button styling is managed right here, allowing for a cohesive design across your site.
Make Sure You Don't Miss...
Many of the style categories you'll see on the left side have sub groups. For example, under "Website Header", you'll see groups at the bottom for "Top Utility Bar", "Last Menu Item" and "Submenu Dropdown". Groupings like this keep the collection of styling options more organized, but you might miss them if you don't realize they are there!