sub-theme css doesn't override style.css
tgustilo - September 4, 2009 - 17:10
| Project: | Nitobe |
| Version: | 6.x-4.1 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
Hi, I am trying to fix a margin in a div.block h2, and my sub-theme.css won't override Nitobe's style.css. Firebug confirms style.css gets priority. The best I've been able to figure out is that there is a manual override done here in template.php:
// -- Re-order the CSS files so that the framework styles come first.
$vars['css_alt'] = nitobe_css_reorder($vars['css']);
$vars['styles'] = drupal_get_css($vars['css_alt']);Resulting in:
<link href="/sites/all/themes/sub-nitobe/sub-nitobe.css?F" media="all" rel="stylesheet" type="text/css">
</link>
<link href="/sites/all/themes/nitobe/styles/style.css?F" media="screen" rel="stylesheet" type="text/css">
</link>
<link href="/sites/all/themes/nitobe/styles/print.css?F" media="print" rel="stylesheet" type="text/css">Thanks for help.
#1
The media type on your stylesheet is set to "all". That type is always ordered to be ahead of the more specific "screen" and "print" media types.
You will need to declare your stylesheet as media type "screen" to make it load after style.css
#2
Thanks, makes sense. But how do I fix it when it's being generated by:
<?php print $styles; ?>in my page.tpl.php file?
#3
OK, I just put the link in manually below the print $styles. It works. I'll have to remember to do that on all my template files. If there's another way, I'd be happy to learn.
Thanks. Love this theme, btw. :)
#4
Follow up thought...
Block and views theming in general is proving to be challenging. I've been exploring helper modules like Block Class and the new Skinr. How will these styles be applied? With what priority?
I'm sorta confused at all the different ways classes get applied to elements, and then how to find/adapt css styling for those classes.
#5
You should be listing your subtheme's CSS files in the subtheme's .info file. They should not be hard coded in the template files.
Nitobe supports Block Class by default. It appends the classes assigned by Block Class to the class attribute of the div element that contains the block.
When CSS selectors are applied, the one that's the most specific has the highest priority. So for an element like this:
<div id="test" class="block red"><p>some content</p></div>This selector would have the highest priority:
div#test { color: green; }This one would have a lower priority:
div.block.red { color: red; }And this one would be even lower:
div.block { color: blue; }#6
OK, subtheme css now listed in .info file. (I forgot about that.) I see it's easy to specify media type right there. Good deal. :)
I've been playing with Block Class. I see how/where the class attribute is appended in the div. So for example I created a simple block and applied Nitobe's "highlight" class to make it yellow! Cool. :)
But does a style filter down to the block title (can't see that it does -- tried adding "loud," which I made red) or block content -- e.g. a view?
Maybe my question is about how div class attributions get inherited down into nested divs.
(Combine that with how class specifications get "inherited" through the css cascade, and my head begins to spin.)
Does Skinr do the same thing, except reach deeper into the hierarchy?
Thanks for taking the time to answer my questions. It takes me forever to puzzle this stuff out on my own.
#7
I believe Skinr does a lot more than Block Class does. Based on discussions I've had with the Todd Nienkerk who maintains Block Class, I think the intent is to combine efforts on the two projects such that Skinr will subsume what Block Class does.