Zen subthemes CSS

Modifying the CSS declarations in your subtheme.css definitely works. So I have 2 suggestions…

1. Make sure you followed all the steps on: http://drupal.org/node/201423

2. Make sure CSS aggregation is disabled on your site: admin/settings/performance

I have a similar problem on 5.x-1.1. The changes I made on my /zen/subtheme/subtheme.css are not working.

I wanted to have a fixed layout, and I followed the steps on http://drupal.org/node/201423. I also checked that CSS aggregation is disabled.

I did the following with no success inside my zen/subtheme folder:

1. The fixed width=960px in layout.css is not applied
2. I modified my subtheme.css and still was not working
3. I manually created a new ' < style type="text/css" ....@import.. > ' entry inside page.tpl.php with new/copied subtheme1.css. This is also not working
4. I also tried using < link rel="stylesheet"... >, and this is not working too

And if I override the div inside page.tpl.php with explicit width
< div id="page" style="width:960px" > ... < / div >
then this one works.

I also tried the zen-classic subtheme. I selected fixed-width and it also does not work.

Thanks.

Abe

If you're running IE => the ZEN subtheme.css is not loaded. You can copy the contents of your subtheme.css to the html-elements.css.

@pndur, that's not true. I have had a SUBTHEME.css load just fine in IE.

You might be experiencing this issue though: #256802: IE limits Drupal to 31 stylesheets total

Sorry, in my case the sheet doesn't load, or better the content isn't used at all. The only quick fix was to copy the contents into html-elements.css. This solved 90,xxx% of the IE problems.
This quick fix however doesn't fix the problem with custom node forms. They still don't have styles.

BTW I don't have the 30 sheets limit yet.
regards

I've been testing in both IE7 and Firefox 3.0.1. In both instances the custom changes in the stylesheet are not applied.

Not sure what other tweaks are required in my zen/drupal setups.

Abe

Maybe try adding !important at the end of a declaration, your selectors may be less specific than those in Zen style sheets. See also: http://www.w3.org/TR/CSS21/cascade.html#specificity.

This and forgetting about aggregation are those I forget most often. Generally you can override anything, be it IE or not.

Is it worth looking at it with Firebug?

Definitely yes. Install, right click an element, choose to inspect, the "Style" tab on the right will tell you what files are interpreted and what styles take precedence.

Since Firebug hadn't been previously mentioned in this discussion (which really surprised me) maybe I should risk "adding the bleedin' obvious" :) and say it's an add-on for Firefox.

No, I'm wrong to call it just an add-on. I only discovered it recently and it's more like bottled magic on steroids!

If you want to see the styles used and loaded in IE, you can use IE 8x. It has a feature similar to Firebug, but not as good as.

I was using the web-developer add-on. Firebug is good.

At any rate, in firebug, the styles tab only shows html.css and ua.css. It does not show the other @import'ed css which are included in the generated code.

I changed to another theme (e.g. Basic theme) and other imported CSS sheets show up in the styles tab.... and my custom css settings work with the Basic theme.

Abe

Do you see your styles in the CSS tab? Maybe you could give us a link?

Anyway i guess a working Zen should result in at least styles from zen.css and html-elements.css, so something is probably wrong with your installation.