scriptygoddessSomeone asked me to post a tutorial on how I did the custom colors, and font sizes. I can't take sole credit for it, it's a very simple solution based completely on a combination of methods.
In fact, in some ways, the "a list apart" way is better because you can let your users select which stylesheet they want to use… My reason behind the way that I did it was that maintaining skins was too much trouble, as was maintaining mulitple stylesheets… I want to add a style… gotta do it in every location… and with the way I did it here, users can enter in their own hex value for color, so it upped the value even more… I was then able to use the same basic idea for the font size.
I'll describe the color part, but you can technically use this to customize MANY other values in the CSS:
(PHP required for this solution!!)
ABOVE your <HTML> tag (on every page you're using your dynamic sytlesheet) add this:
<?
if (!isset($color) && !isset($newcolor)) {
//new user – no cookie, no color selected – set default to purple
setcookie('color','8275BA',time()+(86400*365),'/','.YOURDOMAIN.com');
$color = "8275BA";
} else if (isset($newcolor) && $newcolor != "") {
// user has selected a color – set cookie and use it
setcookie('color',$newcolor,time()+(86400*365),'/','.YOURDOMAIN.com');
$color = $newcolor;
} else if (isset($color)) {
// do nothing – color cookie exists…
} else {
//something going wacky with the cookies – set to default
$color = "8275BA";
}
?>
Here's the code to let users choose their custom color:
<a href="<? echo $PHP_SELF; ?>?newcolor=8275BA"><font color="#8275BA">[X]</font></a>
<a href="<? echo $PHP_SELF; ?>?newcolor=FF9933"><font color="#FF9933">[X]</font></a>
<a href="<? echo $PHP_SELF; ?>?newcolor=666666"><font color="#666666">[X]</font></a>
<a href="<? echo $PHP_SELF; ?>?newcolor=790027"><font color="#790027">[X]</font></a>
The above is for "preset" colors… but to really make use of the script, you can let people enter in their own hex value:
<form action="<? echo $PHP_SELF; ?>">
Enter in a hex value below: (Don't include the "#")
Must be 6 characters long. Leave blank if not changing color.
<input type="text" name="newcolor" size="6" maxlength="6">
<input type="submit" value="submit change">
</form>
You do run the risk of people making a really bad choice in color, (ie. any text that's supposed to be WHITE on top of this color, will not be see if they change the color to white!) So I also added this button here:
<form action="<? echo $PHP_SELF; ?>">
(Made a mistake?)
<input type="hidden" value="8275BA" name="newcolor">
<input type="submit" value="Restore defaults">
</form>
NOW for your "stylesheet". You don't actually "attach a stylesheet" like you would normally… you do a php include which will make it act like it's an inline stylesheet. (Before I move forward, I'll point out the problem with doing it this way – because your stylesheet becomes "dynamic" it relies on your page to be php to process it… so, for example, if you want this theme carried through to your pop-up comments in MT… Sorry, pick another solution, this one won't work. That page is cgi generated, and you can't process php on it… so it won't do the include, and process the values it's supposed to.) There are a TON of other solutions… don't complain to me about it… just pick a different one, ok? 😉
So here's your stylesheet.. create a file, name it something "styles.php" (yes ".php", NOT ".css". You'll see why)
You'll start it like this:
<style type="text/css">
<!–
and end it like this:
–>
</style>
and where you want the dynamic color to show up, you do it like in this example:
.title {
font-weight: bold;
color: #<? echo $color; ?>;
margin-top: 8px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #<? echo $color; ?>;
}
Then you include your styles.php like you would a normal include. Put the line in between your <head> </head> tags.
(The script works fine)
