CSS Variables... Simple Way to Track Colors

[mriksman]

If your site may go through multiple changes (changing colors), then changing the stylesheet.css to a php file is a neat little trick.

 

First rename stylesheet.css to stylesheet.php, then add the following lines

 

<?php header("Content-type: text/css");

 

// Add variable color names here

 

$infoBoxHeader = '#8C2067';

 

?>

 

Then (unfortunately) go to each php file in the same directory. These are the 'html' pages. Find the reference to stylesheet.css, and change it to stylesheet.php

 

Now, assign this tag to where the colors normally sit.. So;

 

TR.headerNavigation {

background: <?=$infoBoxHeader?>;

}

 

$infoBoxHeader can be used for all the areas that require the same color as the info box (header and footer...)

 

Now in this stylesheet, instead of having to change all the colors everytime you need to change color, you just change the variable up the top!

 

Also, you can use shades of it. So you can use

 

TR.headerNavigation {

background: <?=$infoBoxHeader->bg['-2'] ?>;

}

 

Mike

[mriksman]

Also, you can use shades of it. So you can use

 

TR.headerNavigation {

  background: <?=$infoBoxHeader->bg['-2'] ?>;

}

 

Mike

<{POST_SNAPBACK}>

 

Actually I lie... bit more too it than that. So don't listen to that shading bit...