[web-tips > php multiple style switcher]

PHP Multiple Style Switcher

Are you tired of looking for a javascript code that allows you to easily change style sheets? Do you want something that is simple, short, and will work if the user has turned off their javascript?

If so, this php technique is the slickest I have found.

EXAMPLE

Current style: style1.css

Style Sheet One (Green)           Style Sheet Two (Red)

Style Sheet Three (Blue)          Style Sheet Four (Black)

The color of the above "Example" text was ruled "Green" inside cascading style sheet, but can be redefined by clicking Green or Red, or Blue, or Black, which actually changes the style sheet used.

If your browser shows the color changes in above EXAMPLE text, then this technique works for your browser. As such, this technique will allow you to permit your user to set their own preferences.

The technique simply requires three things:

  • 1. Copy the following code and place it at the begining of your HTML document. If you want more, just continue adding more case groups (i.e., case 5: case 6, and so on). If you want to use less, then cut the case groups from the routine; 
			
<?php
$set = $_GET['set'];

switch ($set)
	{
	case 1:
	$thestyle = "style1";
	break;
	
	case 2:
	$thestyle = "style2";
	break;
	
	case 3:
	$thestyle = "style3";
	break;	
	
	case 4:
	$thestyle = "style4";
	break;	

	default:
	$thestyle = "style1";
	break;			
		
	}
?>
  • 2. In your HTML code between the <HEAD> tags, use the following stylesheet statement; 

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
  • 3. Then in your HMTL document, place the following switch style links wherever you want. 
			
<a href="index.php?set=1">Style Sheet One</a>
<a href="index.php?set=2">Style Sheet Two</a>
<a href="index.php?set=3">Style Sheet Three</a>
<a href="index.php?set=4">Style Sheet Four</a>

Make sure that your html document ends with the suffix of ".php". In other words, save the document as "index.php" and not "index.html".

Please donate $5 below for my development effort -- thank you.

This technique W3C validates under both HTML 4.01 Strict and CSS guidlines.

Enjoy.

tedd...

Comments
tedd   Thursday, April 16, 2009 19:23
 
test comment
Don   Tuesday, October 6, 2009 11:57
 
This is a per page thing right? To set a style via user preference would be a whole new set of php wouldn't it?
But I really like the concept alot.

Tanks,
Don
tedd   Saturday, February 27, 2010 11:25
 
test

"Post a Comment" has been deactivated.

I'm sorry, but there is just too much spam to review to provide answers. For example, for every honest question, there are over 1000 spams. I am leaving the comments here so that they may help others.

I find my time better spent providing more examples and attending to clients.

tedd