Adding style sheets
Last modified: August 24, 2009 - 23:08
This page explains how to add a style sheet using the .info file of a theme. To add a style sheet programmatically, see the API functions page. Styling themes purely through CSS is possible with the information provided here.
Notes:
- When working with style sheets, make sure CSS Optimization is disabled. It is located in "Administer > Site configuration > Performance". When it is enabled, any alterations will not be reflected on your site until the aggregated styles are cleared. You can enable it again when you're done.
- The .info file is cached. Adding or removing any styles will not be noticed until it is cleared. (Do not confuse this with the theme registry.) To have it cleared, do one of the following:
- Clear button located at "Administer > Site configuration > Performance".
- With devel block enabled (comes with devel module), click the "Empty cache" link.
- Simply visit the theme select page at "Administer > Site building > Themes".
- Adding style sheets:
-
By default, a "style.css" file will be used from your theme when no other styles are defined inside the .info file. Adding other styles is as simple as defining a new '
stylesheets' key with its media property and the name of the style sheet. Keep in mind that defining custom styles will prevent the default "style.css" from loading. Remember to explicitly define the default if your theme uses it.; Add a stylesheet for all media
stylesheets[all][] = theStyle.css
; Add a stylesheets for screen and projector media
stylesheets[screen, projector][] = theScreenProjectorStyle.css
; Add a stylesheet for print media
stylesheets[print][] = thePrintStyle.css
A few notes:
- Note the empty square brackets between the
[media]and= styleName.css. - The order in which the styles are listed in the head of the page will reflect the order it is defined here.
- The style sheets can be placed in sub-directories, i.e.,
stylesheets[all][] = stylesheets/styleName.css. Useful for organizing style sheets.
- Note the empty square brackets between the
key cascade?
It is unclear how stylesheet keys cascade. I assuming ascending or descending, but when creating a sub-theme, this is an important distinction and I'm finding it more difficult than expected to determine with a guess and check method.
Style sheets in a subtheme
I have just implemented a subtheme in Drupal 6. The standard Drupal stylesheets come first in the header. Then the theme stylesheet, then the subtheme. So the subtheme's css overrides the theme's css.
To keep the main theme's stylesheet active, name your subtheme css file something other than "style.css" (if that is what the main theme's style sheet is called) and list it in the .info file.
( stylesheets[all][] = subtheme.css -- for an all media stylesheet)
To entirely remove the main theme's stylesheet from the cascade name your subtheme style sheet "style.css", or place an empty file called "style.css" in the subtheme folder, and name it in the .info file.
(If Drupal finds style.css in the subtheme folder it will ignore a style.css in the theme folder.)
I found I needed to clear the Drupal cache to get the style sheets to appear (Performance > Clear cache).
Miriam
Otaki, New Zealand
media-by-media basis
Just wanted to note that the stylesheets are added on a media-by-media basis, e.g.:
core[all]
modules[all]
theme[all]
subtheme[all]
core[screen]
modules[screen]
theme[screen]
subtheme[screen]
etc...
Furthermore, if you define a
Furthermore, if you define a stylesheet[all] in a subtheme, it will be loaded BEFORE a stylesheet[screen] from a base theme. This can be confusing, as your base theme will overwrite your subtheme.
color styles overriding subtheme styles
OK, I'm confused.
I thought the point of using sub-themes is to leave the theme files unchanged, but to have a folder full of .css, .php and image files that can override the theme. If the stylesheet in the main them overrides what's in the sub-theme, then it seems like it would be necessary to delete the stylesheet in the main theme.
I'm trying to make a subtheme of the Newsflash theme from Rooplethemes...not making drastic changes, just a revised header, some spacing and type size changes, and putting borders around some divs. Within sites/all/themes/newsflash I have another folder, mynewsflash. Within that folder is mystyles.css and mynewsflash.info, which includes the lines
base theme = newsflash
stylesheets[all][] = mystyles.css
I've cleared the cache and reloaded the page, and the changes I made don't appear. When I view source, all of the module styles load in this order:
(all of the module style sheets, albeit in a mixed core/contributed order)
newsflash/style.css
newsflash/mynewsflash/mystyles.css
newsflash/css/blue.css
newsflash/css/suckerfish_blue.css
So it would seem that if newsflash didn't have admin-controllable color choices, that mine would show up last in the list and everything would be hunky-dory. Newsflash splits the css between a stylesheet in the newsflash directory (for positioning) and stylesheets in each directories for each color choice available. Any clue how I can get mine to override the color choices? Do I need to put my own stylesheet in the "blue" directory?
This is from my experience
This is from my experience using Zen as a base theme, creating sub-themes and sub-themes of those themes.
When I create sub-themes, I do not place the sub-theme in the parent theme's folder.
I think you may have to add a folder in your sub-theme for the color overrides and an entry in your sub-themes info file.
I'm going to take a quick look at the Newsflash theme and try some overrides.
---
It is a damn poor day when you don't learn something!
I'm Attempting To Over-Ride NewsFlash as well.
I'm attempting to override Newsflash as well. Did you manage to get it working the way you wanted it to?
listing it in the .info file
yup, that totally did it for me, just put in stylesheets[all][] = mycustomcss.css
that's how i roll...
@flickerfly: What do you
@flickerfly: What do you mean by "keys" and "cascade"? When you're talking about CSS, the word "cascade" has a special meaning inherent to CSS (aka, Cascading Style Sheets). Are you referring to that type of cascade?
If so, look into some CSS tutorials to learn more about cascading, precedence of rules as determined by load order and specificity, etc.
http://kentrichards.net
I finally understand how
I finally understand how style sheets from base themes are loaded into sub-themes. In the sub-theme's .info file, the CSS file from the base theme does not need to be declared again. Otherwise, the file will not get loaded unless that file exists in the sub-theme's directory.
For example, for "subtheme" defined below to load both the maintheme.css and subtheme.css files, setting the following will suffice:
; maintheme.infostylesheets[all][] = maintheme.css
; subtheme.infostylesheets[all][] = subtheme.css
The maintheme.css must not be redeclared in the subtheme.info file, unless there's another maintheme.css file in the the directory of "subtheme".
Rémi
remiplourde.com
Works fine with my Marinelli
Works fine with my Marinelli subtheme. Many thanks for this page and remi's addition :-)
---
Libres-Ailé(e)s (Association for Linux and libre software) (France, Cévennes)
Not loading the other stylesheets
Thanks for this thread, which helped me to understand what should happen, but I'm still not having any luck. I've been trying to implement a subtheme of a subtheme of Zen. When I have the stylesheets specified as remi outlined above, I do see that both the "maintheme.css" and the "subtheme.css" are loaded. But what isn't loaded are all of the other css files from my MainTheme, like "layout.css", "html-elements", "print.css"...
Anyone have any ideas what I might be missing?
Follow-up
Originally, I had made a copy of my MainTheme.info file and put that in my SubTheme folder (the same process I used to create my MainTheme, which was a Zen subtheme). This .info file had a lot of stuff in it that originally came from the Zen Starterkit.info file. I found this tutorial (http://drupal.org/node/441088), and so removed all of the junk in my SubTheme.info file and just added the 5 lines specified in this tutorial, and it (almost) worked. I realized I needed to also add the regions, since Zen includes some custom regions. After adding the regions, I was in business!
I thought so too until
I thought so too until recently, when I discovered that my Recent Log entries were filled with "Page not found" errors complaining about html-elements.css, tabs.css etc... In the page source I can see only my stylesheet being loaded, which is what I want, as the result of deactivating the Zen default stylesheets by simply redeclaring them, like this:
stylesheets[all][] = zen.cssstylesheets[all][] = tabs.css
stylesheets[all][] = html-elements.css
stylesheets[all][] = block-editing.css
stylesheets[all][] = messages.css
stylesheets[all][] = wireframes.css
Zen's default .info file says this:
This is functionally true, but it seems you do need to have empty CSS files with the name above inside your subtheme's folder if you don't want your error log to fill up.
This is, of course, unless I got it totally wrong. Please correct me if I did, or try figure out why this happens.
This doesn't make sense...
If those stylesheets are not declared in the page source, then why are requests for them being sent to the server? Where are those requests coming from, I wonder.
Are you sure they're "Page not found" errors, not "File not found" errors? Do you have aggregation turned on? I wonder if there's a bug causing the aggregation engine to try to include them.
http://kentrichards.net
Aggregation turned on? Where?
Aggregation turned on? Where? These are Page Not Found errors alright, not File Not Found errors. Nothing in the error description helps me make sense of it. There is no reference to the CSS files in the source, but their absence is logged as a warning in the Error Report. I really can't see why this is happening either.
Default style.css loads in wrong order for sub-themes
When working with sub-themes, don't try to use the default "style.css" unless you define it in your .info file. Otherwise, the "style.css" file will load before the CSS files of your base theme, making any overrides ineffective.
If you define "style.css" (or any other stylesheet) in your sub-theme's .info file, it will load after the base theme's CSS files and the overrides in your sub-theme will work properly.
I suppose this is one of the reason's many people recommend naming CSS files uniquely, rather than using the default "style.css" file.
I've always used
I've always used mythemename.css as my stylesheet and the only way I found to avoid the "file not found" errors in the watchdog was to go into the zen theme's info file and comment out any stylesheets in there. Works fine for me now, since I copied all zen's declarations into my own css file (I thought that 15 stylesheets pushing their way into my HTML source was enough as it is). It was a compromise. I'm using zen's excellent automatic HTML tagging but I keep my styles to myself :) This is anti-sub-theme principles, I know, but at some point I just had to get some work done.