Drupal homepage only CSS

So you want to have a base.css file on all pages, then a homepage.css file just for the homepage, and non-homepage.css for all other pages? Here’s how:

In your themes’ .info file, include the base.css file:

stylesheets[all][] = css/base.css

1	stylesheets[all][] = css/base.css

In your themes’ template.php file:

function YOURTHEME_preprocess_page(&$vars) {
  //
  // home/non-home specific css
  //
  $homepage_css_options = array(
    'type' => 'inline',
    'scope' => 'header',
    'group' => CSS_THEME,
    'weight' => 9999,
    'preprocess' => FALSE,
  ); 
  $nothomepage_css_options = array(
    'type' => 'file',
    'scope' => 'header',
    'group' => CSS_THEME,
    'weight' => 9999,
    'preprocess' => TRUE,
  );      

  if ($vars['is_front'] == TRUE) {
    //inline the homepage css, minified by Gulp
    drupal_add_css(file_get_contents(drupal_get_path('theme', 'YOURTHEME') . '/css/homepage.min.css'), $homepage_css_options);
  } else {
    //inline css file for all pages except homepage
    drupal_add_css(drupal_get_path('theme', 'YOURTHEME') . '/css/not-homepage.css', $nothomepage_css_options);
  } 

}

function YOURTHEME_preprocess_page(&$vars) {

// home/non-home specific css

$homepage_css_options = array(

'type' => 'inline',

'scope' => 'header',

'group' => CSS_THEME,

'weight' => 9999,

'preprocess' => FALSE,

);

$nothomepage_css_options = array(

'type' => 'file',

'scope' => 'header',

'group' => CSS_THEME,

'weight' => 9999,

'preprocess' => TRUE,

);

if ($vars['is_front'] == TRUE) {

//inline the homepage css, minified by Gulp

drupal_add_css(file_get_contents(drupal_get_path('theme', 'YOURTHEME') . '/css/homepage.min.css'), $homepage_css_options);

} else {

//inline css file for all pages except homepage

drupal_add_css(drupal_get_path('theme', 'YOURTHEME') . '/css/not-homepage.css', $nothomepage_css_options);

}

Note: In the code above I have chosen to inline the homepage only CSS.

Did you find this post useful?

Tip me some bitcoin: