Advertisement

How to Create a Time Based CSS Style Sheet Switcher

by

Style switchers have become a popular feature on websites these days. CSS style sheets allow a Web Designer to change the look and feel of a website with little effort. Some sites use "Day" and "Night" type of style switchers that automatically change the site theme based on the time of day.

This tutorial shows you how to create a time based CSS style sheet switcher using PHP that lets you change multiple style sheets at once at specific times of the day. There's also a little bit of jQuery UI thrown in just for fun!


Why PHP instead of JavaScript?

The one drawback to using PHP for a time based CSS style sheet switcher is that the time is based on either the web hosting server or on a "time zone" set in the script.

When I was building my personal portfolio site, I created a time based style sheet switcher using JavaScript and jQuery. The time function of the script worked correctly. However, there was always a brief "flash" of the default style sheet when the web pages loaded.

JavaScript heavy websites can have problems with conflicts between various JavaScript scripts. I decided to use PHP instead for the CSS style sheet switcher. Because PHP is server side, there were no JavaScript conflicts and the script worked as expected.

The one drawback to using PHP for a time based CSS style sheet switcher is that the time is based on either the web hosting server or on a "time zone" set in the script. With JavaScript you can set time functions to be based on a user's computer.


Before We Begin

If you are new to PHP, you need to set up and configure a server environment on your local computer (PHP files can not be viewed in a web browser). My personal preference is XAMPP. This article includes a few software options and basic instructions on how to set up a local server.

Although you can use Notepad to create and edit PHP files, a code editor can be very helpful when writing web pages in PHP and other programming languages. Please refer to these articles for additional information on choosing a code editor:

The code used in the tutorial creates a basic CSS style sheet switcher and you can view the demo here. The source files include two additional demos.

Now, let's get started!


Step 1: Create the 1st CSS Style Sheet (Night)

Create a CSS style sheet called style-1.cssand include the following code:


Step 2: Create the 2nd CSS Style Sheet (Morning)

Open style-1.css and save it as style-2.css. Change the body background image from bokeh_2.jpg to bokeh_4.jpg. Change main_image_1.jpg to main_image_4.jpg.


Step 3: Create the 3rd CSS Style Sheet (Afternoon)

Use style-1.css or style-2.css to create a 3rd style sheet style-3.css. Change the body background image to bokeh_3.jpg and the main image to main_image_5.jpg


Step 4: Create the 4th CSS Style Sheet (Evening)

Create a 4th style sheet style-4.css. Change the body background image to bokeh_1.jpg and the main image to main_image_8.jpg

For steps 2 through 4, feel free to change other elements like font colors and image borders. Instead of using the images provided in the source files, you can use your own images to create custom CSS styles.


Step 5: Download jQuery and jQuery UI

To show how the PHP script changes multiple style sheets at once, jQuery Themeroller Themes are being used to style the tabbed content area of the web page.

Go to the jQuery UI Download Page and download the "Flick" and "Start" themes.

Next, go to the official jQuery website and download jQuery.


Step 6: The Markup

Create a PHP file that includes the following code:


Step 7: PHP CSS Stylesheet Switcher Code

Create a PHP file that includes the following code:


Breakdown of the Markup

PHP Include for rel="stylesheet" Links

The script for the CSS Style sheet Switcher is going to be contained in a PHP include file called stylesheets.php.

A PHP include() statement includes and evaluates a specified file. The stylesheets.php include file is referenced by this code:

Because we are using a PHP script to change CSS style sheets at set times, the rel="stylesheet" links will be generated by the PHP script.

Reference jQuery and jQuery UI Libraries

We need to make sure that the web page references the jQuery and jQuery UI libraries.

Between the head tags of the web page the following code has been added:

Initialize jQuery UI Tabs

This tutorial includes jQuery UI Tabs using the default functionality. The following code initializes the tabs:

Container Div for jQuery UI Tabs

(Ending </div> tags for Wrapper and Content Container 1 are shown in the Code block for the Markup of the jQuery UI Tabs)

Most of the jQuery UI Widgets are programmed to expand to 100% width of the content area where they are placed.

The container div content_container_1 has been set to a fixed width of 650px in the CSS so that the tabbed content area does not expand the entire width of the screen.

Main Image Markup

In order for the main image to also be changed at set times using the PHP script, it needed to be included on the web page as a CSS background image.

So instead of adding the image to the web page using markup like this:

It was added to the web page as a CSS background image of a <div> with the class "main_image", like this:

Markup for the jQuery UI Tabs

The below markup adds the tabbed content area that is powered by jQuery UI and has been styled using jQuery Themeroller Themes.

The Menu "Tabs" are generated by an unordered list. The content sections are generated by <div> tags that have unique IDs that correspond to anchor links in the <li></li> tags.

For example: <div id="tabs-1"> corresponds with <a href="#tabs-1">


Breakdown of PHP Stylesheet Switcher Code

Set the Default Time Zone:

The code date_default_timezone_set sets the default timezone used by all date/time functions in a script.

If the script does not include date_default_timezone_set, then the web hosting server time will be used for all date/time functions in the script.

Please refer to the List of Supported Timezones to find the appropriate timezone for your location.

Newer versions of PHP incorporate "Daylight Savings Times" into the functionality of date_default_timezone_set. Some older versions of PHP do not take "Daylight Savings Times" into account.

Set the Time in 24 Hour Format:

date("H") formats the local time/date in a 24-hour format of an hour, with leading zeros. Click Here to view information about the 24-hour clock.


Breakdown of If, Elseif, Else Statement

I've broken down the rest of the PHP code to show how the PHP script will function line by line. There are several functions being utilized in the code including:

if

If 00 (midnight) is Less than or equal to current time AND current time is Less than 07 (7:00am) Then the script will apply style-1.css and flick CSS style sheets.

elseif

If 07 (7:00am) is Less than or equal to current time AND current time is Less than 12 (12:00pm) Then the script will apply style-2.css and start CSS style sheets.

elseif

If 12 (12:00pm) is Less than or equal to current time AND current time is Less than 18 (6:00pm) Then the script will apply style-3.css and start CSS style sheets.

else

If NONE of the conditions are met in the "if...elseif" statements, Then the script will apply style-4.css and flick CSS style sheets.


Conclusion

With CSS, you can create many different styles for your web pages. Using PHP, you can apply those styles dynamically to your website. Throw in a little jQuery UI, and your web pages will not only be fun for you to create, but fun for your visitors as well!

If you have any questions about this tutorial, please ask them below, Thank you so much for reading!

Advertisement