Lullabot Ideas
We know stuff. We empower you to know stuff too.
How to properly add CSS files
Article by Ted SerbinskiMay 17, 2006 - 4:37pm
As I was working on cleaning up a few isses for the Javascript Tools module, I stumbled upon one issue dealing with overriding CSS styles. In this case, JSCalendar was adding it's styles after a theme's styles were being loaded. Obviously, from a CSS standpoint, it would be impossible for the theme to override and change CSS styles in JSCalendar. This needed to be fixed.
After some digging, I found this comment that explains this problem in more detail and outlines the correct procedure for modules and themes to add CSS files.
To summarize Tom:
<?php
// Modules should do:
drupal_set_html_head(theme('stylesheet_import', base_path() . drupal_get_path('module', 'mymodule') .'/mymodule.css'));
?><?php
// user-created PHP pages/blocks/comments/etc. should do:
theme_add_style('misc/local/my_custom_style.css');
// (theme_add_style is also used internally for the style.css files)
?><?php
// themes should do:
$output .= theme('stylesheet_import', base_path() . path_to_theme() . '/extra_stylesheet.css');
/* note that this should be BEFORE theme_get_styles, which will reference
the style.css file and anything added by the user... themers will probably also
want it located after drupal_get_html_head, which will bring in any module-specific CSS
*/
?>
Comments
Can deal with modules that use the wrong method...
I 'fixed' this in my theme by overriding theme_get_styles and reversing the order.
<?phpfunction phptemplate_get_styles() {
$output = '';
foreach (array_reverse(theme_add_style()) as $style) {
$output .= theme('stylesheet_import', $style->path, $style->media);
}
return $output;
}
?>
Ingenious!
Ingenious!
Adding stylesheets for alternate media
I added a Drupal.org handbook page re: the phptemplate theme snippet above.
http://drupal.org/node/64144
-b
But see also
See also the issue: http://drupal.org/node/60096 => theme('stylesheet_import'... in modules stops block/theme preview
To quote Dries:
Using theme_add_style('misc/local/my_custom_style.css'); appears to make sense.
Simply adding a new style
For more flexibility one can include other styles directly in CSS, skipping the PHP code. This can be done by using
@import url("my-style.css");within a stylesheet that is linked in yourpage.tpl.php. These can even be recursive but browser compatibility gets dodgy.That method isn't the best way to overwrite any CSS, but it's a quick and easy method to bring in other stylesheets without hardcoding links in phptemplate.
Very confusing
I too was very confused about how to properly add CSS files for a module, until I found the drupal.org thread that you referenced here. I hadn't realised before what the correct procedure was, or what the effects were of doing it wrong. Now, I've updated my modules to use the correct method.
Thanks for taking the time to document this - hopefully, it will make developers less confused in the future!
Is your codeblock functioning correctly?
This line is a little screwie: "drupal_set_html_head(theme('stylesheet_import', base_path() . drupal_get_path('module', 'mymodule') .'/mymodule.css'));"
I guess you may want it "forced" down, simular to how your comment blocks behave but I could be wrong... :)
For more flexibility one can
For more flexibility one can include other styles directly in CSS, skipping the PHP code. This can be done by using @import url("my-style.css"); within a stylesheet that is linked in your page.tpl.php. These can even be recursive but browser compatibility gets dodgy.
That method isn't the best way to overwrite any CSS, but it's a quick and easy method to bring in other stylesheets without hardcoding links in phptemplate.
how to add stylesheet for module theme
i have created a filename _.tpl.php and added it to theme's folder so as to override theme hook for that content . I have some abc.css for the above template . Now I want to know where to put this css and how to make drupal know it is the css corresponding to above template
Really old info for Drupal 4
lullabot.com is really a great resource, but I find articles like this one misleading as it is out of date, but Google search regards it highly.
Could you archive the article possibly and others that are out of date? Or how about tagging Drupal4, Drupal5 ...
Thanks
Easier in Drupal 6
In the .info file of your theme add a stylesheet declaration, as follows:
stylesheets[all][] = new_stylesheet.css