topic Child theme changes dont have an effect on the parent theme as well as main site in CMS Development

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

Anonymous1234 — Thu, 29 Feb 2024 19:37:59 GMT

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 ?

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

Anton — Thu, 29 Feb 2024 20:53:43 GMT

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

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

Anonymous1234 — Thu, 29 Feb 2024 21:23:18 GMT

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

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

Anonymous1234 — Fri, 01 Mar 2024 16:37:27 GMT

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)~~

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

Anton — Fri, 01 Mar 2024 18:25:37 GMT

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