jQuery Themes

This plugin allows the user to select one of a number of CSS themes to apply to the current site. The selection is immediately used and is also persisted in a cookie so that it applies to future visits. The standard themes come from the jQuery ThemeRoller tool and can be referenced at https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/.

You can set any global settings for the themes that are different from the defaults.

$.themes.setDefaults({cookieExpiry: 7});

Finally, the theme selection functionality can easily be added to a division with appropriate default settings. The resulting links allow the user to easily change the theme for this site. See the results in the sampler below.

You can also remove the themeing functionality if it is no longer required.

All themes: Remove

$('#defaultThemes').themes();

$('#removeThemes').click(function() {
	var destroy = $(this).text() === 'Remove';
	$(this).text(destroy ? 'Re-attach' : 'Remove');
	$('#defaultThemes').themes(destroy ? 'destroy' : {});
});

Processed fields are marked with a class of hasThemes and are not re-processed if targetted a second time.

Control how the theme selection is presented.

Full view:

$('#fullThemes').themes({compact: false});

Appear on hover: Select a theme...

$('#hoverThemes').hover(function() { $('#selectThemes').toggle(); });
	
$('#selectThemes').themes();

Click for a popup: Select a theme...

$('#popupTheme').click(function() {
	var relParent = null;
	$('#popupTheme').parents().each(function() {
		var pos = $(this).css('position');
		if (pos == 'absolute' || pos == 'relative') {
			relParent = $(this);
		}
		return !relParent;
	});
	var offset = $(this).offset();
	var relOffset = (relParent ? relParent.offset() : {left: 0, top: 0});
	$('#popupThemes').css({left: offset.left - relOffset.left,
		top: offset.top - relOffset.top + $(this).outerHeight()});
	$('#popupThemes,#popupClose').toggle();
});

$('#popupThemes').themes();

A select few with no preview: Change

$('#namedThemes').themes({showPreview: false,
	themes: ['smoothness', 'humanity', 'mintchoc']});
	
$('#changeThemes').click(function() {
	var smoothness = $('#namedThemes').themes('option', 'themes')[0] === 'southstreet';
	$('#namedThemes').themes('option', {showPreview: false,
		themes: smoothness ? ['smoothness', 'humanity', 'mintchoc'] : ['southstreet', 'cupertino', 'blacktie']});
});

You can add new themes to the list as shown below.
The parameters are the id, display name, icon index/URL, preview index/URL, and theme CSS URL.

Add your own:

$.themes.addTheme('bright', 'Bright Eyes',
	'img/bright.png', 'img/bright-big.png', 'bright/');
$('#addTheme').themes({themes: ['smoothness', 'bright'], compact: false});

The following list shows the current themes with their IDs:

• To be filled

var html = '';
$.each($.themes.getThemes(), function(id, theme) {
	if (id != 'bright') {
		html += '<li>' + id + ' - ' + theme.display + '</li>';
	}
});
$('#themesList').html(html);

The theme selection is saved as a cookie so that the next time the user returns their chosen theme is automatically loaded. If none is set, the defaultTheme setting is used, or, if that is blank, the first in the theme list.

You can control the expiry of the cookie by setting cookieExpiry to be either an actual date or the number of days in the future. Leave it at the default of 0 to expire at the end of the current session.

You can also set how much of the site the theme applies to by using the cookiePath and cookieDomain settings. These default to '/' and '' respectively to indicate the full site under the current domain.

View cookie value: View 

Clear cookie value: Clear

$('#viewCookie').click(function() {
	$('#cookieValue').text(
		!document.cookie.match(/.*(themeID=[^;]+).*/) ? 'None' :
		document.cookie.replace(/.*(themeID=[^;]+).*/, '$1'));
});

$('#clearCookie').click(function() {
	var expiry = new Date();
	expiry.setDate(expiry.getDate() - 1);
	document.cookie = 'themeID=; expires=' + expiry.toUTCString() +
		($('#cookiePath').val() ? '; path=' + $('#cookiePath').val() : '') +
		($('#cookieDomain').val() ? '; domain=' + $('#cookieDomain').val() : '');
	$('#viewCookie').click();
});

Change cookie settings: Save

Expiry: e.g. 5 or 26 Jan 2010

Path:

Domain:

$('#saveSettings').click(function() {
	var expiry = $('#cookieExpiry').val();
	expiry = (isNaN(expiry) ? new Date(Date.parse(expiry)) :
		addDays(parseInt(expiry)));
	$('.hasThemes').themes('option', {cookieExpiry: expiry,
		cookiePath: $('#cookiePath').val(),
		cookieDomain: $('#cookieDomain').val()});
});

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (wood.keith{at}optusnet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.