demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

A mockup of a responsive page

Creating Custom Site Themes with Cookies and PHP

php / cookies

Estimated reading time: 3 minutes, 30 seconds

One of the ways to retain and recruit visitors to your site is to offer a degree of customization and personalization: allowing users to see the content of the website the way they want.

This could be thought of as “themeing” the site with a selection of “skins”, as featured on gMail, or it could be considered an aspect of accessibility. We’ll focus on the latter application for this lesson, but the techniques discussed here could be used for either, or both.

In addition to the we have talked about so far, it is fairly standard to introduce alternate stylesheets that allow users to see the site in a different or enhanced way. Typically, the options would include a high-contrast, large font appearance style, a “print” appearance for screen, with minimal distraction, and the normal, default appearance of the site.

While it would be possible (and under some circumstances preferable) to make these three options a single file with extra scripting, for the sake of simplicity, let’s create the CSS options as separate files: “normal.css”, “contrast.css”, and “print.css”. The suggestions below for the CSS in each are deliberately very limited: you could make them as complex as you wished.

normal.css:

body { background: #666; color: #fff; } 
div#sidebar { background: #444; float: right; }

contrast.css:

body { background: #fff; color: #000; font-size: larger; }
div#sidebar { background: #000; float: right; }

print.css:

body { background: #fff; color: #000; font-size: larger; }
div#sidebar { display: none; }

Now let’s create the page to which the CSS will be applied, themes.php. We’ll link to the normal.css by default, and will change it later; I have used minified to save on space:

<head>
<title>Customised Page Example</title>
<link rel=stylesheet href=normal.css>
</head>
<body>
<p>Choose a theme for this site:</p>
<ul>
<li><a href=themeset.php?choice=normal>Normal</a>
<li><a href=themeset.php?choice=contrast>Contrast</a>
<li><a href=themeset.php?choice=print>Print</a>
</ul>
<div id=sidebar>
<p>This is sidebar content that will be seen in the normal and high-contrast themes, and hidden in the print theme.</p>
</div>
</body>

We’re linking to another page (one that we will create in the next step) in order to set our cookie (as we can’t set and read a cookie in the same session) and as an opportunity to demonstrate another function, header(). An alternative approach would be to set the links to themes.php, writing the cookie as a semi-permanent token for choice in the first line of the page, and using the variable to set our stylesheet.

For now, let’s create themeset.php. This is a very simple page, one that only has PHP on it: we won’t be staying long enough on this page to see anything, so any HTML that is auto-inserted by an editor like can be stripped out. The PHP consists of just two lines:

<?php setCookie("css", $_GET[''choice'']);
header("Location: themes.php"); ?>

The first line creates our cookie, setting it with the value passed by the choice GET variable. The header function on the second line has a number of possible applications, which include “fooling” the browser (such as having it believe that a .php page is actually CSS) and redirecting it, which is what we’re doing here.

Back on the themes.php page, we need to read in our newly created cookie, which will now be a variable ($css), and use its value to choose which CSS file we are going to use for the page. To do so, we just need to make the link to our stylesheet dynamic:

<link rel="stylesheet" href="<?php echo $css; ?>.css" />

We should also test if the cookie exists: if it doesn’t, we should set the associated value to what we want the default stylesheet to be, just before the dynamic link to our stylesheet:

<?php $css = $_COOKIE["css"];
if (!$css) { $css = “normal”; } ?>
<link rel="stylesheet" href="<?php echo $css; ?>.css" />

Save and upload both theme.php and themeset.php to your server and test them.

The only downside to what we have created is that the user’s preference of the stylesheet they wish to use on our site will only lost as long as the browser remains open. To improve on this, set an expiry time for the cookie created in themeset.php:

<?php setCookie("css", $_GET["choice"], time() + 5184000);
header("Location: choose-css.php"); ?>

In this example, our cookie will last for 60 days from the date of creation.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.