Use Sprocket Rocket for multiple installs on the same portal

If you have multiple domains on a HubSpot portal. You can use child themes to have seperate brand styles, while still using SR App to install and update modules.

Lock the Parent Theme


When using child themes we highly suggest you Lock the SR folder, and only you the child theme when creating pages. This helps user from making edit to the Parent Theme, which would then effect child theme

To lock a folder in the Design Manager:

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the left sidebar, find the SR folder
  • Right click and then chose Lock Folder


Create a Child Theme

You can create a child theme in the Design Manager. Your child theme will inherit the assets and files from the parent theme. You will be able to edit the child theme even if the original theme is not editable.

To create a child theme in the Design Manager:

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the left sidebar, click file and then choose New theme.
  • For the Theme Starting Point, choose Blank Theme.
  • Enter a name for your theme Something Sprocket Rocket: YOUR_COMPANY so users no what it is and click Create
  • The theme.json file for the new theme will open. Edit the theme.json file and add this new line
"extends": "sr",
  • Your new theme will have a blank fields.json file. Copy over the content of the original fields.json file from the SR folder

 

Editing a Child Theme

To make custom changes to a file, you'll need to setup the same file structure and file name as in the parent. See the image below for an example on how to override
custom-styles.css

 

Overriding modules

You may need to override modules , i.e. Global Modules in the child theme. You'll need to setup the same file structure and module name as in the parent. See the image below for an example on how to override SR Nav Dropdown 01. 

To do this:

  • Unlock the SR folder
  • Clone the modules you want to override. Right click the module and then chose Clone module. 
  • Right click the module copy and then chose Move module. Then move it to the custom-modules folder in the child theme. Then remove copy from the modules name.
  • Lock the SR folder