Defining CSS constants using PHP

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

Post Reply
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Defining CSS constants using PHP

Post by hawleyjr »

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
Last edited by hawleyjr on Sun Jan 22, 2006 12:17 am, edited 1 time in total.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

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:

Code: Select all

<script src="javascripts/jsfile.php?someparam=someval"></script>
duder78
Forum Newbie
Posts: 6
Joined: Wed Dec 21, 2005 5:53 pm
Location: Ottawa, Ontario

Post by duder78 »

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 :

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>
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 :)
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post by hawleyjr »

You need to include the PHP file as such:


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>
duder78
Forum Newbie
Posts: 6
Joined: Wed Dec 21, 2005 5:53 pm
Location: Ottawa, Ontario

thx

Post by duder78 »

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)

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 }
..and

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>
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.
tylerh
Forum Newbie
Posts: 1
Joined: Thu Dec 22, 2005 2:50 pm

Post by tylerh »

Hi, duder78.

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'],
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

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 }
into "mystyles.css"

Then, you can include it in your HTML by doing this

Code: Select all

<style type="text/css">
   @import 'css.php'?file=mystyles'
</style>
Feel free to post any other questions you have :)

Tyler
duder78
Forum Newbie
Posts: 6
Joined: Wed Dec 21, 2005 5:53 pm
Location: Ottawa, Ontario

Post by duder78 »

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'

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'],

);

?>
'styles.css'

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 }
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 :

Code: Select all

<body bgcolor="#<?=$color[1]['a']?>"

blah blah blah

</body>
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! :D
Post Reply