Okay guys, this is my first tutorial(if you can call it that). Just a how-to on the script that I wrote for my website in order to allow the user to change the style of the page. This is done by a php or javascript switch statement in the section of the code where you link to the external stylesheet. So, the first thing to do, of course, would be setting up the standard html code like so.
<html>
<head>
<title>Stylesheet tut</title>
<link rel="stylesheet" type="text/css" href="defaultstylesheet.css" />
</head>
<body>
You can change the style of this page :O
</body>
</html>
Next, your going to want to write the php statement that chooses a stylesheet based on user choice. This will be a switch statement, with a default stylesheet and two other choices. The code is explained in the comments in the code.
<html>
<head>
<title>Stylesheet tut</title>
<?php
//stating the variable that the user will alter to choose their stylesheet. Getting it from a //location.
$css = $_GET["css"];
//a switch statement that does a different code block depending on //the value of css.
switch($css)
{
case "choice1": //if they choose this, the said stylesheet will now be chosen
echo '<link rel="stylesheet" type="text/css" href="choice1.css" />';
break;
case "choice2":
echo '<link rel="stylesheet" type="text/css" href="choice2.css" />';
break;
//if none of these conditions are met, do this. This stylesheet will also be on auto.
default:
echo '<link rel="stylesheet" type="text/css" href="default.css" />';
}
?>
</head>
<body>
You can change the style of this page :O
</body>
</html>
Btw guys, im actually writing this code on EZ, not on an ide, so the formatting looks wierd.
Okay, so next thing you want to do is actually give your user a way to change the value of css. We don't want them to be able to choose any option, just the ones that we have. For this, we will use a select form.
<form>
<select>
<!--Doesn't meet any conditions in the switch statement, so it will run the default code.-->
<option name="css" value="default">Default</option>
<option name="css" value="choice1">Choice1</option>
<option name="css" value="choice2">Choice2</option>
</select>
</form>
Lastly, this can be(and probably should be) written in javascript instead. You would just change the syntax around
All this code together allows the user to choose which style they would like to see. I hope you guys enjoyed my tutorial! I kind of wrote this in a rush, and without an ide, so if im missing anything or something is wrong, please just let me know.
