Build the ANidea Theme Switcher using jQuery

jQuery Theme Changer
While designing ANidea.com, one of the features we wanted to implement was the ability to have multiple themes.

That idea was the genesis for the Theme Switcher on the site. After some research and clever thinking by the team, we came up with the current system. If you haven’t played with it, give it a shot: click the button that says “Change Theme” on the bottom right of your browser window and select a new image. Go ahead and play with it, you’ll stay on this page.

This post will take you step by step through how we did it. In the first part of this tutorial, we’ll cover the client side of Theme Switcher, which consists of the HTML, CSS and JavaScript. In a later post, we’ll cover how to integrate the switcher into WordPress and manage the themes.

To speed the development of the Switcher we used what we call the AgencyNet Standards Framework*. It’s a collection of best practices, libraries, code and plug-ins developed internally to speed up the development of standards based websites. The Framework also contains a library of best practices that help us ensure cross-browser compatibility. The foundation of the ANidea blog is built on this framework.

We use jQuery as the JavaScript library of choice for our Framework. This was a no brainer. There is a vast library of resources and loads of documentation supporting it, which allows us to develop what we want with ease.

*We included a stripped-down version of the Framework. Please note that the Framework is a work-in-progress. If you interested in learning more about it, please let us know.

Defining the Project

Let’s get back to the Theme Switcher. Before I open any text editor to start writing, I verbally describe the entire project, so there is an understanding of what needs to happen, in non-technical language. This helps ensure that the project manager and developers are on the same page. I also create a technical explanation of the goal to fully wrap my head around what I need to code. Believe me, that speeds up development and avoids unnecessary rewrites. Let’s briefly go over on what needs to happen.

The non-technical explanation: The user will be able to select a theme that changes the background of the site and save that selection. To do this, a sliding drawer at the bottom of the browser window will reveal a list of themes to choose from. Once the user clicks, the background theme will change.

The technical explanation: Using JavaScript, we need to replace the current stylesheet on the fly with a new theme that the user has selected. The new stylesheet will have classes with properties that will overwrite the current stylesheet. To save the selected theme, we are going to create a site cookie. We need a container drawer to hold the thumbnails of the themes, which will be clickable and execute the theme switching. The drawer needs to be positioned at the bottom of the browser regardless of screen size and we’ll use JavaScript to reveal and hide the drawer smoothly. Thankfully, jQuery will help us to achieve a lot of the functionality we want, making everything much easier.

This tutorial will be broken down into the following components:

  • Basic Setup
  • The Theme Drawer
  • The Theme Carousel
  • The Themes
  • The Theme Switcher
  • Saving the Theme

For web development, I mainly use TextMate and CSS Edit.

All the files used in this tutorial are in the zip file.
Download Zip

Basic Setup

Step 1
Let’s organize the folder structure first, keeping it simple and standardized:

Folder Structure

Step 2
Create a new HTML file named switcher.html. To focus on the Theme Switcher component itself, the following already includes a base CSS file that has the theme switcher styles, the latest version of jQuery and the JavaScript file that will handle most of the work. The HTML also includes a content wrapper with “lorem ipsum.”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>ANidea.com Theme Drawer and Switcher Tutorial!</title>

<link rel="stylesheet" href="css/anet-sfw-screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, projection" />

<!-- JavaScript -->
<script type="text/javascript" src="js/lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/theme-switcher.js"></script>

</head>

<body>
<div id="wrapper">
<div id="header">
<h1>The ANidea Theme Switcher</h1>
</div><!-- end #header -->
<div id="main-column">
        <p>Aliquam erat volutpat. Donec tincidunt. Morbi fermentum viverra ligula...</p>

<p>Proin ante. Vestibulum blandit eros id neque...</p>

    </div><!-- end #main-column -->
    <div id="sub-column">
    	<h3>A List</h3>
    	<ul>
<li><a href="http://anidea.com">ANidea</a></li>
    		<li><a href="http://agencynet.com">AgencyNet</a></li>
    	</ul>
    </div><!-- end #sub-column -->
</div><!-- end #wrapper -->

</body>
</html>

The HTML DOCTYPE that we are going to use is XHTML Strict. Briefly, using the Strict Doctype reduces discrepancies in how the HTML will be rendered across different browsers. It will take some extra work to make it validate and achieve certain features (like opening links in new windows), but with the help of JavaScript we can control that. Plus, when you get used to structuring your HTML in the Strict Doctype, it will look prettier and cleaner (until HTML5 (which is still early in drafting stages) becomes widely supported).

Lets also add some styles to the HTML…

/* @group Global Styles */

body {
background: #000;
font-size: .8em;
}

#wrapper {
background: #fff;
margin-top: 20px;
}

#main-column {
padding: 10px 0;
}

#sub-column {
background: #fefefe;
padding: 10px 0;
}

#sub-column ul {
list-style: none;
}

#sub-column li {
margin: 0 0 1px;
}

#sub-column li a,
#sub-column li a:link,
#sub-column li a:active,
#sub-column li a:visited
{
display: block;
padding: 8px 5px;
background: #ccc;
color: #333;
font-weight: 700;
text-decoration: none;
}

#sub-column li a:hover {
background: #999;
}

/* @end */

Pages: 1 2 3