scriptygoddess

30 Oct, 2002

Custom font size, and colors (like on this site)

Posted by: Jennifer In: How to's

Someone 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.

<? include '/home/PATH/TO/SYLES/styles.php'; ?>

15 Responses to "Custom font size, and colors (like on this site)"

1 | Jennifer

October 30th, 2002 at 2:27 pm

Avatar

I thought I was going crazy because I couldn't see your custom font/colour choices anywhere on the page. So I fired up Mozilla and there they were! Just thought I'd let you know, they're not showing up for me using XP and IE6 SP1. I see the disclaimer box, the hotlist box, the authors and the mt credit. That's it.

2 | Jennifer

October 30th, 2002 at 2:42 pm

Avatar

That's totally bizarre – the whole BOX isn't there? Can you send me a screenshot? (I tested it on the configuration you say, and it worked fine… wonder what's going on there)

(email: scripty AT scriptygoddess DOT com)

3 | Laura

October 30th, 2002 at 3:40 pm

Avatar

Popped in here from Kristine's site, and I'm not seeing the customization, recent comments or the digest box in IE 5.5. I can see the listed boxes in Netscape and Opera. Very strange.

4 | Jennifer

October 30th, 2002 at 4:10 pm

Avatar

I FIGURED IT OU!! Ah… I hate when I don't know what's going on… Seems I used the same cookie names on the TEST AREA for the gadgets (which you all must have gone to… which messed up the code here (because I didn't change the cookie names… )

Click the "restore sidebar boxes to their defaults" on the bottom of the sidebar… then all *SHOULD* be normal… (note to self: CHANGE COOKIE NAMES ON TEST AREA!!) =sigh=

5 | Jennifer

October 30th, 2002 at 4:17 pm

Avatar

Yes! All is normal. Thanks.

6 | Jennifer

October 30th, 2002 at 4:19 pm

Avatar

Changed it even further… you shouldn't even need to click that link now (unless you want to restore the default gadget view)… a simple refresh will fix it…

(FYI – the problems we're all talking about, actually have nothing to do with the code posted above. It had to do with a mistake I made in implementing the *gadget* script.. and no one else would have had this problem on their own site… – that is unless you ran a test area (which people visited) that had a different number of gadgets, but wrote the same cookie name on peoples machines… my silliness… :) (The script works fine)

7 | Laura

October 30th, 2002 at 6:30 pm

Avatar

Very cool. I really like the look and the customizations that you have working here. =D

8 | Tudy

October 30th, 2002 at 9:13 pm

Avatar

Very cool..
Note to self: Study php.. study php

9 | Tricia

October 30th, 2002 at 9:44 pm

Avatar

*slips in and looks around*
Looks mighty pretty in here, guys. :)
More gadgets to mess with!

10 | armina

October 31st, 2002 at 10:26 am

Avatar

wow.. that's a very cool hacks… :-)

11 | Jen

November 26th, 2002 at 4:51 pm

Avatar

That is so incredible! I finally tried it, and I can't believe how easy it is! Now, I just have to create a style sheet that takes better advantage of color changes! :)

12 | Jen

November 26th, 2002 at 11:43 pm

Avatar

That is so incredible! I finally tried it, and I can't believe how easy it is! Now, I just have to create a style sheet that takes better advantage of color changes! :)

13 | Ramblings of a Code Monkey

March 26th, 2003 at 11:34 pm

Avatar

Ramblings of a Code Monkey 2.5
And there you have it. My site redesign is complete, for the most part. There might be a few things that are screwy here and there (the main Archives page looks horrible, so I'm going to redesign it), but for…

14 | TooMuchSexy.blog

July 28th, 2003 at 9:02 pm

Avatar

Skin my site
I have implemented a method for skinning my layout. Through the help of scriptygoddess, you can now modify the color scheme of the site. I have removed the personal customization for colors, as I want my backround color to be modified as well. Instead …

15 | AlexHansford.com

December 14th, 2003 at 9:37 am

Avatar

Site Progress 2
Well as you might be able to see, I have worked out the general site layout now. It is said that it is similar in style to the one used by Jeffrey Zeldman in his ALA article (sorry the design…

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements