How to use dyanamic css in website

Question

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.

You could have a script saying when you click one of the icons, add a class to the body, e.g. `.theme-green`, then style accordingly. Try researching jQuery `addClass` and then post some code if you're struggling. — davidpauljunior, Dec 13 '13 at 06:32

score 1 · Answer 1 · answered Dec 13 '13 at 06:44

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

score 0 · Answer 2 · edited Dec 13 '13 at 10:23

0

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')">

edited Dec 13 '13 at 10:23

Setthase

13,988
2
27
30

answered Dec 13 '13 at 07:46

Catalin Sterian

96
1
10

similar question => http://stackoverflow.com/questions/3913359/how-to-load-css-using-jquery – Catalin Sterian Dec 13 '13 at 07:47

score 0 · Answer 3 · edited Dec 15 '13 at 12:25

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!

How to use dyanamic css in website

3 Answers3