How to allow your visitors to switch between alternate CSS Styles / Themes

Switching between alternate CSS (Cascading Style Sheets) and themes is very interesting topic to share with you. So lets focus for ten minutes only to learn this trick. It is very handy and very easy to learn. After learning this trick you can gift one more feature to your users of your website/blog. CSS provide webmasters to control over their websites' appearance. Like your visitor prefers a particular design, or theme, that person can simply switch to that theme using their browser.

On most sites, web designers typically include a style sheet for their site using a link command like the following:

<link href="http://www.blogger.com/widgets/2300090209-widget_css_bundle.css" rel="stylesheet" type="text/css" />

If you want to provide alternate style sheets for your site, you will need to give each style sheet a title, so that the browser will know that you are providing alternatives for your site. For example, if you want to provide two themes for your site, one called "Grey" and the other "Blue", you can specify them as follows, instead of the above example.

<link href="http://example.com/css/grey.css" rel="stylesheet" type="text/css" title="Grey" />
<link href="http://example.com/css/blue.css" rel="alternate stylesheet" type="text/css" title="Blue" />

See above the default style sheet that will be used is "Grey". This is the preferred style sheet, and it is indicated by specifying a "rel" attribute of "stylesheet". The "Blue" stylesheet is an alternate style that the user can choose. As you can see, it has a "rel" attribute of "alternate stylesheet". Another way of specifying that a particular style sheet is to be the default is to create a meta tag like the following:

<meta http-equiv="Default-Style" content="grey">

If you specify both the "alternate stylesheet" attribute value as well as the meta tag, the latter takes precedence. It is recomended by expert web developers that be consistent and stick to either one or the other method on all your pages. It'll make debugging and modifications easier, and reduce careless mistakes in the future.

Persistent Styles

Sometimes you may want a particular style sheet to be applied no matter which theme the user selects. Put all those common styles into a separate file, and include it without a title tag like this:

<link href="http://example.com/commoncss/test.css" rel="stylesheet" type="text/css" />

When no title tag is specified, the browser will always load that stylesheet. Such a style sheet is known as "persistent".

In other words, if a persistent style sheet is added to the example site above, the HEAD section will have the following declarations:

<link href="http://example.com/commoncss/test.css" rel="stylesheet" type="text/css" />
<link href="http://example.com/css/grey.css" rel="stylesheet" type="text/css" title="Grey" />
<link href="http://example.com/css/blue.css" rel="alternate stylesheet" type="text/css" title="Blue" />

The test.css style sheet will always be loaded. The default style sheet that will be used is the "grey" one. If the browser supports style switching, the visitor will be able to switch to the "blue" style as well.

How to Switch Alternate Style Sheets / Themes

Let's assume that we have the following style sheets defined in our HEAD section. This is the same code described and explained above.

<link href="http://example.com/css/grey.css" rel="stylesheet" type="text/css" title="Grey" />
<link href="http://example.com/css/blue.css" rel="alternate stylesheet" type="text/css" title="Blue" />

There are many ways you can provide your visitors to select the theme or CSS they want like radio buttons, drop down selection boxes, normal submit buttons, text links, etc. For usability reasons, you should not use things like checkboxes which suggests to users that they can simultaneously select a few themes and have them work together.

Here's an example of HTML code using normal submit buttons.

<form>
<input type="submit" onclick="switch_style('grey');return false;" name="theme" value="Grey Theme" id="grey" />
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue" /></form>

When the visitor clicks any of the buttons, the JavaScript onclick handler, switch_style(), will run. The function will be passed either 'grey' or 'blue' as its parameters, depending on which button is clicked. The words "grey" and "blue" correspond to the title attributes for the link elements referencing the style sheets.

JavaScript Function to Change Style Sheets

The actual JavaScript code needed to implement CSS style switching given below:


// *** TO BE CUSTOMISED ***

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

// *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )

{

var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title,
style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}


To ensure that the visitors' style sheet settings remain when they visit other pages of your site, as well as when they reload the page, you will also need to add an onload attribute to your web pages' body tag. For example, change <body> to the following:

<body onload="set_style_from_cookie()">

This causes the browser to run the set_style_from_cookie() function when the page is loaded. The function merely checks for the style-setting cookie, and if present, switches the style sheets accordingly. Otherwise, it does nothing.

source:thesitewizard.com

Related Posts :