Once again we’re experimenting with the look and feel of our site. I don’t like “under construction” pages so I hope you’ll bear with me as we move and repurpose some of our content and finalize our new look and feel. It’s the kind of design experience I usually like to rant about rather than create.
{ 0 comments }
Tutorial Difficulty: Moderate – requires basic CSS and PHP skills, requires PHP enabled webserver
CSS style sheets are wonderful things. They offer greater design control than traditional HTML and make it possible to change the look and feel of an entire website by changing only one file. Of course that power comes at a cost. CSS has a steep learning curve and editing a style sheet, especially one you didn’t create, can be a difficult process.
The good news is there is a solution to those problems that requires only a limited knowledge of PHP scripting to implement: using variables in your style sheets. The bad news is, of course, that CSS doesn’t allow for variables. This post will show you how to get around that limitation.
Using PHP to generate a CSS file.
One advantage of CSS is that your styles can be kept in a separate file from the pages that use them. This is simply a text file that ends with the .css suffix such as style.css. The suffix tells the server to treat the contents of the file as CSS. Unfortunately, the CSS standard doesn’t allow for variables within a .css file. The solution is to use a PHP file, such as style.php and include code to let the server know that the contents of the file should be treated as CSS. This can be accomplished by including the following line of PHP at the top of the style sheet;
<?php header(“Content-type: text/css”); ?>
Your style definitions can then follow so that the top of your style.php document looks something like this:
<?php header(“Content-type: text/css”); ?>
a:link { text-decoration : none; color : # #FF0000; }
a:active { text-decoration : underline; color : # #FF0000; }
a:visited { text-decoration : none; color : # #FF0000; }
a:hover { text-decoration : underline; color : #660000; }
Your .php style sheet will now function exactly like a .css one. We’ll get to the variables in a minute but first…
Linking to your .php style sheet
You can link to your .php style sheet exactly as you would a regular style sheet. Here’s the code I placed in the <head> section of my webpage:
<link href=”style.php” rel=”stylesheet” type=”text/css” />
Using variables in your style.php file
The advantage of a PHP style sheet is that it allows you to define variables and then use those variables throughout your style sheet. So, for the example I gave above where the a:link, a:active and a:visited styles all use the same color (#3366cc), we could define a “$linkColor” variable (The “$” before linkColor simply indicates it is a variable.) and use it in all three styles. The variable definition would look like this:
<?php header(“Content-type: text/css”);
$linkColor = ‘# #FF0000;
?>
Remember all PHP code must be contained within a php tag which opens with “<?php” or simply “<?” and closes with “?>”
We can now insert the variable into our css code like this:
<?=$linkColor?>
Notice the opening and closing php tags.
So the beginning of our CSS file now looks like this:
<?php header(“Content-type: text/css”);
$ linkColor = ‘# #FF0000;
?>a:link { text-decoration : none; color : <?=$ linkColor?>; }
a:active { text-decoration : underline; color : <?=$ linkColor?>; }
a:visited { text-decoration : none; color : <?=$ linkColor?>; }
a:hover { text-decoration : underline; color : #000021; }
Now to change the color of the a:link, a:active and a:visited links from red (#FF0000) to blue (#0000FF) we need only change the definition of $linkColor:
<?php header(“Content-type: text/css”);
$ linkColor = ‘# #0000FF;
?>
A word about variables and variable names
It should be easy to see how this trick can make editing your style sheets a lot easier. What’s less obvious (at least initially) is that, if you create a variable for every possible style, your variable list will soon become nearly as complicated and confusing as your original style sheet. Here are a couple tips to keep things simple:
That should get you started. In the next post, I’ll show how to take this one step further by using style variables in WordPress blog themes.
{ 2 comments }