detouring css through php
(
July 5, 2006 at 12:11 pm)
· Filed under css
, design , php
One thing that tends to drive me nuts when putting a css file together is repetition of the colours. CSS has no mechanism to define constants or variables and it can be pretty tiresome playing around with resetting the colours and such when tweaking a web page.
So I made mine into a php file. There’s a few tricks, but it’s very straightforward. First, you call it in your main html file (or output) as with any other css file, only with it’s name:
<link rel="stylesheet" href="k9web-css.php" type="text/css" media="screen" />
Now here’s the fun part. The first line in the php file must now be:
<?php header("Content-type: text/css");
/* this tells the browser this is a css file! */
?>
Otherwise the file is sent as text/html and I get unhappy junk printed out. With that out of the way, the top of the file can contain something like this:
<?php
/* define colours, etc here */
$darkgrey="#555";
$lightgrey="#ccc";
$offwhite="#f6f6f6";
$cream="#ffffe7";
$brightred="#ff0000";
$darkred="#aa0000";
/* change these to change color scheme */
$bgcolor=$cream;
$fontcolor=$darkgrey;
$linkcolor=$darkred;
$hoverlinkcolor=$brightred;
?>
Now I proceed with the rest of the css definitions as usual, but when I want to use a defintion, I pop it in like this:
a:hover {
color: <?php echo $hoverlinkcolor ?>;
text-decoration: underline;
}
Looks like someone else (actually many people; try googling on “variables in css”) was addressing the same problem. My solution is pretty straightforward, although it does require access to php, etc. This solution hides it but amounts to using php to parse and replace behind the scenes, so I think my solution is at least more direct…
Emilya said,
August 2, 2006 @ 11:40 am
Hi Cindy,
This looks like the easiest solution I found but I can’t make it work! Does it work in all browsers? Even with the css line on top the file is just not read as css.
Can you post the code of your css/php file so I can see if I’m missing something?
Thank you so very much!
Emilya
Cindy said,
August 2, 2006 @ 11:52 am
Lunch hour! Good timing
I’m not sure what sort of problem you’re having. If you go to http://www.k9web.com and view the source, you’ll see the link to the k9web-css.php file in that html file. Obviously, though you can’t see the file itself, it will have already gone through the php script to look like a plain css file.
The very first line in the k9web-css.php file is as I describe above. Note that it really does have to be the first line — no spaces, no blank lines, nothing, above that. If you have a blank line at the top of a php file in general, it hates that.
If that doesn’t seem to be helping, perhaps you can point me toward your example that doesn’t work so I can look at it more closely? You can comment here, or email me (use the contact form at the top).
Cheers,
–Cindy
Cindy said,
August 2, 2006 @ 11:57 am
Top of the file:
<?php header("Content-type: text/css");
/* this tells the browser this is a css file! */
?>
<?php
/* define colours, etc here */
$darkgrey="#555";
$lightgrey="#ccc";
$offwhite="#f6f6f6";
$cream="#ffffe7";
$lightred="#cf8886";
$brightred="#ff0000";
$darkred="#aa0000";
/* change these to change color scheme */
$bgcolor=$cream;
$fontcolor=$darkgrey;
$linkcolor=$darkred;
$hoverlinkcolor=$brightred;
?>
/* Basic Styling */
body {
margin: 4em;
/*border-left: 2px solid <?php echo $lightred ?>;*/
/*border-right: 2px solid <?php echo $lightred ?>;*/
padding: 0px;
font-size: 85%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Arial, sans
-serif;
color: <?php echo $fontcolor ?>;
background-color: <?php echo $bgcolor ?>;
}
The rest after this is simply more css for the various h1, etc, entities. All the work’s been done at the top.
Norman Gerre said,
December 24, 2006 @ 12:48 am
You might be interested in Shaun Inman’s CSS Constants, which does much the same thing in a more CSS-like way.