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.cssNotes:
- The order in which the styles are listed in the .info file will reflect the order it is displayed on head of the page.
- 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