Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

Adding PHP powered color control variables.

I’m not sure if this was a waste of time, but I’m not in love with the colors I’m using on my site. When I built the theme, I kind of knew I’d get tired of the colors, so I made an index at the top showing what colors were used, it looks like this:

/*
Colors Used:====================
dark brown:#85605d;
darkest brown:#70564F;
slate blue:#acb6bd
light blu:#e1f5ff
deep grey-blue :#637486
*/

This was helpful for using a find/replace method, but if I wanted to add dynamic controls to the theme I’d have to create a new stylesheet to override the original one in case I wanted to go with a different color scheme, which would be kind of time consuming, and not easily sustainable.

So I pulled everything out except the theme info from the style.css and included a php file called style.php, wrapped the stylesheet in a style tag, and added variables that are echoed throughout the file. Like so:

$lightColor1 = '#e1f5ff';
$medColor1 = '#637486';
$blogEntryText = '#333333';
$darkColor1 = '#acb6bd';
$color2 = '#70564F';

This allows me to easily tweak my colors, like an automatic find/replace, but I still am not handling my background images, which are also based around the same color scheme, so I added these lines:

$logoImage = ''. get_bloginfo('template_url') .'/images/logo-geekout.gif';
$banner1FoldLeft = ''. get_bloginfo('template_url') .'/images/bg-fold-blue-left.png';
$banner1FoldRight = ''. get_bloginfo('template_url') .'/images/bg-fold-right.png';
$banner2FoldLeft = ''. get_bloginfo('template_url') .'/images/bg-fold-brown-left.png';
$commentsBanner = ''. get_bloginfo('template_url') .'/images/bg-comments-banner.png';
$commentbgEven = 'url('. get_bloginfo('template_url') .'/images/bg-comments-odd-brown.png)';
$commentbgOdd = 'url('. get_bloginfo('template_url') .'/images/bg-comments-even-blue.png)';

Now I can get at my colors and a lot of my images quickly. This is kind of a precursor to something else I’m working on, but I thought I’d share.

Note: I realize I could use a CSS framework like Compass to create color variables, but that’s a different purpose than what I need. I want something I can get at later…through the WordPress backend.