Child theme changes dont have an effect on the parent theme as well as main site

[Anonymous1234]

Hello dear readers of HubSpot,

The changes to the child theme don't have an effect on the main theme that is used on the live site.

I did copy copy the template used as well as all the css. The folder structure is as follows:

Issue: Changing the template home.html as well as publishing the changes doesn't have an effect on the main site.

Question: How one can change the look of the main site that uses the home.html template from the child theme, home.html ?

[Anton]

Hi @Anonymous1234, 

jsut a few questions to verify:

• Have you changed the template in the site-settings to the child-theme one? (You have to change the theme before changing the template)
• Have you tried to stage the page via content-staging, change the template and publish it from staging to live? (staging is available only in CMS Hub Pro and Enterprise)
• If you'd like to add drag&drop modules/sections to a single page, you don't have to do it in the template. Just drag&drop it directly in the page

If you want to modify the look&feel of a default HubSpot/HubSpot Marketplace theme - they have all kind of options(depends on the theme) located here:
HubSpot settings(gear icon in top right corner) -> Website -> Themes -> YOUR THEME

If you create a child-theme(which is always recommended) and want to apply custom styling, you have to clone the CSS file to the theme as well. 

Also: Since your portal sounds like a german name and you'd like to have support in german - drop me a DM

best, 

Anton

[Anonymous1234]

Hello @Anton ,

I did change the site-setting to the child-theme => template.

• When changing the template i.e. home.html none of the changes were visible when choosing the template via the cloned theme.
• After i added some style to the child.css file the styling was instantly visible.

Nvm it does work, I tried on sites which were the default sites. They always look structure wise the same, even if you choose a different template.

Question 1: Does adding style classes to the child.css have any drawbacks ? 

• Main Issue is that the parent theme media-queries are a bit junky, so i wanted to change them. So one does need to clone the theme, then in the cloned theme add the changed media-queries to some css file. 

Question 2: Can the changed media-queries be added to the child.css ?

Question 3: In order to change the structure of an template via the child theme concept, only the template that is to be changed, needs to be cloned ? I did clone home.html and deleted some items => Preview shows the changed template.

When choosing the template for the site, child theme => child template choosen doesn't have any of the changes (only the ones done via the child.css file)   

[Anton · Accepted solution]

Hi @Anonymous1234, 

adding stylings to child.css can have the drawback that you may have to use !important. Also you shouldn't copy/paste the whole theme-overrides.css or other "big" files directly to the child.css. 

Pro tipp: You can load several smaller files into the child.css. Kinda like the main.css of the parent theme. 

If you'd like to rework the media queries you can - but look out for double styling information which may interfere with the parent theme styling.

The default loading order is located in your base.html/layout.html of the child-theme. If not changed it will load all CSS files in following order:

main.css(parent) ➡️ page specific CSS files(if there are any in a template) ➡️ theme-override.css ➡️ child.css ➡️ styles that are added through "Head HTML" areas(i.e blog or page specific)

best, 

Anton

[Anonymous1234]

Hello @Anton,

"Have you changed the template in the site-settings to the child-theme one? (You have to change the theme before changing the template)" I didn't.

So the next course of action would be to change the template in the site-settings...What if the parent theme gets an update, would it automatically also update the child ?  

Best Regards,

Roman