Aaron Gadberry

Help – v. helped, help·ing, helps

Was this site helpful?
My Amazon.com Wishlist

Changing Stylesheets Dynamically

22nd February 2006 - By Paradochs

Introduction

If you are one of those select few who have multiple stylesheets for their website, then this article is for you. On the other hand, whether you know CSS or not, this might be a good way for you to learn.
I know of 4 ways to change between styles dynamically in a page. They are listed below with some code examples.

My Experience

Originally I created my website using only HTML and tables. That meant long and ugly code, plus it was terrible to maintain. I learned enough CSS to rewrite my page using only CSS and HTML without attributes or tables. This gave me the power to have only content in my HTML, separated by <div> tags. When designing the HTML of a page so that it can be redesigned using CSS, throw in as many <div>’s as you want. Think of it like object oriented programming: You don’t want to define a whole slew of pieces all on the same level. You want a container class, sections, parts, etc. Don’t be afraid of how many <div>’s you have, just name them well (using ID or class).
Once I had finished rewriting my page so that it looked identical to the original, I decided to overhaul the look of the page. I searched for some designs that I liked, and found a couple that I thought would work. I took the original stylesheet and modified it piece by piece to get a totally different design. This way is easier because you don’t have to rewrite the entire stylesheet class by class, just modifying, adding, and deleting attributes and values.
At this point I got too excited about it and wrote a total of five styles for my page. I wanted people to see all of them, so I came up with some ways to swap between the styles. I set up a voting script so that the style with the most votes automatically becomes the default. While adding more styles is fun and you learn quite a bit about design of CSS and HTML while doing it, it becomes very difficult to add a section to your page, because you have to add it to all your stylesheets also. (In most cases).
Here are the different ways I know of to change between styles dynamically.

Multiple <link> Tags in Header

If you put multiple <link> tags with names, Firefox will be able to switch between them using the dropdown menu. When I did this, it worked perfectly for Firefox only. IE displayed different parts of the page in different styles (obviously it didn’t work) and also there was no way to switch. I ruled out this option for now until IE catches up to Firefox. (Therefore this will never be a viable option) :)

<link rel='stylesheet' type='text/css' href='first.css' title='First'> <link rel='stylesheet' type='text/css' href='second.css' title='Second'> <link rel='stylesheet' type='text/css' href='third.css' title='Third'>

Using PHP and GET Variables

This is the best (most stable) way that I’ve implemented so far. When a page is loaded, simply pull the GET variable “style” out of the address bar. If there isn’t one, then set the variable equal to a default style. Use that variable as the stylesheet filename.
The problem with this is that you have to use PHP or some other script language to implement it. If you already are using one then it is not a problem at all. Another problem is that you have to add the "?style=whatever.css" dynamically to all of your internal links. Basically, any time you click on a link, it has to have the stylesheet GET variable at the end of the line. This can also be done with PHP, but not too easily, especially if you already are using GET variables. There is an example of code below.

<?php if(isset($_GET[style])) $style = $_GET[style]; else if(!isset($_SESSION[style])) $style = "default.css"; echo " <link rel='stylesheet' type='text/css' href='$style' title='Current'> "; ?>

Using PHP, GET Variables and Sessions

This is the same concept as the idea above, but instead of having the GET variable on every single page and link, simply set up a script that, if the GET variable is set, sets a session variable with the value of the GET variable. Then when you create your <link> tag, you simply use the session value as the filename.
The drawbacks similar to above because you have to use a scripting language to set the session variable and echo it back to the <link> tag. The upside is that you don’t have to change any of your links. To change between two styles all you have to have is a link with href="?style=whatever.css". That will reload the current page with the style of whatever.css.
Here’s how I implemented it. This code didn’t work very well for me, but did work sometimes.

<?php session_start(); if(isset($_GET[style])) $_SESSION[style] = $_GET[style]; else if(!isset($_SESSION[style])) $_SESSION[style] = "default.css"; echo " <link rel='stylesheet' type='text/css' href='$_SESSION[style]' title='Current'> "; ?>

Using PHP, GET Variables and Cookies (The best and most stable way)

This is the best and cleanest way I’ve found so far. There is no GET variable in every address, and it has worked perfectly for me so far. It is basically the same as the idea above with session variables. Set a cookie to the default stylesheet filename. If there is a GET variable, set the cookie to it instead. When the <link> is set, use the cookie variable to fill in the filename. This works great for me and hasn’t broken yet. The cookie will stay set, so when a user returns to the page, the latest style the user has chosen is displayed by default. The only minor bug is if your stylesheets change order or you add some. The index might be off and they will view a different page by default the first time they return.
The cookie name can NOT be “STYLE”. Firefox accepts it, but it won’t work in IE.

functions.php
<?php function setCurrentStyle($styleSheets) { $styleIndexToUse = 0; if(!isset($_COOKIE["MYSTYLE"])) { if(isset($_SESSION["MYSTYLE"])) { $styleIndexToUse = $_SESSION["MYSTYLE"]; } else { $styleIndexToUse = 0; } } else { $styleIndexToUse = $_COOKIE["MYSTYLE"]; } echo "<link href='stylesheets/$styleSheets[$styleIndexToUse][cssname]' rel='stylesheet' type='text/css' />"; } ?>

This is the page that changes the stylesheet index. Simply create a link like <a href="setstyle.php?SETSTYLE=0" title="Blue Haven">Blue Haven</a>. Changing the “0” and “Blue Haven” to whatever you want the style to be.

setstyle.php
<?php // SET COOKIE FOR 1 YEAR if(isset($_REQUEST["SETSTYLE"])) { if(setcookie("testcookie",true)) { setcookie("MYSTYLE",$_REQUEST["SETSTYLE"],time()+31622400); } else { $_SESSION["MYSTYLE"]=$_REQUEST["SETSTYLE"]; } } // RETURN TO CALLER PAGE header("Location: ".$_SERVER["HTTP_REFERER"]); ?>

Conclusion

These are the only ways that I have come up to switch the style of a page. Either you can have it work in Firefox only, or you’re going to have to use a few scripts. If anyone else has any good ideas, I’d be grateful and I will add them to this list. Leave them as comments or email me. Please send code if you have it also.

One Response to “Changing Stylesheets Dynamically”

  1. J Arancivia Says:

    Paradochs,

    Thanks for the great explanations. I am a newb at CSS and PHP and am always frantically looking for easy to follow tutorials and this one is great! I used the section titled “Using GET PHP and Variables” and since I also use a SSI (Server Side include) for my menu (which houses the code) it works great and I only had to modify one file to effect every page on my website. Thanks again =).

    Jay…

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>