Coloring for themes
What's the simplest way to implement a colour scheme for themes? I'm using the box_grey theme because it (initially) was much easier to achieve what I wanted withouth having to worry about graphocs.
But now it's a tad boring.
So I want to spruce it up. But from what little I know about CSS files you cant used named constants in there can you? The problem is it's a pain in the bum when you have to modify all of one colour for a particular set of elements, but not the same colour when it appears in another element.
As a programming hack, I would have thought to do something like this is possible:
[general-borders] = #000000
[general-text] = #dddddd
[special-borders] = #000000
[special-text] = #dddddd
[other-borders] = #000000
[other-text] = #ffffff
[header-background] = #ffffff
[header-text] = #000000
With some implementation like this if you only want to change the majority of things that are black you only have to change the one or two colour constants and it's replicated through the CSS. But as I'm aware, this isn't possible.
So back to my original question: How is it best to try an implement a colour scheme throughout a site? (purely because I like to be different and NOT use things out of the box ;^)
CSS Variables
Nope, no vars in CSS. But there is this php thingie you sure have heard of ;-).
foo.css:
<?php // Color settings$high = "#F00";
$low = "#0DEAD0"; ?>
a {
foo: bar;
color: <?php echo $high; ?>;
background: <?php echo $low; ?>;
}
You then just have to teach your webserver to filter .css-files through PHP, usually you can drop in a nice .htaccess for apache and it works.
I wonder why there is no theme using this. PHP is a general purpose template language after all, not just for HTML.
Shaun Inman has a nice solution
Without overlapping colors a sed replacement (find and replace) is simple.
When you do is when things get more sticky.
Shaun Inman has a nice solution
http://www.shauninman.com/plete/2005/08/css-constants
Alternatively, a faily simple solution would be having a /css/styles.php css template file that ob_start() wraps the output and writes out a styles.css file when you call it. You make changes there and visit the page to update the style.
This avoids having to modify webserver conf though does require web-server-process write permissions on the /css directory.
Just a thought.
Pseudo code whipped up, (not tested)
<?php
/**
* css template
* @author tclineks
*/
/* color templates */
$main_h1_color = '#eee';
$p_padding = '1px 6px';
ob_start();
?>
/**
* styles.css - main site stylesheet
*/
html { color: #333 }
h1 {
color: <?=$main_h1_color?>;
padding: 4px;
}
body p {
padding: <?=$p_padding?>;
}
<?php
$file_name = 'styles.css';
$output = ob_get_contents();
ob_end_clean();
if (is_writable($file_name)) {
if (!$handle = fopen($file_name, 'w')) {
echo "Cannot open file ($file_name)";
exit;
}
if (fwrite($handle, $output) === FALSE) {
echo "Cannot write to file ($file_name)";
exit;
}
echo "Success, wrote to $file_name\n<br /> $output";
fclose($handle);
}
else {
echo "The file $file_name is not writable";
}
?>
Perfect!
Hey that sounds perfect! I never thought of using PHP for a CSS file. So with a few seconds on Google I found this link which also includes the mod to the .htaccess file.
There's even a nice little bit of code to use cookies to remember someone's last style (but not required for drupal anyway - except for anon users I spose)
Man, I am NEVER going to get any sleep now!
Thanks trauma
Do realize client-side caching is an issue
Do realize client-side caching is an issue -- several suggestions at http://phpnuke.org/modules.php?name=PHP-Nuke_HOWTO&page=make-dynamic-css.html fail to recognize that.
Other than a possible time overhead
Other than a possible time overhead for really large css files, what other issues should I be aware of?
I see caching and correct
I see caching and correct cache-control as in Inman's solution as ideal when doing server-side php parsing of css.
IMO uneccessary re-parsing is a Bad Thing(tm).
If you're parsing every time there is time overhead, though with small files it will be negligible - as you realize.
Currently IE doesn't cache output at all and is waiting on the stylesheet every for every request (shows unstyled page initially).
Firefox is smarter about it. IE 5.5 doesn't like those styles much btw.
A possible middle-ground solution with your implementation would be a several hour cache-control timeout.
Though I hacked out that code above I feel I we're reinventing the wheel while exists CSS-SSC as a great solution.
I personally find it's format much more managable than inline php and it will be a boon as soon as a non-php-keen designer gets his hands on the stylesheets.
my .02
I'm writing something like this
but it's nowhere near ready.
What i'd recommend (and how i'm doing it), is creating a seperate layout.css and style.css file, where style.css ONLY has colours / etc.
And then creating a style.tpl.php from the style.css, printing the variables as mentioned in the other comment.
Then you need to :
1) create a new menu entry for your css..
i used style/output.css.
2) create a callback function, that does :
<?phpreturn theme('style', variable_get('my_colours', array()));
?>
3) create a phptemplate stub
<?phpfunction phptemplate_style($colours) {
return _phptemplate_callback('style', array('colours' => $colours));
}
?>
4) and then do a ..
<?phpdrupal_add_style('style/output.css');
?>
I did however run into issues because for some reason drupal_get_styles returns the styles in reverse order (boo)
--
The future is so Bryght, I have to wear shades.
Thanks Everyone
In the time the first person replied and I finished my reply, there's been more. They're all hinged on the same concept, and so that's what I'm going for. It's a much better idea than hand coding the whole thing.
The only annoying things I suppose is having to convert the existing css to php in the first place, but it'll be worth it for ease of changeability in the future.
In fact (if there's not already one) that could be a nice drupal mod, one that would modify a PHP sourced CSS page!
Once again. Thanks! Sometimes it would be much easier to see the forest if all those damn trees weren't in the way!
Restructure CSS
Well, there is another option... put all your colors together.
If your titles and links share the same color, do:
a:link, h1, h2 { color: red; }
Of course you still need to duplicate colors used in different contexts (foreground, background, border, ...) but those should be rare really.
And if you already thought of this and need something better, then good. It's just that many people forget the flexibility of CSS selectors.
--
If you have a problem, please search before posting a question.
Good Point
Another good point. Yes, I DID know about that, but had forgotten about it (as one does with age LOL) I haven't actually started doing it yet, I want to print out the whole css and go over it with a fine tooth comb. I might give consideration to that first before falling back on the php idea.
Thanks Steven
I think the Argeebee theme
I think the Argeebee theme already does this, so might be a good example to look at?
CSS Logic
Oh, i didn't mention this because I thought it to be obvious ;-). The PHP solution is more complex than simple css regroups, thats true, but also more powerful. Consider the case when you want have color A and you want to use it in different places and on different attributes:
a, p {
color: A;
}
table {
border-color: A;
}
div#important {
background-color: A;
}
which, if you look at the ARRGEBEE theme, is a common problem.
Additionally, PHP is able to do some logic: I'm still searching for the ultimate theme™ where you just do an
<?php$A = "#3466FF";
?>
Working on this now
I'm actually working on this exact thing now, it's just taking more time than I thought. There are problems associated with the approach, most notably is the fact that you have to also run drupal.css through the engine as well. (which I didn't really want to do)
So what I have done, is working from the boxgrey theme, I'm making my own and removing the drupal.css from the head (if I could find where the $head is created I would be happy as well!), and including all the graphics and styles of drupal.css in my own theme.
I initially started off by going through and changing all #000 (or #000000) to $myBlack and likewise for white and inserting
<code>background : <?php print $myBlack ?>;and now I am going through doing all the other colours. Once I'm done I think I _MIGHT_ do it as well for border styles and the like and all I have to do is change the values at the start of my .css and all is good.It's working so far...
Good luck
iek, sounds like you're going through a lot of trouble. Im only at the begining of theming my site, and I dont like drupal.css - it's quite intrusive (starting with the media="all" tag in the style definition - does a printout need thousands of background images?).
Keep us posted!
Not too bad
Well, it's a long way from finished, but it's certainly moving along. I did it as planned, and copied the drupal.css into my theme's css, and it went reasonably ok.
There are still some colours to fix up, As you can see, there's really only two colours at the moment and these could change, but the whole point was to make the css dynamic, which it now is.
It is based on the box_grey theme, but it has been severly hacked.
There is a small issue with Internet Explorer, everytime you visit a new page (and sometimes revisit older pages - although not usually), IE seems to want to rebuild the css style sheet. I have not turned caching on, and I haven't used the no-cache meta-tag, but it's still causing me problems. There's no dramas in Firefox though, loads perfectly as expected. If anyone knows a solution to this, it would be appreciated.
I have a lot of work to do, the style sheet is still a real mess, but I'm getting there.
Check it out at the link below.
Thanks
madivad
http://madivad.com
Which pages cause it to be rebuilt?
The building is done by php code(?), so I'd be surprised if it is only an IE issue?
Presumably, the php code that you are using is called whenever a page is loaded that contains that code. You could conditionally call that code based on - well I don't know what you are going to base it on [g]?.
When exactly do you want to generate a new css file? Do you intend for each user to be able to specify their own css? If so, what happens when two users log in with different css specs, do you generate and link a different css file for each user?
If you only want to call the code to specify a default css for the site then you would only ever call the code once wouldn't you? In which case you'd have a separate php file to run when needed?
PS: Your page looks very nice with just two colours! The font for MADIVAD really caught my eye!
anything using IE
tclinks pointed it out above recently (in http://drupal.org/node/36870#comment-70465 ). Unfortunately I had implemented it in total before realising it (since it is ff I use) and the IE pages can be annoying. I'm going to have to look more closely at it. It's a PITA, but I'm sure I'll come up with something.
I dont actually want to createa new page all that often, and what I've been thinking of doing is using the php to create the style sheet and then save the output so that it is static.
Dunno, just toying with it at the moment (and to be honest, I only just thought of that - and I see real merit in it)
My style sheet is a real mess, cause I had to combine the standard css (style.css) with the drupal default (it's very messy having it messing up my stuff! DOH!) anyway... I can have php generate the css required on my test server, save and upload the static file. I might even work on a way of automating it :)
Thanks for the positive comment on the two colours and font. It was a struggle to work out which way to go. Tried multiple colours and black and all sorts of stuff, and stumbled across that colour! Kinda loved it right off :)
madivad
http://madivad.com