Creating a child theme

If you have multiple domains on a HubSpot portal, you can use child themes to have separate 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, find the sr folder and then right click and choose Create Child Theme
  • Enter a name for your theme Something Sprocket Rocket: YOUR_COMPANY so users know what it is and click Create child theme
  • The theme.json file for the new theme will open. Edit the theme.json file and add this new line

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

Document image

 

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
Document image



Updated 01 Jun 2022
Did this page help you?
Yes
No