Jump to:
| Project: | Zen |
| Version: | 6.x-2.x-dev |
| Component: | Documentation |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Issue Summary
I have a semi-philosophical question about zen sub-themes and upgrades. I've been thinking about upgrading many sites based on zen using zen sub-themes. The default STARTERKIT install instructions say to copy zen.css and include in your subtheme folder as .css. I'm assuming most folks are modifying this css file directly to customize their site. But, when it comes time to upgrade zen, you have to start merging files in your subtheme which could get hairy if you've made a bunch of changes.
Wouldn't it be better to create a sub-theme from STARTERKIT and not copy zen.css and then remove the line in .info that causes the parent zen.css to not get loaded:
; To prevent stylesheets of a base theme or of a module from being included in
; our sub-theme, we specify it in our .info file (and we don't need to have a
; stylesheet in our sub-theme with that name.) For example, we prevent the
; zen.css file in the base theme from being included by specifying it here.
; ok, let's comment this out so it DOES get loaded
;stylesheets[all][] = zen.cssJust comment out this zen.css and the default zen.css will get loaded by the parent theme. Then, finally, you can create an empty .css file that are just the overrides to all other parent css files that have already been loaded. This way, you can upgrade the main zen folder with cvs and your .css just includes overrides, nothing to merge. Isn't this a more sane approach, especially if you have many sites to upgrade? Also, you can see all of your changes in one file, name the new -- you don't have to diff against the parent zen.css to see your changes. Also, you can override classes in the parent zen, html-entities and layout css files -- all in one file that gets loaded last.
Ok, anybody have any thoughts on this? Just think about upgrading 100's of sites based on zen. Comments greatly appreciated.
Comments
#1
Darn, all of my subtheme.css references got deleted and were turned into .css in the post above due to input filtering. I'm reposting here for clarity:
I have a semi-philosophical question about zen sub-themes and upgrades. I've been thinking about upgrading many sites based on zen using zen sub-themes. The default STARTERKIT install instructions say to copy zen.css and include in your subtheme folder as SUBTHEME.css. I'm assuming most folks are modifying this SUBTHEME.css file directly to customize their site. But, when it comes time to upgrade zen, you have to start merging files in your subtheme which could get hairy if you've made a bunch of changes.
Wouldn't it be better to create a sub-theme from STARTERKIT and not copy zen.css and then remove the line in SUBTHEME.info that causes the parent zen.css to not get loaded:
; To prevent stylesheets of a base theme or of a module from being included in
; our sub-theme, we specify it in our .info file (and we don't need to have a
; stylesheet in our sub-theme with that name.) For example, we prevent the
; zen.css file in the base theme from being included by specifying it here.
; ok, let's comment this out so it DOES get loaded
;stylesheets[all][] = zen.css
Just comment out this zen.css and the default zen.css will get loaded by the parent theme. Then, finally, you can create an empty SUBTHEME.css file that are just the overrides to all other parent css files that have already been loaded. This way, you can upgrade the main zen folder with cvs and your SUBTHEME.css just includes overrides, nothing to merge. Isn't this a more sane approach, especially if you have many sites to upgrade? Also, you can see all of your changes in one file -- you don't have to diff against the parent zen.css to see your changes. Also, you can override classes in the parent zen, html-entities and layout css files -- all in one SUBTHEME.css file that gets loaded last.
Ok, anybody have any thoughts on this? Just think about upgrading 100's of sites based on zen. Comments greatly appreciated.
#2
Sounds sensible. I'm just struggling to figure out what to do to upgrade Zen from 6.x-1.0-beta3 to 6.x-1.0 - it seems I have to create a subtheme from the new STARTERKIT and re-enter all my changes, which'd be a pain :(
#3
I agree with lutegrass. It would be a lot easier if the subtheme .css just had the modifications for your subtheme. Makes sense for maintainability and follows basic theory of CASCADING style sheets. This would assume you are not drastically changing the structure of the zen theme. Also in your .info file, the sub theme css would have to be the last defined since this is the same order they will appear in the head of the html.
#4
Count me in on this, as I woke up this morning with exactly this concern on my mind. I've just spent several days proto-typing a new site using 6.x-2.x-dev, and making my changes per the zen proposed method of making them to all those many separate css files in my subtheme, but now it occurs to me how much of a pain it will be to find them if there are significant changes to those files in future releases of zen. It seems to me that it still makes more sense to make most custom style changes in one well documented subtheme.css file.
#5
This change would be good, but tricky because there are so many folks using zen, presumably, the other way, just editing a copy of the zen.css named as their theme. So, how about this. Just add a note to the INSTALL.txt for STARTERKIT.
Maybe something like ...
###
You may edit your theme's copy of zen.css (.css) directly, or you may want to create an empty file of classes that override the zen.css from parent zen theme. To have the zen.css theme loaded by the parent zen theme, please make the following change in your .info file:
stylesheets[all][] = zen.csschange to ...
;stylesheets[all][] = zen.cssThis change will cause zen to load zen.css from the parent theme. You may now create an empty .css in your subtheme directory and add any new or override css to alter your zen based sub theme. This approach contains all of your css changes and additions into one file which may make upgrading easier. You can override any previously loaded zen style in this new file.
###
#6
I'd second lutegrass' suggestion for this one. Upgrading one of my projects to Zen 1.0 was a lot more work than I anticipated because I had to merge my own copy of the main css file with the newest fixes. The only problem I can see, would be that it'd be an additional hit on the size of a site's CSS files. (For instance, zen.css would be pulled in with all its additional empty CSS descriptors, in addition to the copy in the subtheme itself.)
Maybe that could be fixed, though. What if there were two copies of zen.css: "zen.css" and "STARTERKIT.css." Zen.css would only have css descriptors needed for inheritance; no empty ones present. The STARTERKIT.css would have all empty descriptors. Then people could use STARTERKIT.css, if they weren't comfortable starting with a blank file. People who did use an empty file for their theme would get the added benefit of having less CSS to download, since all the empty descriptors wouldn't be included.
Hm. Does that make sense? I feel like I'm not being as clear with my thoughts as I should. =P
#7
But the copy in your subtheme will only contain the changed or new css selectors, not all of the empty ones since those are being loaded from the parent zen. So, you load the parent zen, then let the subtheme only contain the overides or changes. So you don't load the same file twice -- but you need to make the change I mentioned above to tell zen to load the parent zen.css so you don't have to have those selectors in your subtheme.css. It is hard to explain at times!
#8
Right. My point was that by having a version with the empty ones and a zen.css that is trimmed down, we then don't have to force visitors to download a bigger zen.css that has a bunch of empty selectors in it.
I was suggesting having a STARTERKIT.css in addition to a clean zen.css file because some people seem to find it easier to modify CSS from a template rather than from a blank file. The people in that position end up with roughly the same file size as is currently being downloaded. People who don't mind using a blank file (and emptying out STARTERKIT.css) get the added bonus of less CSS transferred to their visitors.
#9
Sorry smithn.nc, I was tired when I posted #7. Ok, I'm also not a bit fan of loading a copy of zen.css with all of those empty selectors. How about a simple change to the doc that says ...
###
4. You may copy the zen stylesheet from the zen folder and place it in your sub-theme's folder. Rename it to be the name of your sub-theme. Or, you may start with a clean subtheme-name.css file in your subtheme folder and add css as needed. This latter approach works very well if you are using a tool like Firebug for the Firefox browser since you can easily identify and modify the zen classes you want to change and not include a bunch of empty css classes you don't need.
###
And, you wouldn't need to change the .info file at all which would be good. Then, the parent zen.css would not get loaded unless the developer really wanted to load it via the subtheme-name.info. Also, this means that the parent zen.css is mostly used as a reference if people want to use some of it, not necessary.
#10
Hi again, lutegrass. That does help make it clearer to new developers planning to use Zen. On the other hand though, doing it that way will still mean that the empty selectors are getting pulled in at least once (because of standard zen.css in the parent theme.)
This is why I was suggesting that there be a new version of the stylesheet with no empty selectors. One that always stays in the parent theme, and is never copied to the child. Then the normal, existing zen.css (the one with empty selectors) would be a default part of the STARTERKIT folder and can either be used or erased, like your suggested documentation change indicates.
If you still don't agree with my suggestion, that's totally okay. I still definitely do support a change in wording for the docs. I just think that it'd be more beneficial coupled with a change in how the CSS is organized.
#11
No, the parent zen.css does not get loaded by default. In the STARTERKIT.info, please see these lines ..
; To prevent stylesheets of a base theme or of a module from being included in; our sub-theme, we specify it in our .info file (and we don't need to have a
; stylesheet in our sub-theme with that name.) For example, we prevent the
; zen.css file in the base theme from being included by specifying it here.
stylesheets[all][] = zen.css
This is the default behavior or setting. It is set this way so that when you copy and rename zen.css into your sub-theme, you aren't loading the same css selectors and classes twice. So, the default is not to load zen.css. This default coupled with a slight change to the doc seems to give the best of both worlds? Maybe I'm missing something!
#12