In today’s tutorial, I will show you how to use PHP to select among different stylesheets that you have for your site. I will still be using Javascript to choose, but it’s not too important in this tutorial.
The way we’re going to implement this is through something called “sessions.” If you’re not already familiar with sessions, sessions are similar to cookies. I prefer using sessions and PHP over cookies and Javascript because some people have these disabled.
So first of the PHP:
session_start();
$stylesarray = array("stylechanger1.css","stylechanger2.css");
if(isset($_POST['style']))
{
$style = $_POST['style'];
$_SESSION['stylesession'] = $style;
}
else if(!isset($_SESSION['style']))
{
$_SESSION['stylesession'] = $stylesarray[0];
$style = $_SESSION['stylesession'];
}
else
{
$style = $_SESSION['stylesession'];
}
Explanation:
The way I’m doing it may seem a little primitive, but it works.
First off session_start(). This creates a session for the user. Sessions last until the user closes the browser or until specified otherwise.
Then I create an array containing all the paths to the stylesheets that were created.
The next part is a series of conditionals.
The first conditional checks to see is a post from the form, which I will explain below, is set. If it is, the set the value the post’s field named “stylepost” to a variable $style and set it to the session variable stylesession.
The second conditional checks to see if the session variable “style” is set. If it is NOT set, then set $style to the first value in the array $stylesarray as a default and set it to stylesession as well.
The last conditional, if no post was found and a session does exist, then set the $style variable to stylesession.
HTML and PHP:
<link href="<?php echo $style; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="maincontainer">
<div id="header">
CSSWoes.com
</div>
<form action="” name=”stylechanger” method=”post”>
<select name=”stylepost” onChange=”this.form.submit();”>
<?php for($i = 0; $i < sizeof($stylesarray); $i++): ?>
<option value=”<?php echo $stylesarray[$i]; ?>”
<?php if($stylesarray[$i] == $_SESSION[’stylesession’]) echo “selected”; ?>>
<?php echo $stylesarray[$i]; ?></option>
<?php endfor; ?>
</select>
<noscript>
<input type=”submit” value=”Change Style” />
</noscript>
</form>
</div>
</div>
Explanation:
The HTML is pretty straightforward so I won’t spend too much time explaining it.
In the header, $style is “echoed” by PHP into the <link> tag which is the string to the path of the selected stylesheet.
The thing that makes this work is the form. The only thing that needs to be in this form is a selection box. The form is submitted to the same page, determined by the $_SERVER[’PHP_SELF’], whenever the selection box is changed, hence the Javascript function onChange. The content of this selection box is also determined by PHP.
This part of the PHP involves a for loop that loops as many times as the number of items in $stylesarray. Each iteration will write <option></option> tags containing the value at the current index of $stylesarray. Also, if the stylesheet at the index matches the one in stylesession, then it’ll make that option “selected,” which means it is the one being displayed by default in the selection box.
That’s pretty much it for the PHP. The last thing that probably needs explaining are the <noscript></noscript> tags. In those tags I put a submit button for the form just in case someone has Javascript disabled and won’t have any way of submitting the form.
Here’s how it pretty much works. The styles are lame, I know, but the whole point here is the changing of the styles.
Hope you like it!
Nice piece of work it seems. And it seems nice and simple (I say as a non-programmer
Just wonder what that exactly would look like using links rather than select options. All the best.
If i didn’t want to make the switch with a form submit but rather a link on an image…HOw would I do that?
You can make the link go to http://yourpage.com?style=something. Then just retrieve style=something using PHP via $_REQUEST(”something”) and update the page style that way. Also, remember to save it to a session variable so you don’t lose your setting. Hope this helps!