About
This will be a PHP styleswitcher! It uses clickable links to switch styles. Each link will make you go back to the home page. The style will be stored on a cookie on the user's computer.
Here are the files from this tutorial, in case you want to reference them:
https://dl.dropboxusercontent.com/u/16623407/codey things/phpstyleswitcher/phpstyleswitcher.zip Don't panic if they don't work directly on your computer; you have to have PHP set up on your actual computer to do that.
Step 1: page.php
Make a regular old page. It can be named anything you want, but it has to say .php at the end! So index.php, sample.php, frog.php...
Put a couple of things on it (maybe some text and a link) for testing purposes.
Mine is called index.php. Here it is:
HTML:
<html>
<head>
<title>Untitled</title>
</head>
<body>
la la la I'm a piece of text
<a href="http://fake.link">hi I'm a link</a>
</body>
</html>
We'll edit that page later to make it styleswitcher-compatible.
Step 2: switcher.php
Next, make a new file called something like switcher.php, and paste this code into it:
PHP:
<?php
setcookie("sitestyle", $_GET['set'], time()+31536000); /* expire in 1 year */
header("Location: YOURPAGE.php");
?>
Where it says "YOURPAGE.php", you have to change that to the name of the page from step one. This will be the page it makes you visit when you change your style.
Don't change anything else.
Step 3: bluestyle.css
Now we'll make our very first style sheet! Mine is going to be named bluestyle.css; you can change the name of yours.
Code:
body {
background: #0000FF;
}
a {
color: #00FFFF;
}
Step 3: redstyle.css
The second style sheet! Mine is redstyle.css; again, yours can be something else.
Code:
body {
background: #FF0000;
}
a {
color: #000000;
}
Step 4: index.php style code
Remember the part of index.php that says <head> and then later </head>? In between those two, we need to put this style code:
HTML:
<link rel="stylesheet" type="text/css" href="BLUESTYLE.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />
BLUESTYLE.css is the default style. Whichever style you want as the default, replace BLUESTYLE.css with that style's name.
The code should look like this now:
HTML:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="bluestyle.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />
</head>
<body>
la la la I'm a piece of text
<a href="http://fake.link">hi I'm a link</a>
</body>
</html>
Step 5: trouble-shooting
If you view index.php (or whatever your test page is named) now, it should have a style on it. This is the style that will always appear by default when someone very first visits the site.
If it doesn't work, check these things:
1. Did you change BLUESTYLE.css to the correct style name?
2. Do YOURPAGE.php and switcher.php end in ".php" on your site?
3. Does the style you chose actually change anything about the page? Try it on a normal page and see if it works there.
4. Did you remember to put the code from step 4 between <head> and </head>?
5. Check your casing. Did you accidentally write
Bluestyle.css instead of
bluestyle.css?
6. If you can't get it to work, try starting over at step 1, but use all the same names used here. Once it works, you can change them to whatever you want.
Step 6: index.php links
Remember when we put some code between <head> and </head>? This next code goes in between <body> and </body> (anywhere you like inside of that).
HTML:
<a href="SWITCHER.PHP?set=BLUESTYLE">BLUE</a><br>
<a href="SWITCHER.PHP?set=REDSTYLE">RED</a><br>
Where it says SWITCHER.PHP, put the name of your page from step 2.
Where it says BLUESTYLE and REDSTYLE, put the name of your own stylesheets. They should NOT end in ".css". The code you copied will add that part by itself.
Where it says BLUE and RED, put the text you want the user to click on.
When you're done replacing words, the page should look like this:
HTML:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="bluestyle.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />
</head>
<body>
la la la I'm a piece of text
<a href="http://fake.link">hi I'm a link</a>
<br><br>
<a href="switcher.php?set=bluestyle">click here to go blue!</a><br>
<a href="switcher.php?set=redstyle">click here to go red!</a><br>
</body>
</html>
Step 7: more trouble-shooting
1. Did you remember to change YOURPAGE.php in step 2? If you end up at a 404 when you click one of the links, this is probably what happened.
2. Did you remember to replace everything in caps in step 6?
3. Did you remember to put the code from step 6 between <body> and </body>?
4. Check your casing. Did you accidentally write
Redstyle instead of
redstyle?
5. Did you delete a quotation mark from the links in step 6?
6. In the step 6 links, did you write "bluestyle.css" or just "bluestyle"? It should be just "bluestyle".
End
You can add as many links to as many style sheets as you want, and on any page (remember that the links will always redirect to YOURPAGE.php no matter what page they're actually on).
If you want to put all your style sheets into their own folder, just change the links from step 6 like this:
HTML:
<a href="switcher.php?set=STYLEFOLDER/bluestyle">click here to go blue!</a><br>
Congratulations on your new style switcher!
