I want to use dynamic css in my website, like there are 4 different colors icons are available on top of the website and If user click on one of the icon whole color scheme and icons colors of website will be change.
This is previously available in yahoo.com(not sure currently available or not).
Also I do not want to use any third party css lib. or tools.
Can any one help to suggest best way to achieve this.
Define your styles in css. For example...
body.white{
background-color:white;
color:#333;
}
body.black{
background-color:black;
color: white;
}
body.blue{
background-color:blue;
color:white;
}
Then, add the image buttons to change the skin/theme on your page and add a click handler that changes the skins. here's an example
functon loadstyle(style){
$('link#basestyle').attr('href', '/css/'+style+'.css');
}
example html code: in head:
<link type=text/css' rel='stylesheet' id='basestyle' href=/css/style1.css'>
in body:
<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style1')">
<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">
<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">
OK, so initially, add a default class in body. like:
<body class="default">
and the on the click of the icons, just change the class of the body like:
<i class="theme-icons" data-class="default"></i>
<i class="theme-icons" data-class="red"></i>
<i class="theme-icons" data-class="blue"></i>
<i class="theme-icons" data-class="green"></i>
$(".theme-icons").click(function(){
$("body").removeClass("default red blue green").addClass($(this).attr("data-class"));
});
keep your css nested within these theme classes. like:
.default .something{
color:#0F0;
}
.red .something{
color:red;
}
.blue .something{
color:blue;
}
.green .something{
color:green;
}
Good luck!
.theme-green, then style accordingly. Try researching jQueryaddClassand then post some code if you're struggling.