Many companies must think that web site administrators have lots of time to spare. They obviously have more than enough time on their hands to add a simple theme to the web site. Just for Halloween. Or Christmas. Or Easter. Or Thanksgiving. Or the Queen's/King's/President's/Managing Director's/ Managing Director's wife's birthday.
That's on top of the normal site maintenance. However, there is a simple answer - that's to work 20 hours a day instead of 18. Or, if that doesn't appeal, to implement a simple piece of Javascript code in conjunction with a little CSS.
Setting up the CSS
This technique will make use of multiple CSS (cascading style sheet) files, and one will be required for each theme. There will, therefore be a main theme (for example main.css) for standard days:
body {
background-color: cyan;
color: blue;
}
And then a modified theme (for example halloween.css):
body {
background-color: black;
color: red;
}
In this example simple color changes are being made but the themes could include:
- a change of background image
- specialised fonts
After that it is all down to coding
Changing the Theme Using Javascript
The Javascript code makes use of a built-in in object – the date object:
< head>
< script language=javascript>
today = new Date();
var d1 = new Date("October 25, " + today.getFullYear() + " 00:00:01");
var d2 = new Date("November 1, " + today.getFullYear() + " 00:00:00");
Here three dates have been created:
- today's date
- a date representing the date for Halloween
- a date from which the Halloween theme is to be displayed
The aim is to display the theme over a few days up to (and including) Halloween and this can be done by using a simple comparison:
if ((today > d1) && (today <= d2)) {
document.write ('
');
} else {
document.write ('
');
}
< /script>
< /head>
In the example above halloween.css will be used for the Halloween period with main.css being used at all other times. However, it's not just the CSS theme that can be changed.
Adding Date Dependant Content with Javascript
We've seen how easy it is to change a CSS theme by implementing some simple Javascript code and it's just as easy to add date dependant web page content. So, for example, it's possible to and a special Halloween greeting:
< body>
< script language=javascript>
if ((today > d1) && (today <= d2)) {
document.write("It's Halloween...");
}
< /script>
< /body>
And, of course, this technique can be applied to any date range (such as Christmas) and then the web site administrator can be left to do their real job (or go trick-or-treating depending on the time of year).
if ((today d1) && (today = d2)) {
document.write("It's Halloween...");
}
Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...
