Styling Fusion to Your Brand
Jun 16, 2022
One of the beauties of a HubSpot CMS theme is the fact that you can style it so easily at a global level without having to look at or touch a CSS file! The Fusion theme certainly takes full advantage of this. The styling, by default, matches what you see on the Fusion demo site, but you can change fonts, colors, form styling, spacing, alignment, header/footer attributes, link styles, and more! Utilization of your HubSpot brand kit First, be aware that your HubSpot portal has a brand kit. You may have already set this up. This screenshot shows the brand kit location in your HubSpot portal settings: Click the settings icon in the top nav bar of your portal. Click "Account Defaults" on the left menu. Click the "Branding" tab. Click on "My Brand Kit" to edit. You can set your default portal logo, favicon and colors. When selecting colors within modules, your "favorite colors" that are highlighted will come from here. The brand kit will have a primary color, which will be used by Fusion as the Primary Color. If you have any additional colors added to the brand kit, the 2nd one will be pulled into Fusion as the Secondary Color and the 3rd will be pulled in as the Tertiary Color. However, you can still edit these colors inside of the theme settings if you do not want to use the brand kit colors. Style the Fusion Theme From any web page that you are editing, you can access the theme styling. These are global settings, so any changes that you make will be applied to every page built within the Fusion theme. While in the edit view of a web page, on the left side (where you see available modules), you'll see a tab labeled "Theme". Click that and you'll see this screenshot. Click the button labeled "Edit theme settings". This will load the theme settings display as seen in the featured image at the top of this post. You will see a panel on the left with Global Colors, Global Fonts, Typography, Forms, Spacing and more. Click on a heading to expand all of the options available. After making any changes, click "Apply Changes" at the bottom of the left panel to save them. But for changes to be applied to the website pages, you need to click the Publish button in the top right corner of the window. As this will apply to multiple pages, you will get a warning about how many assets will be affected. After making any changes in these settings, you'll see a reset icon as seen in this screenshot. This signifies that changes have been made from the original default settings. If you click the icon, it will reset those items back to the default. At the very top of the settings list next to "Edit theme settings" is a text link "Reset". Click this to reset ALL of the theme settings back to default. Now, while most of the settings here are very self-explanatory, there's a few that we'll bring some attention to. Fusion Unique Theme Style Options Link Text Icon This theme includes a custom module called "Customizable Rich Text". In the style options of that module, you can enable an icon to be added after any text link in that instance of the module. In this theme setting, you can select which icon is used. There are multiple Font Awesome icon choices, all of which are some version of a right arrow. Select the desired icon here to have a consistent icon throughout your site. Buttons There are three style groups in this theme. Within any custom module that has a button option, there is a setting to choose which button style to use in that instance. All of the styling for the buttons takes place right here.
