Including a CSS file after the global.css when using the Omega theme

I've recently been creating a site which uses the Omega 3 theme along with  the Domain Access module. For those not familiar with the Domain Access module, it basically allows you to have multiple sites on one Drupal install with the relevant site being served according to the domain being accessed.

All the sites share one Omega sub-theme, but I wanted to include a custom CSS file, per a domain, that could overwrite the default global.css file where needed.

In order to do this I added the additional CSS files using a preprocess function. This worked fine, but I found the CSS files were being included before the global.css file, and therefore weren't overwriting the styles.

Including a CSS file after the global.css file

Step 1 - create a custom CSS file

Add a CSS file that you want included to your themes CSS folder - /sites/all/themes/myTheme/css. Lets say this is called myCSSfile.css.

Step 2 - add your preprocess function file

Create a file called preprocess-html.inc inside your preprocess folder in your sub-theme - /sites/all/themes/myTheme/preprocess/preprocess-html.inc
The preprocess folder is there by default with the Omega3 theme.

Step 3 - add this code to your preprocess-html.inc

<?php

drupal_add_css(path_to_theme() . '/css/myCSSfile.css' . $filename, array(
    'group' => 1000
));

The drupal_add_css function includes the custom CSS file that you've added to your /css folder.
The 'group' => 1000 bit will make sure that it is placed after the global.css file. Without this it appears before the global.css.

That should now work.

Including domain specific CSS after the global.css file

Step 1 - create a custom CSS file 

Similar steps to 1 above, but this time you will name your CSS file according to your URL. If your domain machine name is setup in the Domain Access configs as mysite_com, then add a css file to your css folder called mysite_com.css.

You can find out your domains machine name by editing the domain on the Domain Access config page - /admin/structure/domain

Step 2 - add your preprocess function file

Exactly the same as step 2 above. Create a file called preprocess-html.inc inside your preprocess folder in your sub-theme - /sites/all/themes/myTheme/preprocess/preprocess-html.inc

Step 3 - add this code to your preprocess-html.inc

<?php

$domain = domain_get_domain();
$filename = $domain['machine_name'] . '.css';

drupal_add_css(path_to_theme() . '/css/' . $filename, array(
    'group' => 1000
));

The first part figures out the domain name of the active site, and creates a filename from it.

The drupal_add_css bit then includes the CSS file that is named appropriately. 

 

See this post for more info on how to include IE specific CSS and that sort of thing. 

Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +9 years.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.