We want you to have the power to create a community that is a true extension of your brand. To do this, we've created a theme you can customize with your colors, fonts, logo, and styling to make sure your community fits just right.
Before we jump in, here we are going to explore how to set universal defaults for style and branding for your community. This is housed in your community theme settings.
If you already use the HubSpot CMS for your website, you likely are familiar with this process.
Make sure you are logged into HubSpot then open any page in your community. You can do this 2 ways:
Once you are in the page editor, open the tab called Theme on the left column. Then click Edit theme settings.
Here you will set universal settings for your community. Editing anything here will automatically take effect across all pages of your community.
A few notes before we dive in:
This section outlines 5 colors that will be used across your community. These can be the same colors you've defined in your brand kit as Favorites or custom colors you want to use across your website.
Global Colors will appear on some modules in a drop down so you don't have to manually input color hex codes or sort through your favorites.
These dropdowns will also have white and black as options so you do not have to save those colors in this hierarchy.
Some modules will also include a "Custom" option in this dropdown that, when selected, will open the color picker so you can deviate from your Global colors.
This section gives you the option to select a primary and secondary font for your community. For our demo community, we opted to use the same font but this preference is completely up to you. Keep scrolling to see where and how you can customize how these are used in your community.
This section gives you more detailed options for defining how text is formatted across your community. These options help create consistency.
Note: these can be edited on page in rich text modules so keep that in mind if you give other HubSpot users access to edit your community pages.
Here you will have an editing pane for all headers, body copy, and links individually.
Something that may be new to you in the text editing panel is the Transform option. Transform gives you the ability to override the capitalization of words and letters in different text areas, regardless of how it ways typed in the field.
Here are the options:
With this editing panel you can set universal settings like:
Similar to Global colors above, this section outlines options for primary styling that will be used across your community, but specifically for buttons.
Please note: these are not CTAs. If you are looking to track button clicks using the CTA tool, you will need to drag and drop the default CTA module into the page and select a CTA from your module library.
Here you can set the default fonts, borders, backgrounds, spacing, corner rounding, and hover features. We recommend using Primary, Secondary, and Tertiary to help create a visual hierarchy for your buttons.
Let's break down what these different options mean in form settings:
Using the form module on-page, you will have additional options to customize the way your form looks. This is because depending on where and how you use your forms, you may want to change the styling.
In the Website header and Website footer editing panels, you have the ability to set the background color for each and the logo width for each.
To fully edit your header and footer, you will need to edit those modules in your Global content editor.
However, there are some required fields to power cohortium in the header such as the eyebrow menu for Login/Signup and the main navigation for Topics, Members, and New Topic CTA.
Please consult a HubSpot developer to make major changes to the header to preserve the community navigation functionality.
If you want your community footer to match your current website footer, we recommend creating a version in the global content so it will automatically apply to all community pages.