The Definitive Guide to Drupal 7

Patterns and Naming Conventions

In your theme, you are free to name your CSS files whatever you want. Many themes tend to create a directory called “css” in which they place a few stylesheets. It’s very common to create a layout.css for page layout styles and style.css for the rest. Some themes, like Zen, take it much further with almost 30 stylesheets. How you decide to organize your CSS is completely up to you. There are no restrictions on how many stylesheets a theme can have. Most front-end developers have their own way of working, and Drupal is happy to oblige.

Core and Module CSS Files

Most modules that provide CSS will typically include a file in the root of the module directory called module-name.css. Some of the modules have a few CSS files, and the better modules create a separate file for any CSS used to style the administrative user interface. Modules are not restricted to any number or specific organization of CSS files, but developers are generally urged to be conservative and style elements as little as possible.

It’s also worth mentioning that Drupal’s System module, located in modules/system, contains quite a few CSS files that seem to all be dumped there because there is no better place to put them. Table 16–3 provides a quick description of each, so you have an idea of what their purpose is and can decide whether or not to keep them in your theme.

Table 16–3. System module’s CSS files, excluding RTL versions
CSS File Purpose Loads on…
system.base.css Contains CSS that is heavily relied upon by JavaScript for certain functionality, including collapsible fieldsets, autocomplete fields, resizable textareas, and progress bars. Every page.
system.theme.css Contains general styles for many generic HTML and Drupal elements. Every page.
system.menus.css Contains default styling for menu tree lists, tabs, and node links. Every page.
system.messages.css Contains default styling for error, warning, and status messages. Every page.
system.admin.css Contains styles needed on administrative pages throughout Drupal. Admin pages.
system.maintenance.css Contains styles for installation, maintenance, and update tasks. Maintenance pages.

Bi-Directional Text Support

One of the things Drupal is known for is its superb language support. This includes bi-directional text support. While most languages display text from left-to-right (LTR) on screen, certain languages, such as Arabic and Hebrew, display text from right-to-left (RTL) on screen. Browsers handle much of the styling differences needed by reading the dir attribute defined in the <html> tag and using User Agent CSS files, but many times CSS floats, text alignment, and padding need to be accounted for in CSS, especially when you are running a site with multiple languages.

Drupal handles RTL stylesheets in an automated way based on CSS file naming conventions. If you have a stylesheet named style.css, which contains the CSS for the LTR version of the site, you can simply create another file called style-rtl.css to contain the necessary tweaks to fix the display for the RTL version. Drupal will automatically load it when needed, directly after the original file so that the same selectors can be used and RTL styles will override the LTR styles, taking advantage of the natural CSS cascade. When writing CSS for a site that will support both LTR and RTL displays, it is customary to write the CSS for the LTR version first, while keeping track of what will need to change (per property) with a comment. This is one of the coding standards Drupal has adopted for core and contributed CSS files. Listing 16–36 shows an example.

Listing 16–36. Example CSS denoting a LTR property and the RTL version
  1. /* In style.css:
  2.  .my-selector floats content to the left, which is LTR-specific, so an inline comment is added to note this.
  3. */
  4. .my-selector {
  5. border: solid 1px #ccc;
  6. float: left; /* LTR */
  7. }
  8.  
  9. /* In style-rtl.css:
  10. The RTL version of .my-selector needs to be overriden and floated right instead of left. */
  11. .my-selector {
  12. float: right;
  13. }

You are reading content from two chapters on Theme Development from The Definitive Guide to Drupal 7, written by Jacine Luisi and published by Apress on July 19, 2011. All rights reserved.