hook_css_alter

7 system.api.php	`hook_css_alter(&$css)`
8 system.api.php	`hook_css_alter(&$css)`

Alter CSS files before they are output on the page.

Parameters

$css: An array of all CSS items (files and inline CSS) being requested on the page.

▸ 2 functions implement hook_css_alter()

▾ 2 functions implement hook_css_alter()

locale_css_alter in modules/locale/locale.module: Implements hook_css_alter().
seven_css_alter in themes/seven/template.php: Implements hook_css_alter().

File

modules/system/system.api.php, line 822: Hooks provided by Drupal core and the System module.

Code

<?php
function hook_css_alter(&$css) {
  // Remove defaults.css file.
  unset($css[drupal_get_path('module', 'system') . '/defaults.css']);
}
?>

Comments

Moving reset.css first

Posted by davidneedham on May 12, 2011 at 7:01pm

I just wanted to point out this implementation of hook_css_alter as used by the Ninesixty theme. It takes all of the 'framework' css files and inserts them before other css files.

That code is very easily repurposed to make reset.css (or any css files you want) to show up before other css files. Just change 'foo' to your theme name:

<?php
function foo_css_alter(&$css) {
  global $theme_info, $base_theme_info;

  // Dig into the framework .info data.
  $framework = !empty($base_theme_info) ? $base_theme_info[0]->info : $theme_info->info;

  // Pull important styles from the themes .info file and place them above all stylesheets.
  if (isset($framework['stylesheets'])) {
    foreach ($framework['stylesheets'] as $media => $styles_from_foo) {
      foreach ($styles_from_foo as $style_from_foo) {
        // Force reset.css to come first.
        if (strpos($style_from_foo, 'css/reset.css') !== FALSE) {
          $css[$style_from_foo]['group'] = $on_top;
          // Handle styles that may be overridden from sub-themes.
          foreach (array_keys($css) as $style_from_var) {
            if ($style_from_foo != $style_from_var && basename($style_from_foo) == basename($style_from_var)) {
              $css[$style_from_var]['group'] = $on_top;
            }
          }
        }
      }
    }
  }
}
?>

Moving reset.css first: use weight and group

Posted by hansrossel on August 16, 2011 at 7:17am

the group CSS_SYSTEM and the weight of -1 makes sure that the reset.css comes first before all the core css and module css files

<?php
drupal_add_css(path_to_theme() . '/css/reset.css', array('group' => CSS_SYSTEM - 1, 'preprocess' => FALSE));
?>

Want to remove core CSS ?

Posted by nicl on July 6, 2011 at 9:10am

The Tao theme does this very simply using this hook and the code below (the code is for Drupal 7):

<?php
function tao_css_alter(&$css) {
  $exclude = array(
    'misc/vertical-tabs.css' => FALSE,
    'modules/aggregator/aggregator.css' => FALSE,
    'modules/block/block.css' => FALSE,
    'modules/book/book.css' => FALSE,
    'modules/comment/comment.css' => FALSE,
    'modules/dblog/dblog.css' => FALSE,
    'modules/file/file.css' => FALSE,
    'modules/filter/filter.css' => FALSE,
    'modules/forum/forum.css' => FALSE,
    'modules/help/help.css' => FALSE,
    'modules/menu/menu.css' => FALSE,
    'modules/node/node.css' => FALSE,
    'modules/openid/openid.css' => FALSE,
    'modules/poll/poll.css' => FALSE,
    'modules/profile/profile.css' => FALSE,
    'modules/search/search.css' => FALSE,
    'modules/statistics/statistics.css' => FALSE,
    'modules/syslog/syslog.css' => FALSE,
    'modules/system/admin.css' => FALSE,
    'modules/system/maintenance.css' => FALSE,
    'modules/system/system.css' => FALSE,
    'modules/system/system.admin.css' => FALSE,
    'modules/system/system.base.css' => FALSE,
    'modules/system/system.maintenance.css' => FALSE,
    'modules/system/system.menus.css' => FALSE,
    'modules/system/system.messages.css' => FALSE,
    'modules/system/system.theme.css' => FALSE,
    'modules/taxonomy/taxonomy.css' => FALSE,
    'modules/tracker/tracker.css' => FALSE,
    'modules/update/update.css' => FALSE,
    'modules/user/user.css' => FALSE,
  );
  $css = array_diff_key($css, $exclude);
}
?>

Note, the Omega theme (in its Alpha base theme) also has an interesting way to remove core CSS files. It does this by specifying excluded CSS files in the .info file and then using some functions -alpha_settings() and then (same as Tao) hook_css_alter() - to unset the specified css.

The Tao approach is much much simpler in terms of code. But Omega is nice too because it is very friendly to non-developers (just add exclude[] to your info to remove a CSS file).

D7 regression issue has been fixed

Posted by gausarts on September 25, 2011 at 5:55am

You can now use theme.info to remove CSS like in D6, see http://drupal.org/node/901062

You may remove different

Posted by akagroundhog on October 14, 2011 at 1:21pm

You may remove different groups of CSS (CSS_SYSTEM, CSS_DEFAULT, CSS_THEME) by adding something like this to your template.php (the following example will remove everything but theme-layer CSS):

<?php
function foo_css_alter(&$css) {
  foreach ($css as $key => $value) {
    if ($value['group'] != CSS_THEME) {
      $exclude[$key] = FALSE;
    }
  }
  $css = array_diff_key($css, $exclude);
}
?>