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:
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.
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.
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:
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:
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.
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.
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.
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
onloadattribute to your web pages'
bodytag. For example, change <body> to the following:
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.