Drupal

CSS Guide

How Browser feels ??

<link rel="stylesheet" type="text/css" href="/mytheme.css" />

But Actually

Css files compiled from various sources and presented in the browsers  : 

 

Core

Modules

Themes

Overriding core and contributed module style sheets

stylesheets[all][] = system-menus.css

Overriding or omitting a base theme style sheet

The base theme and the sub-theme must have the same entry:


stylesheets[all][] = masterStyle.css

 

If the file exists inside the sub-theme, it will be used. Remove the file in the sub-theme to prevent the file from loading altogether.

Getting Rid of all css files other than theme

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

Adding Stylesheets

; Add a style sheet for all media
stylesheets[all][] = theStyle.css
; Add a style sheet for screen and projection media
stylesheets[screen, projection][] = theScreenProjectionStyle.css


; Add a style sheet for print media
stylesheets[print][] = thePrintStyle.css


; Add a style sheet with media query
stylesheets[screen and (max-width: 600px)][] = theStyle600.css

Notes: 

  1. The order in which the styles are listed in the .info file will reflect the order it is displayed on head of the page.
  2. it is recommended that sub-directories be kept to one level

Adding external stylesheets

<?php
function mytheme_preprocess_html(&$variables) {
  drupal_add_css('http://fonts.googleapis.com/css?family=News+Cycle', 
                  array('type' => 'external'));
}
?>

Adding CSS Specifically

Drupal CSS

By Saket Kumar

Drupal CSS

  • 456