Blog

A Basic Guide to Designing on HubSpot's Classic CMS

Posted by Ken Pearce

A fundamental part of this process is understanding the relationship between HTML and CSS. If you’re not familiar with css or just want to brush up your skills, I recommend the following sites:

  1. http://htmldog.com
  2. http://css-tricks.com
  3. http://www.alistapart.com

There are two basic areas used to create a HubSpot template:

  1. Settings > Template Configuration
  2. Settings > File Manager

Template Configuration is best used as the base for your font families and color palette. File Manager is where the magic happens so to speak and thus will be where the majority of your customizations take place.

To go beyond the level of customization provided in Template Configuration, we’ll need to create a file called ‘custom.css’ in HubSpot’s File Manager. This file will get loaded into every page of the website automatically.

If there isn't an existing custom.css file you can create one by clicking on Site Home > New File in File Manager.

Create File

HubSpot’s basic CMS does not allow access to any underlying html markup and there is no way to FTP templates into the system. All themeing is driven through CSS. HubSpot supports three types of navigation, which are inherently referred to as ‘Templates.’ Each template provides several different page layout options:

  • One column
  • Two column
  • Two column right
  • Three column

The templates and navigation styles are:

  • Foxboro – horizontal nav bar with drop downs for child pages
  • Brighton – horizontal nav bar with side menus for child pages
  • Duxbury – vertical side menu only

HubSpot’s Foxboro template is the most flexible of the templates and also comes with two additional page layouts:

  • Three equal width columns
  • Two equal width columns

It also has a Bottom Pane container, which allows for modules to be placed just below the main content area and above the site footer.

Foxboro

Viewing the source on any CMS page and looking for skin.css is the best way to see what CSS selectors are available for styling. All three templates use a similar naming convention of template_tag. For example, to style the menu background color on Foxboro, Brighton, and Duxbury respectively you could use:

  • div#foxboro_menu {background:#333;}
  • div#brighton_menu {background:#333;}
  • div#duxbury_menu {background:#333;}

Due to the order that the stylesheets are loaded, you may need to use !important when trying to style different tags. Prefacing each ID or Class with its appropriate selector will greatly reduce the need for !important.

For example, #foxboro_menu .rootGroup li a span {font-size:14px;} would be better written as div#foxboro_menu ul.rootGroup li a span {font-size:14px;}

Building sites on HubSpot's CMS is a skill that takes time to develop, but will get easier with practice. If you're looking for additional resources, some great information can be found here: help.hubspot.com.

Email Subscribe

Recent Posts