Quick Change CSS - Is it possible?

[Stinky666]

I'm unsure on if this is possible. What I'd like to do, is make one theme, and have it possible for the individual user to select from a variety of colour options, so then it will change certain colours of that theme. For example, lets say I have done one theme in the following colour combinations:

Blue and Yellow
Purple and Green
Black and White


Now, by default lets say it'd be the first of those: Blue and Yellow.
Somewhere, I'd want to place the other two options, possibly as a small square or something, so you then click one and it'd change the colour/css only of certain/specific elements, to that new colour scheme.

An example could be taken from a Wordpress Theme (I think most use it, not sure):
www.kriesi.at/themes/enfold/?skin=Vine

On the left side you will see a tab option, open it up, and there is a variety of coloru schemes for that theme to use. If you click one it changes specific elements.

Another example is: theme-fusion.com/avada/
On the right side this time, it has more options. I'm not bothered about the other options, such as wide/fluid or boxed. Different BG's could be cool. But the thing I am interested in, is the "simpler" version, where it's a set amount of predefined colour schemes, that individual users select to use.


Can this be done without a plugin, and using only the templates and CSS, possibly headers and footers (if need be)? If it can be, any help is appreciated. I genuinely have no clue where I would start haha.

[mildred]

Theoretically you could use javascript to switch the linked .css file for you theme with one of your other theme's css files, but I don't know how desirable that would be or if there's a policy about things like that.

[Tim Camara]

This is possible to do without a plugin.  The easiest way to do this would be to find every CSS rule that contains a color that you want to be able to be switched, duplicate them once per switching option, and prefix all of them with a class, e.g. this:

.post_color { color: red; } // not an actual rule, obviously
would become this:

.post_color { color: red; } // leave as a default
.option_1 .post_color { color: blue; } // option 1
.option_2 .post_color { color: green; } // option 2
.option_3 .post_color { color: white; } // option 3

(I would try to duplicate as few rules as possible, to keep the size of the CSS file low, this'll help with page load times)

Now that this is done, you should be able to control the look of the page simply by adding a class="option_1" (or option_2, option_3, etc.) to the html tag.  To allow users to control the class that's added, you'll need two things, the control on the page to let them choose (select box or radio buttons or something) and the JS to execute/remember their choice.  For the control, simply add it in to your layout template wherever you want:

<select name="whatever"><option value="1">option 1</option><option value="2">option 2</option>...</select>
 For the JS, you'll need to add a handler on the control, which will then set either a cookie or localstorage to remember their choice:

$('select[name="whatever"]').change(function() {
pb.cookie('theme_switch_unique_name').set(this.val());
});
Finally, you'll need some JS that on page load will detect the presence of either the cookie or the localstorage and set the class accordingly:

$(document).ready(function() { // This might be better as a load event so it happens sooner
$('html').addClass(pb.cookie('theme_switcher_unique_name').get());
});
This code is untested, so there might be bugs or syntax errors, but it should get the gist across.  This way also allows the CSS to be cached, so you don't have to dynamically load a second CSS file or anything.

[mildred]

Tim Camara I know I'm not the intended target but that is hella helpful and informative! I'm kind of interested in trying it myself now.

[Stinky666]

Mar 13, 2014 9:09:07 GMT -8 Tim Camara said:

This is possible to do without a plugin.  The easiest way to do this would be to find every CSS rule that contains a color that you want to be able to be switched, duplicate them once per switching option, and prefix all of them with a class, e.g. this:

.post_color { color: red; } // not an actual rule, obviously
would become this:

.post_color { color: red; } // leave as a default
.option_1 .post_color { color: blue; } // option 1
.option_2 .post_color { color: green; } // option 2
.option_3 .post_color { color: white; } // option 3

(I would try to duplicate as few rules as possible, to keep the size of the CSS file low, this'll help with page load times)

Now that this is done, you should be able to control the look of the page simply by adding a class="option_1" (or option_2, option_3, etc.) to the html tag.  To allow users to control the class that's added, you'll need two things, the control on the page to let them choose (select box or radio buttons or something) and the JS to execute/remember their choice.  For the control, simply add it in to your layout template wherever you want:

<select name="whatever"><option value="1">option 1</option><option value="2">option 2</option>...</select>
 For the JS, you'll need to add a handler on the control, which will then set either a cookie or localstorage to remember their choice:

$('select[name="whatever"]').change(function() {
pb.cookie('theme_switch_unique_name').set(this.val());
});
Finally, you'll need some JS that on page load will detect the presence of either the cookie or the localstorage and set the class accordingly:

$(document).ready(function() { // This might be better as a load event so it happens sooner
$('html').addClass(pb.cookie('theme_switcher_unique_name').get());
});
This code is untested, so there might be bugs or syntax errors, but it should get the gist across.  This way also allows the CSS to be cached, so you don't have to dynamically load a second CSS file or anything.

Tim, you're absolutely awesome!
I actually really want to start transferring my theme from my design program to PB now, to get it live and working. This'll be great. Thanks