jQuery Themes

Default Settings

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 http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/.

First you need to initialise the themes so as to pick up any saved setting (see Cookies tab).

$.themes.init({themeBase:
	'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/',
	onSelect: displayName});

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').toggle(function() {
		$(this).text('Re-attach');
		$('#defaultThemes').themes('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultThemes').themes();
	}
);

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

Appearance

Control how the theme selection is presented.

Full view:

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

Appear on hover: Select a theme...

$('#selectLabel').mouseover(function() { $('#selectThemes').show(); });
	
$('#selectThemes').themes();

Click for a popup: Select a theme...

$('#popupTheme').click(function() {
	var offset = $(this).offset();
	$('#popupThemes').css('left', offset.left).
		css('top', offset.top + $(this).outerHeight());
	$('#popupThemes,#popupClose').toggle();
});

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

A select few with no preview: Change

$('#namedThemes').themes({showPreview: false,
	themes: ['smoothness', 'humanity', 'mintchoc']});
	
$('#changeThemes').toggle(
	function() { $('#namedThemes').themes('change', {showPreview: false,
		themes: ['southstreet', 'cupertino', 'blacktie']}); },
	function() { $('#namedThemes').themes('change', {showPreview: false,
		themes: ['smoothness', 'humanity', 'mintchoc']}); }
);

Additional Themes

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/ui.all.css');
$('#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);

Persistence via Cookies

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 

$('#viewCookie').click(function() {
	$('#cookieValue').text(document.cookie);
});

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)));
	$.themes.setDefaults({cookieExpiry: expiry,
		cookiePath: $('#cookiePath').val(),
		cookieDomain: $('#cookieDomain').val()});
});

In the Wild

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

To add another example, please contact me (kbwood{at}iinet.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.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$.themes.setDefaults({
	themeBase: '',  // The base URL for all the theme files
	defaultTheme: '', // The ID of the default theme, first one if blank
	cookieExpiry: 0,  // The expiry time for the theme cookie, date or number of days
	cookiePath: '/',  // The path that the cookie applies to
	cookieDomain: '',  // The domain that the cookie applies to
	onSelect: null  // Callback on theme selection, theme ID and URL are passed as parameters
});
$(selector).themes({
	themes: [],  // List of theme IDs to use, empty for all
	icons: 'img/themes.gif', // Horizontal amalgamation of all theme icons
	iconSize: [23, 20],  // The width and height of the individual icons
	previews: 'img/themes-preview.gif', // Horizontal amalgamation of all theme previews
	previewSize: [90, 80],  // The width and height of the individual previews
	showPreview: true,  // True to display a popup preview, false to not show it
	compact: true  // True if a compact presentation should be used, false for full
});