How to add custom css file to subtheme of omega kickstart theme?

Question

I have created a subtheme of "omega kickstart theme" and I want to add some custom css files to it. I searched and got some solution(which didn't worked for me), the solution is as follows:

1. create your custom css file and place it in css folder of your subtheme.

2. edit your subtheme.info file(edit under optional css code of info file) as follows:

   css[yourthemename.css][name] = 'Your custom products styles'
   css[yourthemename.css][description] = 'This file holds all the product page CSS of your theme.'
   css[yourthemename.css][options][weight] = '12'
   

The other Solutions were as follows:

1. Specify your custom css path file in info file as

   stylesheets[all][] = mycustomcss.css
   

2. Make use of "drupal_add_css" function in template.php as follows

   function MYTHEMENAME_preprocess_node(&$variables) {
     if ($variables['view_mode'] == 'full') {
       $path = drupal_get_path('theme', 'MYTHEMENAME');
       drupal_add_css($path . 'MY-THEME-PATH');//PUT UR CSS FILE PATH
     }
   }
   

I tried this function twice with two different paths. First I gave path as '/css/mycustomcss.css' and second time I gave path as '/MYTHEMENAME/css/mycustom.css'.

UNFORTUNATELY NONE of these solutions worked for me. Am I missing something or is it something else?...please help.

Answer 1

I was missing one line in code. here is what you have to do. in your .info file under optional css code write the following code.

css[yourcustomcss.css][name] = Your custom products styles 
css[yourcustomcss.css][description] = This file holds all the product page CSS of your theme. 
css[yourcustomcss.css][options][weight] = 12 
settings[alpha_css][yourcustomcss.css] = 'yourcustomcss.css' 

Now go and enable your 'yourcustomcss.css' in Appearance/yourthemename/settings/toggle-styles

Answer 2

To create a subtheme, follow all 10 steps mention in this article.

To add your own custom CSS files, add them in ./MYTHEMENAME/MYTHEMENAME.info if you need minimal configuration.

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