PHP in CSS: Dynamic Background Color... Ack!!!!!

mhulse

Title: PHP in CSS: Dynamic Background Color... Ack!!!!!

Hola folks!

Here is my CSS PHP code:

<?php
//file name: optional_css.php

('Content-type: text/css');

function css_color($link)
{
	$pages = array ("Home" => "home.php", "About" => "about.php", "Folio" => "folio.php", "Resume" => "resume.php", "Code" => "code.php", "Forum" => "forum.php", "Contact" => "contact.php", "Links" => "links.php");

$page_colors = array ("Home" => "#0066cc", "About" => "#0066ff", "Folio" => "#009988", "Resume" => "#6666cc", "Code" => "#006622", "Forum" => "#cccccc", "Contact" => "#009999", "Links" => "#000000");
$my_colors = $page_colors[$link];

$page = str_replace("/", "", $_SERVER['SCRIPT_NAME']); 

if($page == $pages[$link]) {
		echo "$my_colors";
} else {
	;
}
}
?>

body {
background-color: <? css_color("Home"); css_color("About"); css_color("Folio"); css_color("Resume"); css_color("Code"); css_color("Forum"); css_color("Contact"); css_color("Links"); ?>;
}

I use this line of code to import the above CSS in my header include:

<style type=\"text/css\" media=\"screen\"> @import \"css/optional_css.php\"; </style>

I want to use one CSS file to dynamically load-in a different CSS background color depending on the page that is loaded...

The above code works if I change it to this (but is not (as) dynamic):

<?php

header('Content-type: text/css');

$color1 = "#FF0000";
?>

body {
background-color: <? echo $color1; ?>;
}

Sure, I could code it so each page loads in a diff CSS file for each page of my site, but I would like to just use one CSS file to set the body background style of each main page/section...

When it comes to the first block of code (one with function), am I doing things right? I know that the basic syntax of my function "function css_color($link)" works for other dynamic parts of my code (Current Menu Linkage, Dynamic Loading Header Content...)

The only suggestion I have recieved so far (from other forum) is this:

The css file is loaded into cache. How you would do this is to define seperate classes for different colors, then reference the class you want in your dynamic php code.

Can someone elaborate on the above quote for me? I think I get it, but I am having troubles writing the algorithm.

Any suggestion?
Any help would be greatly appreciated.
Thanks in advance.
Cheers
Micky

Weedpacket

You forgot to say what's happening when it goes wrong 🙂

Apart from the typo where you leave out the "header" function name, your problem is that $page is going to be "optional_css.php", because that is the script that's running.

You could use $_SERVER['HTTP_REFERER'] instead, but that's less reliable, and I'd instead suggest perhaps

and using $_GET['page'] to see which page is being asked for. If the pages are PHP-generated, then the bit after the '=' can of course be generated dynamically, if you don't want to hard-code "Home" into home.php.

You seem to have a funny approach to your coding. What's wrong with:

<?php
//file name: optional_css.php

function css_color()
{
	$page = $_GET['page'];
    $page_colors = array ("Home" => "#0066cc", "About" => "#0066ff", "Folio" => "#009988",
		"Resume" => "#6666cc", "Code" => "#006622", "Forum" => "#cccccc",
		"Contact" => "#009999", "Links" => "#000000");

if(isset($page_colors[$page]))
	return $page_colors[$page];
else
	return 'black'; // In case something bogus is passed.

}
?>

body {
background-color: <?php echo css_color(); ?>;
}

It would save on a lot of duplication.

bubblenut

I tend to be against using PHP in client side included files, it seems to go against one of their major advantages, the fact that they can be cached by the browser. There are two different ways of solving this that I can think of.

Multiple Stylesheets
Have one generic stylesheet which contains site-wide styles and then a different one per page with page specific styles. The main stylesheet would only need to be loaded once and the page stylesheets would only need to be loaded the first time each page is loaded.
Body Classes
Have multiple body rules for different classes and then have each page set a class (or multiple classes) on the body tag.
```
/*Main Body*/
body {
  margin:0; padding:0;
  /* ... */
}

body.index {
  background-color:white;
}

body.resume {
  background-color:black;
}
```
Larger initial page load but then it's cached.

I'd be inclined to go for method 1 to cut the initial page load time.

Just another point of view 🙂
Bubble

Weedpacket

Here are a couple more ways of writing cacheable yet dynamic CSS.

Modify the script so that it generates and saves .css files in the appropriate place. Run it by hand, once.

Configure the server to rewrite requests for "css/FOO.css" into requests for "css/optional_css.php?page=FOO", and in the script include headers to allow caching and indicate a "last-modified" time of ... when the optional_css.php file was last modified. The browser will cache the generated CSS files, and download the updated ones as and when they change.

bubblenut

That second method sounds sweet, I'm definately trying that when I get home 😃