Build A Simple Style Switcher in CSS

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "Build A Simple Style Switcher in CSS"

[Icheb]

Why does everyone feel the need to use something like

$theStyle = $HTTP_GET_VARS["style"];

and then use the newly defined variable in the script, instead of just going ahead with $HTTP_GET_VARS["style"] when it's clear that the variable's content is unlikely to change anyways?

[Pace Thug]

As I am using cache on many of my pages this tip isn't very useful. Two different users ending up looking at my front page with a cache of a third users style is not an alternative.

You could probably solve it by importing a script instead of pure css:

@import url(page-that-produces-user-specific-css.aspx)

If there is no cookie, output the default style. Otherwise, output the customizations.

[charmedlover]

I used a similar system although it relied on sessions and was based on the users prefrences set in their acccount (you had to register). This method looks cool and I may use it on my other site. Nice article!

[Eric.Coleman]

Couple of errors...

$HTTP_GET_VARS should be $_GET

$HTTP_REFERER should be $_SERVER['HTTP_REFERER']

You should be using the new globals, the old styles were dropped with php 4.1, and PHP 5 doesn't set the HTTP_*_VARS anymore.

- Eric

[Bryce]

This is a handy article, although I don't understand the use of the case statement for setting $styleCookie var.

Is it saying that if $styleCookie is 'white' or 'orange' then do nothing, and if $styleCookie is green or empty set $styleCookie to default? If so, why was the case statement used here over an IF statement?

[Pony99CA]

Originally Posted by ArticleBot

This is an article discussion thread for discussing the SitePoint article, "Build A Simple Style Switcher in CSS"

I did this using JavaScript on my site (I didn't have access to server-side scripting, and why bother wasting time on the server when I can have the client do this?). See my Preferences page for an example.

I even have a preview window and separated the style sheet and font size settings.

Steve

[Pony99CA]

Originally Posted by Bryce

This is a handy article, although I don't understand the use of the case statement for setting $styleCookie var.

Is it saying that if $styleCookie is 'white' or 'orange' then do nothing, and if $styleCookie is green or empty set $styleCookie to default? If so, why was the case statement used here over an IF statement?

It could use an IF statement like the following:

if (($styleCookie == "green") || ($styleCookie == "")) {
$styleCookie = "default";
}

(If PHP doesn't look like C, fix the syntax as needed.)

Of course, if your cookie values don't exactly match the names of the stylesheets, using a switch statement will be better than trying to list multiple alternatives in one branch of the IF statement.

Steve

[ranvier]

Interesting article and are simple to digest although there are already a substantial amount of similar tutorials on CSS stylechanging.

But nevertheless, keep up the good work man! :)

[Edora]

Certainly a good article/tutorial for every webmaster. Css is the new way of designing these days, and every example can make readers learn a lot.

[cranial-bore]

...or if you were hell bent on keeping the file sizes of cookies small and you had a significant quantity of user preferences you could assign visitors a unique ID, store that in a cookie on their side, in a database table on your side and keep all the settings in the database.

This would also allow you to see which settings were more popular, and also store non-css preferences for users.

[Bryce]

Originally Posted by cranial-bore

...or if you were hell bent on keeping the file sizes of cookies small and you had a significant quantity of user preferences you could assign visitors a unique ID, store that in a cookie on their side, in a database table on your side and keep all the settings in the database.

This would also allow you to see which settings were more popular, and also store non-css preferences for users.

This is a nice spin to put on the tutorial - now that you've given me the idea, that's probably how I'm going to run my styles on the blog I'm currently designing.

Pony: thanks for the clarification

[DarkAngelBGE]

The author should abide by the new php standards though. $HTTP_COOKIE_VARS and $HTTP_GET_VARS certainly aren't. It's $_GET and $_COOKIE.

Other than that good tutorial.

Just a quick question to DarkAngel or anyone else who can answer this. Where can I find the new standards for PHP. I'm returning back into programming after being away for quite some time and want to see what I missed.

[jgoddard]

You can do this entirely in Javascript, with no need for server side code, and an extra trip to the server.

[Eric.Coleman]

Read the PHP manual...

And DarkAngelBGE, I posted that same message up there around post number 4

[saumendra]

The Article talks very well about the amalgumation of Server side and Client side approach.

[lveale]

Author here, will try to answer any queries thus far...

With regard to PHP standards, yes, should have used $_GET and $_COOKIE but my host doesn't support them so I cut and paste my code rather than editing it to reflect the newer standards that the rest of you may be using so apologies for that.

Bryce, in answer to your question,
This is a handy article, although I don't understand the use of the case statement for setting $styleCookie var.

Is it saying that if $styleCookie is 'white' or 'orange' then do nothing, and if $styleCookie is green or empty set $styleCookie to default? If so, why was the case statement used here over an IF statement?

The switch/case may be a bit unwieldy. If the variable is white or orange, then we don't need to do anything as the variable name will match the name of the CSS file i.e. white.css or orange.css. However, if we don't have a Cookie passed in (i.e. user hasn't bothered to choose), or green is passed in then we use the default.css, which happens to be green.


syscrash, recommend just going to the PHP site and searching the function list there. Sitepoint do a great book,which has recently been updated.

Hope that helps, at least the article has stimulated some discussion and feedback so I'm happy with that

[polvero]

good stuff.
i like this method better (although not as swift) than the ala javascript styleswitcher. The neat thing about the javascript method is the fact that it switches the style right there on the page rather than requiring a page reload.
HOWEVER, this is much more reliable. Perhaps I'll allow my users to use both...
Thanks

[scattermachine]

Great article, and a very interesting technique!

For anyone interested in a host that supports the new naming convention, I highly recommend:


http://www.12wonderhosting.com

[Pony99CA]

Originally Posted by Eric.Coleman

And DarkAngelBGE, I posted that same message up there around post number 4

It must be catching -- jgoddard said the same thing I said in post #7. Are duplicate post shots as hard to come by as flu shots?

Steve

[wildsue]

the idea with the default.css is super, it takes less time to change for default values. Next time I'll try it out!

Perhaps a nicer way to handle the php would be:

<link rel="stylesheet" type="text/css" href="/style/<?= ($HTTP_COOKIE_VARS["style"]) ? $HTTP_COOKIE_VARS["style"]; : "default": ?>.css" media="screen" />\n";

[scott_sauyet]

This all makes sense, and I've seen a few good implementations of it around the web. But one thing doesn't make sense to me. Why in the world would you do a CSS "@import" and take the additional server hit when you could simply serve the CSS via PHP and do an "include" instead?

[dave_]

i tried this out, i could get the cookie to work and the change of style, but not the header, heres what i tried:

<?php
$theStyle = $HTTP_GET_VARS['style']; /* querystring */
setcookie("style", $theStyle, time()+36000, "/", "");
header("Location: $HTTP_SERVER_VARS[HTTP_REFERER]");
exit;
?>

if i comment out the header line then the cookie works but i have to hit back and refresh, if i leave it in then the header line works and the cookie doesnt