Load domain-specific CSS file on a multisite

Question

I have a Multisite Drupal 7 install.

I use one theme for all sites, and it lives at sites/all/themes.

Each domain has its own settings for the theme where you specify classes so you can target each in the css. This allows me to not have to copy over the theme to each sites/site1/themes, and to not have to create sub themes for each one. Less overhead.

So I have 1 giant css file, that contains all the css tweaks for each sites look.

But I would like to separate each sites css into its own file.

So I can have site1.css, site2.css, site3.css, and so on. They would all need to be located in the theme at sites/all/themes.

How would I tell Drupal to load site1.css when on site2.com...and so on?

Answer 1

It's kinda messy, but you might be able to do something like the following in a custom module:

function mymodule_preprocess_html() {
  $site = $_SERVER['HTTP_HOST'];

  switch ($site) {
    case 'siteurl1':
      //Add your CSS for site 1 here with drupal_add_css
      break;
    case 'siteurl2':
      //Add your CSS for site 2 here with drupal_add_css
      break;
    case 'siteurl3':
      //Add your CSS for site 3 here with drupal_add_css
      break;

  }
}

Or if you specifically want it in your theme files you could do the same in template.php

function mytheme_preprocess_html(&$variables) {
  $site = $_SERVER['HTTP_HOST'];

  switch ($site) {
    case 'siteurl1':
      //Add your CSS for site 1 here with drupal_add_css
      break;
    case 'siteurl2':
      //Add your CSS for site 2 here with drupal_add_css
      break;
    case 'siteurl3':
      //Add your CSS for site 3 here with drupal_add_css
      break;

  }
}

To be honest I think you could use hook_preprocess_page in the module as well.

Many ways to skin a cat and all that jazz.

Answer 2

I have had somewhat needs with dynamically loaded files. Instead of using a switch, I do something like this in an appropriate hook.

Essentially, you name your file based on the criteria you are testing against. In your hook, check to see if that file exists, and if so load it. If not, do nothing or load a default.

Something like this would be a starting point:

function mytheme_preprocess_html (&$variables)
{
  $host = $_SERVER["HTTP_HOST"];
  $filename = "something-{$host}.css";
  $default = "something.css";
  $path = drupal_get_path("theme", "mytheme");

  $options = array();

  if (file_exists($_SERVER["DOCUMENT_ROOT"] . "/{$path}/css/{$filename}")) {
    drupal_add_css("{$path}/css/{$filename}", $options);
  } else {
    drupal_add_css("{$path}/css/{$default}", $options);
  }
}

In your case, I would likely try to be a little smarter about the file_exists thing, and do something to try to save it out as a theme variable.

Answer 3

Another solution :)

// Allow a site-specific user defined CSS file (useful for multisite installations):
// If a CSS file "local-[SITE].css" is residing in the "css" directory (beside "local.css"),
// it will be loaded after "local.css". SITE is the site's host name, without leading "www".
// For example, for the site http://www.mydomain.tld/ the file must be called called "local-[mydomain.tld].css"
global $base_url;
$site = preg_replace("/^[^\/]+[\/]+/", '', $base_url);
$site = preg_replace("/[\/].+/", '', $site);
$site = preg_replace("/^www[^.]*[.]/", '', $site);
drupal_add_css(path_to_theme() . '/css/local-[' . $site . '].css', 'theme', 'all');

Answer 4

Have you tried context + context add assets?

It makes it substantially easier. No hard coding needed either. I haven't tried it with multi-sites though.

From Project Page:

This module will add a reaction within context to add theme, module, or custom folder files to your page(s).

Ever wanted to quickly add a css file to a theme? Include a js file on only one page (or section?)

Make using multiple CSS files a breeze with this module and harness the power of Context in your theme!