I am looking for an answer to a quite specific theming question:

I have a Drupal multi-site installation. (Well, not yet actually, but I want clarity on my question first before I procees. Just asume that I have one.)

I have a team, called 'Theme', which has various files in the directory /sites/all/themes/Theme. In this folder, there are the .tpl.php files and a few folders like css/ and scripts/.

Then, I have 2 sites, which use the same theme: Theme. These sites are located in /sites/default and /sites/alternative.

What I want to do now is providing a file, colors.css in each sites directory (so /sites/default/colors.css and /sites/alternative/colors.css with something like:

@base: blue;
@light: lightblue;
@dark: darkblue;

This file should be read and these 'variables' should replace the variables in the css files located in /sites/all/themes/Theme/css so that I simply can define the colors in each site, without having to modify or to overwrite bits of the css files located in /sites/all/themes/Theme/css.

I already tried a few things, one which could work but I didn't like enough, so I am looking for a general, good and most important, fast method.

What I already have achieved and what (I think) is very usefull:

function theme_css_alter(&$css) {
    $css['sites/all/themes/Theme/css/colors.css']['data'] = conf_path() . '/colors.css';

This function changes the default colors.css provided in /sites/all/themes/Theme/css/colors.css and replaces it with /sites/default/colors.css OR /sites/alternative/colors.css, depending on where you are.

I have already tried the following:

  • Used PHP to get the correct colors.css file and use PHP-variables all over my CSS-files. This should actually work. But I don't quite like it because you end up with a lot of .php files which are actually .css and a lot of ugly php-syntax in the css files.
  • I tried the lessphp drupal plugin. This did it's work for replacing the variables but the caveat was this: If I want to include the correct colors.css file, I need to use php. Therefore, my less file needs to have the extension PHP. LESS is build so that you can only 'parse' files with the less extension, so this wouldn't work. I quite liked this though, it used some nice caching which would also be the quickest way. What I could do here is dive into the lessphp library and change the code that says 'only .less files please!' to also accept .less.php files.

So, my questions are:

  • Does anybody see a different approach that would also work and is fast?
  • If yes: please elaborate
  • If no: Which of my previous methods do you fancy and why? What would be the best approach?

Well, I found out something that is quite useful:

Instead of trying to import the color.less file in each 'basic' theme css file, I do it the other way around: I import all the basic theme css files in colors.less, like this:

@basis: blue;
@donker: black;
@licht: pink;

@import "../all/themes/Theme/css/basic.less";

Then I had to remove all the stylesheet definitions in the .info file and changed the template function to:

$css = drupal_add_css(conf_path() . '/colors.less', array('group' => CSS_THEME, 'weight' => 115, 'browsers' => array('IE' => 1, '!IE' => 1), 'preprocess' => FALSE));

No hassle with php, and it works, is cached when I want it, and fast!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.