All of the HTML output in Drupal comes from various functions, many of which are themable. The styling of the output is controlled by various stylesheets. Accordingly, one of the keys to controlling your site’s look and feel is having a good command of the stylesheets.
The Drupal system contains a large number of stylesheets. In this chapter, we’ll take you on a guided tour of all the various stylesheets.
A typical Drupal installation will include more than forty stylesheets, and may also include a certain number of embedded styles. If you have installed additional extensions, you may well find that they come with their own stylesheets, pushing the count up even higher.
The Drupal approach to stylesheets may initially appear to be overkill in the extreme, or at the very least a rather literal application of modularization, but there is a method behind this madness. The use of multiple stylesheets not only makes it easier for the individual module maintainers of the Drupal development team, but also helps you find what you need more quickly than having to deal with one or two massive files. The net result is an approach that is actually quite effective—once you get past the initial shock!
In order to reduce the potential threats of conflicting stylesheets and absurd loading times, Drupal provides a CSS pre-processing engine. This engine identifies the required stylesheets, strips out the line breaks and spaces from all the files, and delivers the styles in a combined single file. The use of this feature is disabled by default; if you wish to use it, you must access Administer | Site configuration | Performance and enable the Bandwidth optimization option labeled Aggregate and compress CSS files.
Note
While working on the themes of your Drupal site, you should make sure the CSS compression is disabled. If the compression is enabled, you may not be able to immediately see the impact of changes to your site’s CSS.
In the section below, we list the default Drupal stylesheets, where they are found, and briefly explain their function.
/modules/system
Additional styles needed for proper display in character sets that read right-to-left.
/modules/aggregator
Additional styles needed for proper display in character sets that read right-to-left.
/modules/book
Additional styles needed for proper display in character sets that read right-to-left.
/modules/color
Additional styles needed for proper display in character sets that read right-to-left.
/modules/comment
Additional styles needed for proper display in character sets that read right-to-left.
/modules/dblog
Additional styles needed for proper display in character sets that read right-to-left.
/modules/system
Additional styles needed for proper display in character sets that read right-to-left.
/modules/forum
Additional styles needed for proper display in character sets that read right-to-left.
/modules/help
Additional styles needed for proper display in character sets that read right-to-left.
/modules/node
Additional styles needed for proper display in character sets that read right-to-left.
/modules/poll
Additional styles needed for proper display in character sets that read right-to-left.
/modules/search
Additional styles needed for proper display in character sets that read right-to-left.
Theme-specific styles—located in the theme directory. This is the most critical file in a PHPTemplate theme and is the highest in the order of precedence; styles placed here will override conflicting selectors located in any other default CSS file. See the end of this Appendix for a listing of the stylesheets for the themes included in the default distribution.
/modules/system
Covers a wide variety of common styles, and also includes menus, tabs, and progress bars.
/modules/system
Additional styles needed for proper display in character sets that read right-to-left.
/modules/system
Additional styles needed for proper display in character sets that read right-to-left.
/modules/update
Additional styles needed for proper display in character sets that read right-to-left.
