[Theme Designers] Create parent theme easier

[Goza]

The image is from me editing html in chrome elements

Not sure how difficult it will be to implement this but it probably really difficult how the theme system currently built? However, it would be really cool that allow us too:

• Create a Parent Theme handles all CSS/HTML from a single theme
• Child theme only handles the theme settings (color schemes) and that's it. 

Currently, if you create a main theme and then a child theme for that main theme. The child theme doesn't inherit the CSS changes from the main theme (not sure if this intended bug or not). Also, when updates do come around you'll need to update EVERY child theme you have to the latest version. With the parent system, one theme needs to update while your child theme doesn't since its using the parent theme files. Myself and probably many people who do not know javascript at all (jsColor or something similar) this is probably the easiest alternative for us to use.  

 

[Jimi Wikman]

Parent child relations usually means that the child theme only override the parent theme in the areas where a delta (difference) is in place.

So unless you change a template in the child theme it will use the parent theme and any CSS changes you make just overrides the one from the parent theme.

I don't work with child themes since I rarely find any use for it, but in my mind it should work like this:

• A Child theme will simply be a container with its own configuration
• All settings and templates should be greyed out, meaning that you inherit from the parent.
• When you want to override for example the configuration of colors, you click on configure and the configuration or template becomes editable as a new configuration or template in the database.
• You can remove the override and then the child theme use the parent settings for that configuration or template.

This way a child theme will only contain the overrides in the database and inherit everything else from the parent. Any change you make in the parent also change children, unless the child theme have an override for that change.

[TAMAN]

15 minutes ago, Jimi Wikman said:

but in my mind it should work like this:

• A Child theme will simply be a container with its own configuration

it does work like this!

create a simple theme and add your html/css templates. then enable/disable the designer mode to synchronize your theme template files. after that your custom templates will be passed to all other themes to work with.

basically this way you can have all your custom templates passed to all themes and they will be editable and its by default inherited from the parent template. so you simply edit the parent template and it will be passed on all other theme templates. 

 

 

 

 

[Rikki]

We have an outstanding bug open whereby child themes don't inherit new theme settings that are added to a parent, but aside from that, child themes should pretty much work as you describe, including custom CSS.

When we build multi-brand themes in-house, we tend to add the 'master' brand styles to custom.css, then don't edit that in the child theme at all - let it inherit so that it's always up to date. If there are any styles used that we actually want to be branded, we use CSS variables for those. Then create separate CSS files in the child themes that have any styles specific to that brand, and also set our brand-specific CSS variable values.

So something like

/* custom.css in parent theme */
.someTitle {
  font-family: ...;
  font-size: 30px;
  color: var(--branded-title, #000);
}

/* sub.css in a child theme */
:root {
  --branded-title: #ff0000;
}

 

[Goza]

1 hour ago, TAMAN said:

it does work like this!

create a simple theme and add your html/css templates. then enable/disable the designer mode to synchronize your theme template files. after that your custom templates will be passed to all other themes to work with.

I know about the designer mode going through that route but for those who wanted to get started like on CIC (which I was doing on my cic demo site), designer mode isn't an option unless you go with self-hosted. 

27 minutes ago, Rikki said:

We have an outstanding bug open whereby child themes don't inherit new theme settings that are added to a parent, but aside from that, child themes should pretty much work as you describe, including custom CSS.

This is my first actual attempt to use parent themes and I thought I read somewhere that it should inherit css but it isn't. Least I know there a bug for that to be fixed.