function 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.

See also

drupal_add_css()

drupal_get_css()

Related topics

Hooks
Allow modules to interact with the Drupal core.
2 functions implement hook_css_alter()

Note: this list is generated by pattern matching, so it may include some functions that are not actually implementations of this hook.

locale_css_alter in modules/locale/locale.module
Implements hook_css_alter().
seven_css_alter in themes/seven/template.php
Implements hook_css_alter().
1 invocation of hook_css_alter()
drupal_get_css in includes/common.inc
Returns a themed representation of all stylesheets to attach to the page.

File

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

Code

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

Comments

Posted by davidneedham on

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;
            }
          }
        }
      }
    }
  }
}
?>

Posted by hansrossel on

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));
?>

Posted by nicl on

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).

Posted by gausarts on

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

Posted by akagroundhog on

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);
}
?>

Posted by Stakcreativa on

@akagroundhog
Many thanks for that code, i was looking for that function. Didn't know there were groups.

=)

Posted by tassaf on

System.theme.css causing a problem for me
table {
border-collapse: collapse;
}

Here is the problem
If I disable system.theme.css what will happen? is this file important or I can disable it without any effect?