Adding style sheets
Last modified: December 1, 2008 - 18:32
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?
Wrong documentation
- The style sheets can be placed in sub-directories, i.e., stylesheets[all][] = stylesheets/styleName.css. Useful for organizing style sheets.
Oh yes it is useful for organizing style sheets, only that it doesn't work at all.
Quick fix, use @import in a style.css file
Works for me...
..but I had to clear the cache:
Administer › Site configuration › Performance › "Clear cached data" (button near bottom of page)
Also you will need to adjust the paths within your stylesheet such as those for images:
background: url("images/header.png") no-repeat;..becomes...
background: url("../images/header_logo.png") no-repeat;..or else move your images folder into the folder with your *.css files
I agree with iongion. I had
I agree with iongion.
I had to use the @import rule to get mine to work the way I wanted.
For some reason, wether I put my maintenance.css rule at the top of that list on the myTheme.info file or at the bottom of that list it didn't matter, myTheme overruled all the css from that maintenance.css file.
Also what I don't get is that we "must" put the maintenance.css file inside modules/system/ folder?
That really doesn't look like the Drupal-way.
The reason why I'm mentioning this is because here they refer to this page.
If you guys have anything that clarifies this, please let us know.
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".
Works fine with my Marinelli
Works fine with my Marinelli subtheme. Many thanks for this page and remi's addition :-)