How To Create a Child Theme

When you download a theme from the HubSpot Asset Marketplace, you are unable to make any modifications to original files from the theme. In order to make your own customizations to CSS files, modules, templates, etc, you must create a child theme. Here's how to do it.

First, if you want to learn all about HubSpot child themes, we recommend reviewing this HubSpot documentation about them:
https://developers.hubspot.com/docs/cms/building-blocks/themes/child-themes 

Now, let's get down to business!

1. Go to the Design Manager. You'll see this on the left side panel. 
   
   
   
2. Right-click on the theme name. In the screenshot, the name is "Apex". You'll get a popup menu. Click on "Create child theme".
   
   
   
3. Give your new child theme a name. This can be anything you want, just like when you give birth to a real child. :) You'll also see that you have the OPTION to click on "Advanced options", which will allow you to name the child theme CSS and JS files. They will default to "child.css" and "child.js". Click the "Create child theme" button.
   
   
   
4. Click "Close" on the confirmation of your successful child theme creation.
   
   
5. You will now see an updated left side panel with your new child theme files.
   
   
   

Your new child theme is now ready!

Now... if you add items to your child.css or child.js files, they will NOT affect any pages using templates from the original theme. They will only affect pages setup and associated with the new CHILD theme. So to do this:

1. Create a new page or go to the settings tab of an existing page and choose to change the template.
   
   
2. Select your child theme. Whichever theme you used last, you will see the templates from that theme. You'll likely need to click "Change theme", which will give you a display of all of your themes. Click on your child theme. (NOTE: making this change to see options from another theme will NOT affect any existing pages.)
   
   
3. Click "Select template" on the desired template from the list of options. This will show all of the templates from the parent theme. Setting up a page with one of these themes, but from under the umbrella of your child theme, will be exactly the same as the original theme EXCEPT FOR it will take on any of your customizations that you add to the child.css or child.js files.
   
   
4. Go to the Design Manager and click on your "Apex Child Theme" folder (or whatever you named it). 
   
   
5. Click on "child.css" to open and edit this CSS file. For the sake of example, let's say you want to add curved corners and a red border to all images added to a page using the core image module. You could add this to the child.css file:
   
   

   .widget-type-linked_image img {
     border-radius: 20px;
     border: 2px solid red;
   }

   Click "Publish changes" in the top right corner of the file editor.
   
   
6. Now open the web page that uses any template from the child theme. You should see your CSS changes being implemented to anything on the page that applies to your customization!

If you want to modify any existing CSS or template files in the original theme, you can go to the original theme files in design manager, and right-click on the file to get an option to "Clone to child theme". Then you can make changes to the file(s), which would be incorporated to pages within the child theme.

NOTE: When you receive an update from HubSpot Marketplace that tells you an update for the parent theme is available, no worries! Go ahead and download the update! It will not affect your child theme elements as it only updates the original core theme.