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

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

}

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

Leave a comment

Your email address will not be published. Required fields are marked *