UPDATE: The colour-changing style sheets mentioned here are no longer in use, but the code below should still serve as a good example.
You might have noticed lately that the colour-scheme of this site changes each time you click a link or reload a page (currently we have blue, pink, and green). This is something easily accomplished with just an extra 2 tiny CSS files, and a little bit of PHP.
If you’ve read my previous article — WordPress And A Horizontal Baseline Pt.1 — you are already familiar with the CSS that forms the foundation of this site. What we’re going to do first is strip out anything to do with colour from the CSS and put it in it’s own separate file that we’re going to call blue.css.
a:active, a:hover, .commentlist a:hover, .commentlist a:active, .commentlist cite a:hover, .commentlist cite a:active, #recent-comments a:hover, #related-posts a:hover, .lastfm a:hover, #footer a:hover, #footer a:active, .commentlist pre a:hover, .commentlist pre a:active {color:#34B0F8;}
#menu ul li a:hover, #menu ul li a:active {background:#34B0F8;}
.entry p a:hover img, .entry p a:active img {border:1px solid #34B0F8;}
a.feature:hover {border-color:#34B0F8;}
Then, after a little messing around with the colour tool in Photoshop, we know the hex code to edit in for pink.css.
a:active, a:hover, .commentlist a:hover, .commentlist a:active, .commentlist cite a:hover, .commentlist cite a:active, #recent-comments a:hover, #related-posts a:hover, .lastfm a:hover, #footer a:hover, #footer a:active, .commentlist pre a:hover, .commentlist pre a:active {color:#F834E3;}
#menu ul li a:hover, #menu ul li a:active {background:#F834E3;}
.entry p a:hover img, .entry p a:active img {border:1px solid #F834E3;}
a.feature:hover {border-color:#F834E3;}
As well as green.css.
a:active, a:hover, .commentlist a:hover, .commentlist a:active, .commentlist cite a:hover, .commentlist cite a:active, #recent-comments a:hover, #related-posts a:hover, .lastfm a:hover, #footer a:hover, #footer a:active, .commentlist pre a:hover, .commentlist pre a:active {color:#46F834;}
#menu ul li a:hover, #menu ul li a:active {background:#46F834;}
.entry p a:hover img, .entry p a:active img {border:1px solid #46F834;}
a.feature:hover {border-color:#46F834;}
The next part is to write the PHP, which is just a simple random function followed by an if-else statement. The code must go between the <head> and </head> tags in your header.php file. It’s also a good idea to make sure that it is after you call your main CSS (style.css) file.
<?php
$random = rand(1,3);
if ($random == 1) {
echo "<link rel='stylesheet' href='http://yourwebsite.com/wp-content/themes/yourtheme/css/pink.css' type='text/css' media='screen' />";
} elseif ($random == 2) {
echo "<link rel='stylesheet' href='http://yourwebsite.com/wp-content/themes/yourtheme/css/green.css' type='text/css' media='screen' />";
} else {
echo "";
}
?>
As the main CSS file already provides the styles for the colour blue, there is no need to call it again in our PHP function. Now every time that somebody visits the site there is a ⅔ chance that they will get a different colour! To add any more colours you will need to change the 3 in $random = rand(1,3); to a larger number, and add more elseif statements.