Blog
CSS
HTML
JQuery
JScript
Website
The beauty and attractiveness of a webpage or website depends upon the themes and skin of that very webpage or website. The theme or the skin of webpage is usually stored in a style sheet that is either embedded internally or linked externally. In both cases the style sheet is the main part that gives a website not only a user friendly interface to the data contained in that website or webpage but also a charming and pleasant feeling to the viewer. CSS or the cascading style sheets is the style sheet language that was developed by World Wide Consortium in 1996. This is the language that make the style sheets or the themes of the webpages. Normally and usually the user or the visitor of the web has no control over the style sheets (themes of the webpages). He or She feels and looks exactly how the author wants to show them.
The plain white background with black text on it, if annoys the visitor let it do because the author of that page has set the skin of the website so. If the visitor want to see dark text with light background and the admin of the website has chosen the opposite then it is the admin’s right to choose the CSS for the website. Will it always remain same or will it change.
The recent advancements in the technology has overcome this problem. Today a visitor can choose a theme from a set of different themes provided by the author of the website. This feature helps the visitor to change the skin of the webpage according to his or her mood. In this post I am going to share a simple javascript method for the changing the CSS style sheet. This method is simple easy to install and easy to handle. The user can change the default theme of the webpage by simply clicking the button or image representing different themes.
To add the user selected CSS function in your website, there are only two steps. First just put the following JavaScript code in the <head> tag of your webpage.
Code
<script type="text/javascript" >function cssChange(path)
{
if (document.createStyleSheet) {
document.createStyleSheet(path);
}
else {
var cssFile = document.createElement('link');
cssFile.setAttribute('rel','stylesheet');
cssFile.setAttribute('type','text/css');
cssFile.setAttribute('href', path);
document.getElementsByTagName('head')[0].appendChild(cssFile);
}
}
</script>
And second call the function with the URL of the external CSS file from inside you html. You can call the function by adding button or image, which when clicked by the user will set the CSS file (linked to the button or image) as the default CSS of the webpage.
The HTML code for calling the function with button or image is as follows:
Code
<button onclick="cssChange('URL of Default CSS')">Default CSS</button><button onclick="cssChange('URL of 1st CSS')">1st CSS</button>
<button onclick="cssChange('URL of 2nd CSS')">2nd CSS</button>
Code
<img src="image URL" onclick="cssChange('URL of Default CSS')" title="image title"/><img src="image URL" onclick="cssChange('URL of 1st CSS')" title="image title" />
<img src="image URL" onclick="cssChange('URL of 2nd CSS')" title="image title" />
Change the URL of CSS with their respective URL’s i.e. for “URL of Default CSS” put the default CSS file URL that is set by default, similarly for “URL of 1st and 2nd CSS” put the respective alternative CSS files URL.
One thing I have forgotten to mention in the following post is that CSS files used either by default or for user selection must by externally saved the default CSS file should be linked as normal while the URLs of other CSS files should be used only in calling the function(URL of 1st or 2nd CSS). Default CSS should also be used in the function so that users can return to the default version of the web page easily.
If you still have some queries or problem in understanding the post, you are welcome to ask any questions.
No comments:
Post a Comment