Defining CSS constants using PHP
Moderator: General Moderators
Defining CSS constants using PHP
I've always complained that there is no way to use constants with CSS. Here is a great solution.
http://tylerhall.chattablogs.com/archives/031274.html
http://tylerhall.chattablogs.com/archives/031274.html
Last edited by hawleyjr on Sun Jan 22, 2006 12:17 am, edited 1 time in total.
you can also pass headers for a javascript file which I do fairly frequently to insert dynamic values for such things as drop down menus.
ie:
ie:
Code: Select all
<script src="javascripts/jsfile.php?someparam=someval"></script>Hey all,
This is my first post. I'm relatively new to Web design, but have a good grasp of client-side scripting and HTML. I've decided recently to explore server-side scripting technologies like .ASP and PHP.
My question is, i'm trying to convert my existing .css file to .php in order to use variables to facilitate updates to my file.
I used http://www.barelyfitz.com/projects/csscolor/ as a starting point and have been absorbing the HP case example ( http://www.barelyfitz.com/projects/cssc ... -study-hp/ ) to try and enlighten myself.
Well, I'm stuck and am unsure what is wrong and how to proceed. I'm enclosing an example of my CSS file (csscolor.php) and the document which is trying to make use of the styles (refinePHP.php)
Here's the 'csscolor.php' style sheet document :
...and here is the document in which i'm trying to make use of the styles :
In the above example, I tried using the $color variable directly in trying to assign a background color in the <BODY> tag, and I also tried accessing the .blueBox class in the <DIV> tag.
I appreciate any help that can be offered and I am open to constructive critisism
This is my first post. I'm relatively new to Web design, but have a good grasp of client-side scripting and HTML. I've decided recently to explore server-side scripting technologies like .ASP and PHP.
My question is, i'm trying to convert my existing .css file to .php in order to use variables to facilitate updates to my file.
I used http://www.barelyfitz.com/projects/csscolor/ as a starting point and have been absorbing the HP case example ( http://www.barelyfitz.com/projects/cssc ... -study-hp/ ) to try and enlighten myself.
Well, I'm stuck and am unsure what is wrong and how to proceed. I'm enclosing an example of my CSS file (csscolor.php) and the document which is trying to make use of the styles (refinePHP.php)
Here's the 'csscolor.php' style sheet document :
Code: Select all
<?php
header("Content-type: text/css");
/* setup the data structure for Refine's colour scheme
$refineColor = array(
'grey01' => array(
'a' => 'e6e6e6',
'b' => 'cccccc',
'c' => '666666'),
'blue01' => array(
'a' => '66ccff',
'b' => '3399cc',
'c' => '006699'),
'blue02' => array(
'a' => '99ccff',
'b' => '6699cc',
'c' => '336699'),
'green01' => array(
'a' => '99cccc',
'b' => '669999',
'c' => '336666'),
'green02' => array(
'a' => 'cccc99',
'b' => '999966',
'c' => '666633'),
'orange01' => array(
'a' => 'ffcc66',
'b' => 'ff9900',
'c' => 'ff6600'),
'orange02' => array(
'a' => 'ff9966',
'b' => 'cc6633',
'c' => '993300'),
'red01' => array(
'a' => 'ff9999',
'b' => 'cc6633',
'c' => 'cc3333'),
'red02' => array(
'a' => 'ffcccc',
'b' => 'cc9999',
'c' => '996666'),
);
/* chosen colour scheme
$color = array(
1 => $refineColor['grey01'],
2 => $refineColor['blue02'],
3 => $refineColor['green01'],
);
?>
a { text-decoration: none}
img { border: none }
body { font-family: verdana;
font-size: 12pt }
.blueBox { background-color: #<?=color[3]['c']?>;
border: 2px outset gray;
padding: 8px 12px;
font-size: 8pt;
color: #<?=$color[3]['c']?>}
div.header { width: 100%;
vertical-align: middle;
height: 125px }
div.footer { width: 100%;
height: 50px }...and here is the document in which i'm trying to make use of the styles :
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" media="screen" href="csscolor.php">
<?php
include_once("csscolor.php");
?>
<head>
<title>Refine Industries Inc. - </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#<?=$color[2]['a']?>">
<div class="blueBox">
<p>Yadda yadda yadda yadda yadda
</div>
</body>I appreciate any help that can be offered and I am open to constructive critisism
You need to include the PHP file as such:
From http://tylerhall.ws/css/constants/
From http://tylerhall.ws/css/constants/
Code: Select all
<html>
<head>
<style type="text/css">
@import 'css.php?file=main'
</style>
</head>
...
</html>
Or, if you prefer
<html>
<head>
<link rel="stylesheet" type="text/css"
href="css.php?file=main"
media="screen, print" />
</head>
...
</html>thx
Thanks hawleyjr... I've changed my code to reflect your recommendation. Still can't quite get this going. I'm going to post my updated files with the hope that you or someone else might spot the error(s) and perhaps give an example of it's application.
css.php (i removed the inital comments from Tyler to shorten the code a bit)
..and
All i'm trying to do in the latter code, is to have the body's color reflect what I set it to in the css.php file, which was a shade of green. Babysteps right...I don't want to proceed until I get the syntax and proper usage down pat.
css.php (i removed the inital comments from Tyler to shorten the code a bit)
Code: Select all
<?php
//Only open local files which we own...
$cssFile = $_GET['file'] . ".css";
if(eregi("([a-z]+)://", $cssFile) || fileowner($cssFile) != getmyuid())
die("You may only use local files which you own!");
// Grab the CSS file's contents
$css = implode(" ", file($cssFile));
// Now process any style-sheet imports we have...
while(preg_match_all("/@import.*'(.*)'/", $css, $imports) > 0)
{
for($i = 0; $i < count($imports[1]); $i++)
{
$newfile = implode(" ", file($imports[1][$i]));
$css = str_replace($imports[0][$i], $newfile, $css);
}
}
// Extract our constant names and their values
preg_match_all("/(\\$\w+).*=.*\'(.*)\'/", $css, $vars);
// Delete all the $constant = $value lines
$css = preg_replace("/\\$\w+.*=.*\'.*\'/", "", $css);
// Do the replacements
for($i = 0; $i < count($vars[1]); $i++)
$css = preg_replace("/\\{$vars[1][$i]}/", $vars[2][$i], $css);
// Send the headers and the new CSS file to the browser...
// (Or, you could just cache the file to disk instead.)
header("content-type:text/css");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 360));
echo $css;
// Special note to Digg users: This isn't a one-size-fits-all method. This
// is just an example of what can be done - something to try on a rainy day.
// Now, go back to arguing about Linux distros.
/* setup the data structure for Refine's colour scheme
$refineColor = array(
'grey01' => array(
'a' => 'e6e6e6',
'b' => 'cccccc',
'c' => '666666'),
'blue01' => array(
'a' => '66ccff',
'b' => '3399cc',
'c' => '006699'),
'blue02' => array(
'a' => '99ccff',
'b' => '6699cc',
'c' => '336699'),
'green01' => array(
'a' => '99cccc',
'b' => '669999',
'c' => '336666'),
'green02' => array(
'a' => 'cccc99',
'b' => '999966',
'c' => '666633'),
);
/* chosen colour scheme
$color = array(
1 => $refineColor['grey01'],
2 => $refineColor['blue02'],
3 => $refineColor['green01'],
);
?>
a {text-decoration: none}
img { border: none }
body { font-family: verdana;
font-size: 12pt;
background-color: #<?=$color[3]['a']?> }
.blueBox { background-color: #<?=$color[3]['c']?>;
border: 2px outset gray;
padding: 8px 12px;
font-size: 8pt;
color: #<?=$color[3]['c']?>}
div.header { width: 100%;
vertical-align: middle;
height: 125px }
div.footer { width: 100%;
height: 50px }Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@import 'css.php'?file=main'
</style>
<title>Refine Industries Inc. - </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>Hi, duder78.
I looked over your script. Here are a few changes that should help.
In this section...
you are using "/*" to mark your comments. In PHP, every line after a /* and up until it finds a */ becomes a comment. What you need to do is change them both to a double slashes //.
Next, your stylesheet rules need to be in a seperate file by themselves. So, put
into "mystyles.css"
Then, you can include it in your HTML by doing this
Feel free to post any other questions you have 
Tyler
I looked over your script. Here are a few changes that should help.
In this section...
Code: Select all
/* setup the data structure for Refine's colour scheme
$refineColor = array(
'grey01' => array(
'a' => 'e6e6e6',
'b' => 'cccccc',
'c' => '666666'),
'blue01' => array(
'a' => '66ccff',
'b' => '3399cc',
'c' => '006699'),
'blue02' => array(
'a' => '99ccff',
'b' => '6699cc',
'c' => '336699'),
'green01' => array(
'a' => '99cccc',
'b' => '669999',
'c' => '336666'),
'green02' => array(
'a' => 'cccc99',
'b' => '999966',
'c' => '666633'),
);
/* chosen colour scheme
$color = array(
1 => $refineColor['grey01'],
2 => $refineColor['blue02'],
3 => $refineColor['green01'],Next, your stylesheet rules need to be in a seperate file by themselves. So, put
Code: Select all
a {text-decoration: none}
img { border: none }
body { font-family: verdana;
font-size: 12pt;
background-color: #<?=$color[3]['a']?> }
.blueBox { background-color: #<?=$color[3]['c']?>;
border: 2px outset gray;
padding: 8px 12px;
font-size: 8pt;
color: #<?=$color[3]['c']?>}
div.header { width: 100%;
vertical-align: middle;
height: 125px }
div.footer { width: 100%;
height: 50px }Then, you can include it in your HTML by doing this
Code: Select all
<style type="text/css">
@import 'css.php'?file=mystyles'
</style>Tyler
Wow, I had it all wrong. Thank you for the prompt response Tyler!
I've separated the stylesheet like you mentionned, still stumped but getting closer.
I'm still confused as to the proper way to apply this stuff.
Here's what I have at present :
'css.php'
'styles.css'
I believe that the code above is almost correct. Assuming this is the case, can I access the PHP variables located in css.php from the main document? Like this :
Ideally I believe one wouldn't be best off doing it that way, but i'm curious as to whether it's possible.
Thanks in advance!
I've separated the stylesheet like you mentionned, still stumped but getting closer.
I'm still confused as to the proper way to apply this stuff.
Here's what I have at present :
'css.php'
Code: Select all
<?php
// setup the data structure for Refine's colour scheme
$refineColor = array(
'grey01' => array(
'a' => 'e6e6e6',
'b' => 'cccccc',
'c' => '666666'),
'blue01' => array(
'a' => '66ccff',
'b' => '3399cc',
'c' => '006699'),
'blue02' => array(
'a' => '99ccff',
'b' => '6699cc',
'c' => '336699'),
'green01' => array(
'a' => '99cccc',
'b' => '669999',
'c' => '336666'),
'green02' => array(
'a' => 'cccc99',
'b' => '999966',
'c' => '666633'),
'orange01' => array(
'a' => 'ffcc66',
'b' => 'ff9900',
'c' => 'ff6600'),
'orange02' => array(
'a' => 'ff9966',
'b' => 'cc6633',
'c' => '993300'),
'red01' => array(
'a' => 'ff9999',
'b' => 'cc6633',
'c' => 'cc3333'),
'red02' => array(
'a' => 'ffcccc',
'b' => 'cc9999',
'c' => '996666'),
);
// chosen colour scheme
$color = array(
1 => $refineColor['grey01'],
2 => $refineColor['blue02'],
3 => $refineColor['green01'],
);
?>Code: Select all
a { text-decoration: none }
img { border: none }
body { font-family: verdana;
font-size: 12pt }
.blueBox { background-color: #<?=$color[3]['c']?>;
border: 2px outset gray;
padding: 8px 12px;
font-size: 8pt;
color: #<?=$color[3]['c']?>}
div.header { width: 100%;
vertical-align: middle;
height: 125px }
div.footer { width: 100%;
height: 50px }Code: Select all
<body bgcolor="#<?=$color[1]['a']?>"
blah blah blah
</body>Thanks in advance!