| « B2evolution 1.10.3 & 2.4.0 HOWTO: use an external SMTP mailserver | New item in blogroll » |
Conditional CSS through PHP
Wouldn't it be nice to be able to change the skin's appearance based on some condition. In this tip & trick I'm going to change the colour of this post to red at daytime and blue at night. Times are local CET (Europe).
The nice thing about PHP is that you can deploy it everywhere in the page. So why not within the CSS file.
First you want to point to this special file. Somewhere in the header (for B2evo that's ../blogs/skins/YOURSKIN/_html_header.inc.php) make this call:
Code:
<link rel="stylesheet" href="phpstyle.php" type="text/css" /> |
Every PHP statement must be within a PHP file. We create this phpstyle.php file and start it with:
Code:
<?php header("Content-type: text/css"); ?> |
That's about it. The file acts as any other CSS file, but since it's a PHP file we can interweave (we say 'lard' in Holland) with any thinkable condition. It's like serverside JavaScript.
On with the task I've set. Let's call the server time:
PHP:
$time_at_server = date(G); | |
$time_in_europe = $time_at_server + 9; |
Now the condition:
PHP:
if ($time_in_europe >= 6 && $time_in_europe < 18 ) | |
{ | |
// It's daytime | |
$sun_is_shining = 1; | |
} | |
else | |
{ | |
// it's night | |
$sun_is_shining = 0; | |
}; |
This is the complete phpstyle.php:
PHP:
<?php header("Content-type: text/css"); ?> | |
<?php | |
$time_at_server = date(G); | |
$time_in_europe = $time_at_server + 9; | |
// Found a bug. This is the fix: | |
if ( $time_in_europe > 23 ) | |
{ | |
$time_in_europe = $time_in_europe - 24; | |
} | |
if ( $time_in_europe >= 6 && $time_in_europe < 18 ) | |
{ | |
// It's daytime | |
$sun_is_shining = 1; | |
} | |
?> | |
| |
.day_or_night p { | |
<?php | |
if ( $sun_is_shining ) | |
{ | |
echo ( "color: red; \n" ); | |
} | |
else | |
{ | |
echo ( "color: blue; \n" ); | |
} | |
// output | |
/** | |
* .day_or_night p { | |
* color: red; | |
* } | |
* | |
*/ | |
?> | |
} |
I've started this post with <div class=" day_or_night"> and ended it with </div>.
That's it. I Hope you like it. Can you think of some other uses for this conditional css statements? Leave a comment if you do.
Have fun.
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)
nice $+&, neat explanation.. thank you 
Comment feed for this post