In this tutorial we'll see how you can let your visitors choose the style of your website.
To achieve this we'll use different css stylesheets, and some php to change amongst them.
This is the standard line you use to include a CSS document.
All we'll have to do is dynamically replace the CSS filename, to make this we'll use a separate file to handle the CSS choice that we name myfunctions.php.
The user will be able to switch CSS clicking on some links: these links will link to the same page and will append the CSS of choice to the query string so that we can parse the $_GET values.
The content of myfunctions.php is:
You need to include this file in the final page (that has to be a .php file).
The first part checks if any CSS is specified in the query string, if yes then we assign this value to the $css variable.
Of course you might also want to check if this is one of the CSSs you allow, and you can easily do it defining an array of allowed CSS names and checking if the just parsed CSS is amongst them with the in_array php function ( PHP: in_array - Manual ).
If no CSS is found in the $_GET parameters then we check if the user has a cookie for it, as before, if found, we assign this value to the $css variable, otherwise we assign to it the default value for our CSS document (I chose blue since the file I want to use as default is named blue.css).
Now we send a cookie to the user's brower so, if the user chose a CSS different from the default one, he'll get it by default the next time he visits our site.
We use the foreach loop to parse all the $_GET parameters, we'll dynamically rebuild the query string removing the chosen CSS in order to avoid double CSS values (if we didn't do it, in case the user changed two or more CSS documents, we'd have query strings like &css=blue&css=red&css=green etc etc )
so, done this, if the original query string was &page=charts&genre=rock&css=red we'll have &page=charts&genre=rock, so that the user can click again on a CSS selection link.
We'll need the query string to create correct links in our page.
Our CSS selector line will be something like:
Of course you'll need to have different CSS styles named blue.css, red.css and green.css and this will allow you to completely change the style of your page (have a look at This Tutorial to see what you can do editing just a CSS style sheet).
To achieve this we'll use different css stylesheets, and some php to change amongst them.
This is the standard line you use to include a CSS document.
Code:
<link rel="stylesheet" href="css/style.css" type="text/css">
The user will be able to switch CSS clicking on some links: these links will link to the same page and will append the CSS of choice to the query string so that we can parse the $_GET values.
The content of myfunctions.php is:
Code:
<?php
if(isset($_GET['css']))
{
$css = $_GET['css'];
}
elseif(isset($_COOKIE['css']))
{
$css = $_COOKIE['css'];
}
else
{
$css = 'blue';
}
setcookie("css", $css, time() + 3600*24*21, "/", ".yourdomain.com");
$querystring = "";
foreach ($_GET as $key => $value)
{
if ($key != 'css')
{
$querystring .= "&".$key."=".$value;
}
}
?>
Code:
<?php include 'myfunctions.php' ?>
Of course you might also want to check if this is one of the CSSs you allow, and you can easily do it defining an array of allowed CSS names and checking if the just parsed CSS is amongst them with the in_array php function ( PHP: in_array - Manual ).
If no CSS is found in the $_GET parameters then we check if the user has a cookie for it, as before, if found, we assign this value to the $css variable, otherwise we assign to it the default value for our CSS document (I chose blue since the file I want to use as default is named blue.css).
Now we send a cookie to the user's brower so, if the user chose a CSS different from the default one, he'll get it by default the next time he visits our site.
We use the foreach loop to parse all the $_GET parameters, we'll dynamically rebuild the query string removing the chosen CSS in order to avoid double CSS values (if we didn't do it, in case the user changed two or more CSS documents, we'd have query strings like &css=blue&css=red&css=green etc etc )
so, done this, if the original query string was &page=charts&genre=rock&css=red we'll have &page=charts&genre=rock, so that the user can click again on a CSS selection link.
We'll need the query string to create correct links in our page.
Our CSS selector line will be something like:
Code:
<a href="<?php print $_SERVER['PHP_SELF'];?>?<?php print $querystring;?>&css=blue">Blue</a> | <a href="<?php print $_SERVER['PHP_SELF'];?>?<?php print $querystring;?>&css=red" >Red</a> | <a href="<?php print $_SERVER['PHP_SELF'];?>?<?php print $querystring;?>&css=green" >Green</a>
Comment