Adding a CSS file from a module_Drupal 6 Theming Cookbook-QQ阅读女生中文仙侠网

上QQ阅读APP看书，第一时间看更新

Adding a CSS file from a module

Situations arise where CSS files or CSS rules are to be added from a module. This recipe covers the steps required to do so.

Getting ready

We will be adding the CSS to the mysite module as created in the previous recipe. Create two CSS files named mysite.css and mysite_special.css inside the mysite module's folder and populate them with some sample rules.

How to do it...

Add the following code to the mysite module:

/**
* Implementation of hook_init().
*/
function mysite_init() {
// The path to the mysite module.
$path = drupal_get_path('module', 'mysite');
// Include mysite.css.
drupal_add_css($path . '/mysite.css');
// Include mysite_special.css, but do not preprocess.
drupal_add_css($path . '/mysite_special.css', 'module', 'all', FALSE);
}

Save the file and visit the site to check if the two CSS files are now included.

How it works...

The drupal_add_css() function is used to add CSS files from a module. Its syntax is as follows:

drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE)

The documentation for this function explains each of the parameters:

$path denotes the path to the CSS file relative to the base_path().
$type indicates the type of stylesheet that is being added—a module stylesheet or a theme stylesheet with module being the default.
$media sets the media type for the stylesheet which can include all, print, screen, and so on.
Lastly, $preprocess specifies if the CSS file should be aggregated and compressed if this feature has been turned on.

In our snippet, we first get the path to the mysite module using drupal_get_path() and with the result, can obtain the complete path to mysite.css. We can now add this CSS file using drupal_add_css().

The next CSS file—mysite_special.css—is as the name suggests, a special file, that we do not want to be preprocessed. This could be because we are going to be including it conditionally, or perhaps, because we have encountered quirks in certain browsers when this file is aggregated. Consequently, we can use the following syntax to instruct Drupal to avoid preprocessing this file.

drupal_add_css($path . '/mysite_special.css', 'module', 'all', FALSE);

Looking at the source code of a typical page on the site when CSS optimization is enabled, we should see the stylesheets included similar to the following transcription:

<link rel="shortcut icon" href="/mysite/misc/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/mysite/sites/all/modules/mysite/mysite_special?8.css" />
<link type="text/css" rel="stylesheet" media="all" href="/mysite/sites/default/files/css/css_32c93f4662aecdab9e9b87330ae5f157.css" />
<link type="text/css" rel="stylesheet" media="print" href="/mysite/sites/default/files/css/css_456756789c4eab1267644ab3f147a231.css" />

As the preceding markup attests, the mysite_special.css file is never aggregated while plain old mysite.css is always aggregated.

Note

Drupal API documentation

Drupal documentation for drupal_add_css(), drupal_get_path(), and every other function is available at http://api.drupal.org.

There's more...

Besides adding external stylesheets, the Drupal API also allows for adding inline CSS.

Adding inline CSS

Inline CSS can be added with the drupal_set_html_head() function which can insert just about anything between the HEAD tags of an HTML document.

drupal_set_html_head('<style type="text/css">body { color: #000; }</style>');