BaseTheme and ChildTheme not working

Topics: Troubleshooting, Writing themes
Dec 30, 2011 at 11:51 PM
Edited Dec 30, 2011 at 11:54 PM

I cannot figure out what I am doing wrong. I created a BaseTheme which just has my zone layout. I created a ChildTheme which will simply apply font color, background color, etc. and is based on the BaseTheme for layout.

If I select the ChildTheme before creating a Style Sheet for it, I see in the <head> that the Site.css from BaseTheme is used.

When I create a Style Sheet for Child Theme and apply a simple background color I expect the BaseTheme's StyleSheet to apply to the layout and the ChildTheme's Style Sheet to apply the backgound color. However, when I do that the <head> only shows the Site.css from the ChildTheme and none of my layout rules from BaseTheme show up. In essence, none of those layout rules (padding, margins, etc.) are applied and the site looks screwed up.

I used codegen to create the ChildTheme (codegen theme ChildTheme /BasedOn:BaseTheme /CreateProject:true /IncludedInSolution:true)

What am I missing?

Thanks in advance.

Dec 31, 2011 at 12:14 AM

Ok, so I may have misunderstood child theme creation. I presumed that by doing a child theme based on an existing theme that I would just be minimizing the amount of files/lines per file I would have to write.

I thought I could create a base theme that had all the basics (layout of zones, margins, font-sizes) and then create child themes that simply applied some color to background, fonts, etc. so that I could use the same structure but have different child themes with different colors for several sites I am creating.

What I wanted to avoid, for example, was if I have four sites to change the padding to one zone that I didn't like and then have to go to four different CSS files to make that change apply to three other sites. I wanted to be able to make that change in the base theme only. Is this impossible?

And if I have alternates in the base theme do I have to copy those alternates over to the child as well? If so I am missing the point of based on themes, because it seems counter-intuitive to have to copy everything over you want to your child theme, make mods there but not be able to make mods to the base theme that apply to ALL child themes. 

Dec 31, 2011 at 12:30 AM

In general you'd be right but some paths in some files are just relative and are not processed server-side, so you need to reproduce more than you'd like in the child theme.

Dec 31, 2011 at 12:40 AM
Edited Dec 31, 2011 at 12:41 AM

Ok, so I may have at least obviated the need to copy over all of the BaseTheme's site.css stuff into the ChildTheme's site.css by simply using:

@import url ('../../BaseTheme/Site.css');

Note that I went up TWO nodes in the folder structure to get to the BaseTheme's site.css;

I still have to copy over any alternative .cshtml files I used in the BaseTheme (as well as the layout.cshtml per the documentation).

I mean no disrespect to the Orchard Team by my comments, you guys amaze me with what you've done. However, could this be something in a later version of Orchard, where a child theme is truly a child theme and not something that needs to be cloned, edited, and then if you want all child themes to have that same effect (something structural like padding/margins/font-sizes) you don't have to copy that change over to each child theme. In my case, I have one BaseTheme and want 6 ChildThemes. These child themes only change color, images, etc. (i.e., cosmetic changes). If I later decide to change the padding on one zone, I have to make the changes 6 times.

I mention this because the documentation does state that a later version may get rid of the need to copy the layout.cshtml file to the child theme, and as an extension not having to copy the .css file would be a great benefit.

Happy New Year's!

EDIT: I was writing this before I saw your reply Bertrand.

Dec 31, 2011 at 12:57 AM

We'd gladly take a patch enabling that, but to be frank I'm not entirely sure how it could work.

Dec 31, 2011 at 2:56 AM

You don't have to override Site.css; you can include a *different* stylesheet for style overrides in your child theme and leave the base Site.css as is (then use Combinator module to automatically produce a single stylesheet...)

Jan 3, 2012 at 4:25 PM

With similar thoughts I've published a modularized theme, Pretty Good Base Theme, you could look at it to get ideas. Also, the original discussion about my concerns I aimed to solve with the theme is here.

Sep 24, 2013 at 2:32 PM
it seems this still keep the same in 1.7.1