Welcome to Particletree!

Introduction

Here at Particletree, we’re using very simple (but nice) php and css action to sequentially change the link colors of each post in the notebook section on the front page. The best thing about our method is the fact that we’re doing this without having to put a script inside the css file, which would result in losing the advantage of all that nice browser caching.

Here’s the secret. One css technique I’ve seen a lot of people forget about is the fact that you can attribute more than one class to any element in an html document.

For example, if you have in your CSS the following rules:

.article{
padding:1em;
border-bottom:1px solid #ccc;
}.red a{
color:#FF0000;
}

You can assign a div (or whatever element of your choosing) both css rules by separating them with a space like so:

<div class="red article"></div>

This div will now inherit both the .article properties and the .red properties. To make the whole thing dynamic, set up in your css the color classes you’re going to be using.

.red a{
color:#FF0000;
}.green a{
color:#666633;
}.yellow a{
color:#99FF66;
}

Next copy the following php code into the header (or anywhere before the color cycling will begin) of your html docment.

<?php
    $color = 0;    function cycleColor() { 
        global $color;
        $colorArray=array('red', 'green', 'yellow');
        if ($colorArray[$color] == null){$color = 0;}
        echo $colorArray[$color];
        $color++;
    }
?>

Kudos to Chris for helping me with this function and introducing me to global variables. Basically, the script creates a global variable called $color and runs sequentially through an array containing the names of the color classes. Everytime you call the function ‘cycleColor();’ the next class name is outputted. The line you’ll want to modify for your uses is this one:

$colorArray=array('red', 'green', 'yellow');

If you want to cycle through more colors or use different names for your classes, just change/add them to that array.

Now, just place <?php cycleColor();?> anywhere in the document you want to have the next color class displayed in the sequence. So instead of this:

<div class="red article"></div>

You’ll write:

<div class="<?php cycleColor();?> article"></div>

and boom, you’re done. I’m sure there’s clever people out there who can easily see how to modify this technique if you wanted to say base your colors on the author or even have them cycle through randomly.

For ASP Programmers

Because we’re all about the love here, Ryan has taken the time to convert the code for people running ASP on their servers. Here’s how your function should look:

<%
color = 0function cycleColor() 
    colorArray = array("red", "green", "yellow")
    if color = ubound(colorArray) + 1 then color = 0
    cycleColor = colorArray(color)
    color = color + 1
end function
%>

And the line you’ll want to add to you html document to cycle colors is going to be <%=cycleColor%>. So your html should look like the following:

<div class="<%=cycleColor%> article"></div>

Thanks Ryan.