I like to redesign. I like it a lot. This was fine behavior back in the day, when websites had less going on. These days, even my small slice of The Net is more complex than ever. Constant redesigning just isn’t feasible anymore.

I’ve compromised by way of Style Switching. I’d like to walk you though the process so that 1.) I don’t forget, and 2.) I’ve shared my knowledge. You can demo this on leihu.com, just hover the logo, and click the gear.

What you’ll need to get started.

I like to use ExpressionEngine’s global variables for scripts and CSS links, but for the sake of brevity, and clarity, I’m going to show you how to do this using hard code.

1.) Call the default stylesheet. I put this in the head. Give this a class of .theme for the jQuery to use later.

<link href="/path/to/default.min.css" title="common-styles" type="text/css" rel="stylesheet" class="theme">

2.) Call the jQuery, cookie plugin, and default javascripts. I like to put these in the head, because it helps prevent a flash of styles later.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="/path/to/plugins/cookie.min.js" type="text/javascript"></script>
<script src="/path/to/default.js" type="text/javascript"></script>

3.) Build a navigation for selecting themes. I’m using a standard ul, ‘cause it’s easy to style, but you can use a drop down, or a nav whatever you prefer.

<ul class="themes">
	<li><a href="#" rel="/path/to/default.min.css">Default</a></li>
	<li><a href="#" rel="/path/to/alternative.min.css">Alternative</a></li>

4.) Make the theme selection work. Also remember the visitor’s selection with this jQuery magic. This goes into default.js.


// ==============
// theme switcher
// ==============

	// listen for clicks on the a links within .themes
	$('.themes a').on('click',function(){
		// change the href of link.theme to match the rel of this
		// set a cookie to remember
		$.cookie('theme-cookie',$(this).attr('rel'), {expires: 365, path: '/'});
		// prevent this from reloading the browser
		return false;


5.) Prevent a flash of style. I place this in the head just below the jQuery, plugin, and default.js calls. It prevents the website from flashing the default stylesheet, while using an alternative.

<script type="text/javascript">

6.) Profit. Well, you know. In any case, that’s that. .(JavaScript must be enabled to view this email address)