Changing a style sheet programmatically to promote a particular holiday or event can be an excellent marketing tool, and, therefore, an excellent skill for a developer.
As an example, every September 19th, is "Talk Like a Pirate Day." This may not seem like a holiday that online retailers would pay a lot of attention to, but for the past few years, Crucial, a leading online retailer of computer memory, has been dressing up its site on Talk Like a Pirate Day with a pirate style sheet and adding the word "argh" to its site copy. The company even lets customers post their pirate names for a chance to win products or earn discounts. The promotion has quite a following among many regular Crucial customers.
While your clients might not want to promote Talk Like a Pirate Day, they may want to switch up the style sheet for, say, Thanksgiving or Christmas. Certainly this can be done manually, but why not let the server do it dynamically with a bit of PHP?
A Simple PHP Style Sheet Switch
In this example, I am going to write a short PHP script that will select a "Christmas" style sheet from December 1 through December 25, but use a default style sheet for the rest of the year.
To get started, I will need some simple HTML and two style sheets. This initial HTML only references the default style sheet, style.css. I am also referencing a reset style sheet to compensate for browser differences, and a grid system to make my sample page easier to layout.
<!doctype html> <html lang="en"> <head> <title>Style Switching </title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="960.css"> <link type="text/css" rel="stylesheet" href="reset.css"> <link type='text/css' rel='stylesheet' href='style.css'> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div class="container_12" id="wrapper"> <div class="grid_12" id="header"> <h1>Style Switching Example</h1> </div><!--end header--> <div class="grid_12" id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit pharetra tortor in dictum. Integer suscipit lacus at quam interdum sed accumsan arcu dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vehicula dapibus tortor, in pellentesque turpis malesuada ac. Donec tincidunt viverra nisi a aliquam. Maecenas convallis dui at diam viverra tempor. Nam mattis tempus enim at lobortis. Aenean non laoreet turpis. In id ante at metus ultrices accumsan et sit amet odio. Nulla sed enim vel velit volutpat eleifend nec eu dui. Aliquam ac magna nisi, sit amet consectetur justo. Donec scelerisque, diam a gravida ultricies, ligula sem tincidunt nibh, sit amet sodales lorem odio at ante.</p> <p>Vestibulum porttitor sem ullamcorper augue scelerisque elementum. Pellentesque velit felis, porttitor vel ullamcorper a, placerat vel nunc. Mauris bibendum, felis ac facilisis laoreet, quam mauris porttitor elit, eget scelerisque arcu est in lacus. Vivamus ultricies dui magna. Sed sed lorem dui, eget cursus leo. In hac habitasse platea dictumst. Fusce lobortis massa et tortor ultrices egestas. Pellentesque orci urna, semper sed hendrerit ut, semper quis nulla. In hac habitasse platea dictumst. Ut egestas libero ut magna lacinia interdum. </p> </div><!--end content--> <div class="grid_12" id="footer"><p>This is an <em>Ecommerce Developer</em> demonstration.</p></div><!--end footer--> </div><!--end wrapper--> <script src="glow/1.7.3/core/core.js"></script> <script src="glow/1.7.3/widgets/widgets.js"></script> <script src="js.js"></script> </body> </html>
Here is the default style sheet.
body {background: #ffcb7c; color: #787730;}
h1 {font-size: 1.5em;}
#header, #footer {margin: 50px auto;}
And here is the Christmas style sheet. Notice that, for this example, the only changes are to the background color and font color.
body {background: #990700; color: #ffcb7c;}
h1 {font-size: 1.5em;}
#header, #footer {margin: 50px auto;}
With the markup mentioned above, I get a simple page with an off-white (perhaps even light orange) background and pale green copy.
If I changed the HTML to call the Christmas style sheet, I would get a very different looking page.
Now, I am going to write a short PHP script that will check to learn the month and day of the month, and then select either the Christmas style sheet or the default style sheet depending on the time of the year.
I will show you the entire script, and then step through it line by line.
<?php
if(date('n') == 12 && date('j') < 26)
{
echo "<link type='text/css' rel='stylesheet' href='christmas.css'>";
}
else
{
echo "<link type='text/css' rel='stylesheet' href='style.css'>";
}
?>
As you can see, I first declare my PHP script and begin a conditional statement.
<?php
if(date('n') == 12 && date('j') < 26)
The PHP function date() can return the month, year, day, hour, minute, second, microsecond, week number (i.e. the 42nd week of the year), time zone, or the number of seconds since the UNIX epoch on January 1, 1970. And it can return most of these various measurements of time in any number of formats.
For my purposes, I used n, which returns the numeric representation of the month, and j, which returns the number of the day of the month. For a complete list of the parameters date() will accept, check out the official PHP Manual.
If you read my conditional statement in English, it would say, "if the number representing this month is exactly equal to 12, and if the number representing this day of the month is less than 26, take the following action."
The next portion of the script simply includes the Christmas style sheet.
{
echo "<link type='text/css' rel='stylesheet' href='christmas.css'>";
}
I employ an else statement to catch all other possible outcomes. This else statement adds the default style sheet to the page.
else
{
echo "<link type='text/css' rel='stylesheet' href='style.css'>";
}
?>
Summing Up
Placed in the head of the HTML file, my script does just what it is supposed to do. Come December, the Christmas style sheet will appear, only to change again programmatically on the 26th of that month.
