Style sheets

The following will cover how Drupal handles style sheets through .info files. See the sub-page on adding through the API functions for more advanced functionality. Styling themes purely through CSS is possible with the information provided here.

There are a few points to be aware of. Each core component or module will provide a reasonable default for its presentation. This includes the markup and an associated style sheet. (see the explanation on the overriding behavior for the markup.) Due to the extensible nature of Drupal, it would be a great burden for themers to handle everything being pushed out to the browser. These defaults are there to be changed at the themers discretion. Just like the overriding behavior for themable functions and templates, the style sheets provided by core and modules can be overridden. Do not modify directly. All changes should be localized inside your theme.

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:
  1. Clear button located at "Administer > Site configuration > Performance".
  2. With devel block enabled (comes with devel module), click the "Empty cache" link.
  3. 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.

Overriding core and module style sheets:

To override a core or module style sheet, it can be redefined from the themes .info file. Take "system-menus.css" as an example. It is located in "modules/system/system-menus.css". With this entry, the original CSS file will be ignored and your local copy will be loaded.

stylesheets[all][] = system-menus.css
   

When overriding a module style the file should be present inside your theme and pointed to the right location with a matching name. This ensures the original is replaced with the style sheet provided by the theme.

Adding the override for a style sheet that does not exist inside the theme will omit the core or module style sheet. This is by design and this behavior has been corrected since the release of 6.0 in 6.3.

A few notes:

• Overriding a core CSS files will prevent the default "style.css" file from loading. Remember to explicitly define any defaults when needed.
• The themes override must have a matching media type of the original style.
• Any linked elements within the style will have to be corrected. Double check the file for any 'url()' properties or '@import' rules to make sure they are pointing to the right resource.
• The order the style sheets listed in the head of the page will change. In effect, this may cause some cascading rules to change with it.
• Some core and module style sheets are loaded conditionally. Overriding through .info files will force the file to be always used.
• If the changes from the theme is not substantial, then consider using CSS selectors to override the styles instead of overriding the whole file.

Overriding the base theme's style sheets:

The following applies to sub-themes. To prevent a style sheet from a base theme from being carried over to a sub-theme, you can redefine the style sheet inside the .info file. This works the same way as overriding module or core style sheets.

The base theme and the sub-theme must have the same entry:

stylesheets[all][] = masterStyle.css
   

If the file exists inside the sub-theme, then it will be used while omitting the file will prevent it from loading.