CSS And PHP: Switching Themes - Continued
Ok, so now what? How do we load the filesheet? Let's have a look.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Theme Switcher :: Marc Plotz</title>
<link rel="stylesheet" href="css/'.$cssFile.'.css" type="text/css" />
</head>
<body>
</body>
</html>
Notice the <link rel="stylesheet"
href="css/'.$cssFile.'.css" type="text/css" />
part? We are now using the $cssFile to load the
stylesheet dynamically. But what about the stylesheet
itself? That is still static? Well, let us have a look at
what we can do about that.
Dynamic CSS at last
What we are going to do now is supply a simple form that
will allow our user - john - to change a few visual aspects
of the page. Then, we are going to take the POSTED values
and use them to create a new stylesheet called john.css. If
john.css exists, we will overwrite it.
Here is a snippet of the form:
<form id="setTheme" name="setTheme" action = "'.$_SERVER['PHP_SELF'].
'?username='.$_GET['username'].'&setTheme=1" method="post">
<fieldset id="themeFieldSet" name="themeFieldSet">
<legend>Set Your Theme</legend>
<br />
<label for "pageBackGround">Page Background:</label>
<br />
<select name="pageBackGround" id="pageBackGround">
<option value="#cccccc">Grey</option>
<option value="#000000">Black</option>
<option value="#ffffff" selected="selected">White</option>
<option value="#336699">Blue</option>
</select>
<br />
<br />
<label for "fontColor">Font Color:</label>
<br />
<select name="fontColor" id="fontColor">
<option value="#cccccc">Grey</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#336699" selected="selected">Blue</option>
</select>
Obviously you can specify anything you like in the form, it really is that simple. You might not want to give a user
control of imperitive CSS that could break your page in some way though. Now we have to catch the POST values
from this form. Below is a snippet of how this is done, and how we start to build our dynamic stylesheet:
if(!empty($_POST) && isset($_POST['setTheme']))
{
/**
* define default colors that will be overwritten by post values should they be set.
*/
$pageBackGround = '#ffffff';
$fontColor = '#336699';
$barBackgroundColor = $fontColor;
$barFontColor = $pageBackGround;
$borderColor = $fontColor;
$fontSize = '12';
$legendFontSize = $fontSize+2;
$textAlign = 'left';
/**
* loop through the post values and set a key and a value for each
*/
foreach($_POST as $post=>$value)
{
$$post = $value;
}
/**
* create the stylesheet and setup the variables to receive values
*/
$stylesheet = "
body {
background: {$pageBackGround};
color: {$fontColor};
padding: 0px;
margin: 0px;
font-family: Verdana, Helevetica, Sans-Serrif;
font-size: {$fontSize}px;
text-align: {$textAlign};
}
.bar {
width: 100%;
padding: 5px 0px 5px 0px;
background: {$barBackgroundColor};
border-top: 3px double {$pageBackGround};
border-bottom: 3px double {$pageBackGround};
color: {$barFontColor};
}
Etcetera, and now all that remains is for us to create a new
css file called john.css. This is quite simple:
$fileName = 'css/'.$_GET['username'].'.css';
$fileHandle = fopen($fileName, 'w');
fwrite($fileHandle, $stylesheet);
fclose($fileHandle);
And there you have it, dynamic CSS!
In Conclusion
In this article we looked at how to create a dynamic
cascading stylesheet which would give you the flexibility of
offering your website users a simple way to personalise
their area on your website without having to use resource
zapping database queries. We have truly succeeded in
creating dynamic stylesheets that can be customised to any
degree.
Until next we meet...
Happy Scripting!
Marc Steven Plotz.
CSS And PHP: Switching Themes
CSS And PHP: Switching Themes
|
