Cascading Style Sheet Switcher
This code snippet will allow your users to choose between different styles to apply to your website.
Yes, it’s a PHP skin selector for websites!
You can view a live example of it in this weblog itself: it’s the switch style icon on the top right corner (Click it right now!).
Due to an heavy layout restyling, this function is no longer available on my blog. Sorry for the inconvenience
Here is a little presentation of the features that this little code provides:
- Have a default style (in absence of previous choices)
- Unlimited choices (depending on your fantasy and ability)
- Style choose take effect immediately, and site-wide
- Switcher link brings you back to the page you were seeing, but restyled
- The preference is saved for each user, for successive visits
And now, let’s explain the technique.
Before diving directly into the code, I like to spend some words on the idea behind the switcher.
The main thing we do is printing links to different CSS files into our page HTML <head> section, depending on what we read from a cookie.
Why CSS files?
There are several advantages with having your site presentation and style informations stored into a separate CSS file, instead of having them embedded directly into the markup.
Without listing all of them, I just say that you can vary the look & feel of a whole site by changing only a single line of code - that one that tells us the name and the path of CSS file.
What I need?
An (X)HTML output for your website (ok, you already got it); two or more CSS files applicable to that markup output; a server that can run PHP; and a client that can save cookies!
For multiple pages, it would be useful to have a template-driven output, so you don’t have to change every single page <head> section, but only the template one.
Please note: the more standard, well-formed and separated from presentation your markup code is, the more effective and powerful this technique will be.
(XHTML Strict, without any embedded style information, is the best.)
How it works?
Ok, do you have at least two CSS files for your markup? Let’s switch ‘em!
First of all, change the line that display the link to your CSS with something like this:
Substantially, you have to change the CSS filename (without its extension) with the echo of $style variable on PHP.
To fill this variable with a valid value (that is an existing CSS file name in the specified path), put this code immediately before the previous line:
if(isset($_COOKIE[’style’])){
$style=$_COOKIE[’style’];
} else {
$style=’default’; //the name of default style file
}
?>
With these lines, we control if there’s a cookie named STYLE, then assign its value to $style, else we assign a default value to that variable.
I guess that you already know what comes next…
The last thing to do is to write a script that will write a custom value (that is CSS name) in our cookie, and then send the client back to the page it was on before calling that script.
Create an empty file called switch.php and fill it with the following:
header(”Location:”.$HTTP_SERVER_VARS[”HTTP_REFERER”]);
?>
You can call it from any page with a link like this:
<a href=”/switch.php?style=alternate”>View page with Alternate style!</a>
When you click the link, the page reloads: the cookie will be read and the new style link will be shown, and the page from where you clicked on the switcher link will be styled accordingly!
صور wrote:
i was searching for this tips in many sites
thank you for these information
19 December, 2007 @ 11:57 pm
B4rry wrote:
Excellent, just what I need … except that my (small) knowledge of PHP is not good enough to understand all the code.
Can someone tell me how the naming of the .css files is/can be done?
Is one called ‘default.css’ and the other ‘alternate.css’? or are there other possibilities?
Thanks.
4 January, 2008 @ 1:04 am