Subtheme media query CSS in Omega Kickstart subtheme

Question

I want to build a site based off of Omega Kickstart which is a subtheme of Omega. Of course I want to layer in my changes sparsely so I made a subtheme of Omega Kickstart.

All the guides out there for doing this assume that you only want one global CSS file in your new subtheme. That seems crazy to me -- I want to follow the same mobile-first pattern in my subtheme and individually override each targeted CSS file i.e. alpha-default.css, alpha-default-narrow.css, etc...

Is this possible? To have both omega-kickstart-alpha-default.css and MYTHEME-alpha-default.css?

Everything I try seems to want to override omega-kickstart*.css with MYTHEME*.css. And it seems to defeat the whole purpose of subtheming to copy omega-kickstart*.css over to MYTHEME*.css.

Answer 1

I had similar issues like this. I ended up simply overriding the CSS file in my template.php. I created a helper for me to do this. Simply run hook_css_alter and replace the file you are targeting with your own. In this case, the omega theme's grid file is here:

sites/all/themes/contrib/omega/alpha/css/grid/alpha_default/wide/alpha-default-wide-24.css

And I am replacing it with:

sites/mysite.com/themes/my_theme/css/grid/alpha_default/wide/alpha-default-wide-24.css

This is the code in my template.php

/**
 * Implements hook_css_alter().
 */
function my_theme_css_alter(&$css) {
  $themePath = drupal_get_path('theme', 'my_theme');
  $newCSS = array(
    'sites/all/themes/contrib/omega/alpha/css/grid/alpha_default/wide/alpha-default-wide-24.css' => $themePath.'/css/grid/alpha_default/wide/alpha-default-wide-24.css'
  }
  _my_theme_replace_file($css, $newCSS);
}
/**
 * Helper function to replace an existing file with a new path
 */
function _my_theme_replace_file(&$files, $newFile) {
  foreach($newFile as $oldpath => $newPath) {
    if(isset($files[$oldpath])) {
      $files[$newPath] = $files[$oldpath];
      $files[$newPath]['data'] = $newPath;  
      unset($files[$oldpath]);
    }
  }
}

The helper function _my_theme_replace_file simply loops through the array, finds the old path and replaces it with the new one.

I hope this helps.

Answer 2

To create a subtheme, follow all 10 steps mention in this article. It includes instructions on how to add your own theme specific CSS files.

If you want them to load conditionally, add your own MYTHEMENAME_preprocess_HOOK functions to ./MYTHEMENAME/template.php in your subtheme folder.

After you add your changes, add the following lines of code in ./MYTHEMENAME/template.php at the very bottom :

drupal_flush_all_caches();
drupal_theme_rebuild();

This should flush the cash and add your changes. Then, comment out these two lines and refresh your browsers. Your changes should now be included.

The easiest way to test whether your MYTHEMENAME_preprocess_HOOK function is actually being used, is to add nothing but one of the following options to that function (and remove it when it generates output) :

echo 'MYTHEMENAME_preprocess_HOOK used'; // native PHP
var_dump('MYTHEMENAME_preprocess_HOOK used'); // native PHP
debug('MYTHEMENAME_preprocess_HOOK used'); // Drupal specific

If you don't want to clutter ./MYTHEMENAME/template.php, you can also put your hooks in seperate files in the preprocess folder as described in the readme file.

TEMPLATE_preprocess_html() --> ./MYTHEMENAME/preprocess/preprocess-html.inc
TEMPLATE_preprocess_page() --> ./MYTHEMENAME/preprocess/preprocess-page.inc
TEMPLATE_preprocess_node() --> ./MYTHEMENAME/preprocess/preprocess-node.inc

Unfortunately, the documentation forgets to mention what would be suitable values for TEMPLATE. As you can see in the code in the process folder of inherited themes, TEMPLATE should be identical to MYTHEMENAME_alpha. It took me hours to figure that out.

For example, your page hook would be something like this if it was put in the file ./MYTHEMENAME/preprocess/preprocess-page.inc :

function MYTHEMENAME_alpha_process_page(&$vars) {
  //debug($vars);
}