Allow the user to change CSS design elements with

Question

So, since I have problems deciding an absolute theme for my site, I'd like to let the user choose a theme from a dropdown menu, and when an option is clicked, it'll change the background image, background color, and background positioning.

eg. If the user chose the "Mario Bros 3" theme, they'd get

background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;

And if you select "Zelda LTTP" theme, you'd get

background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;

I'd like this to be in a dropdown menu, and have it remember your choice, so that it applies every time.

I have next to no idea how to do this, can anybody help?

Answer 1

I'd select the themes by different classes on the body, like that:

body.smb2{
    background-image:url('smb3.jpg');
    background-repeat:repeat-x;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: #6899f8;
}
body.zelda{
    background-image:url('zeldalttp.jpg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: Black;
}

Then set the body class with javascript (or server-side) and save the choice in a cookie.

---

Exactly, put the css in a css file then you could change it like that:

HTML:

<select id="select">
    <option value=""></option>
    <option value="smb2">SMB 2</option>
    <option value="zelda">Zelda</option>
</select>

pure JS:

var sel = document.getElementById('select');
sel.onchange = function(){
    document.body.className = sel.value;
};

or jQuery if you prefer:

$('select').change(function(){
    $('body').prop('class',$(this).val());    
});

---

Ok the problem on your site is, that the body already has a bunch of other classes. And className overwrites all of them. One solution would be to save the old classes and then add the new ones like that:

var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + sel.value;
};

or jQuery:

var currentclass = null;
$('select').change(function(){
    $('body').removeClass(currentclass).addClass($(this).val());
    currentclass = $(this).val();
});

Answer 2

If you look into WordPress' or numerous message boards' theming architecture, they'd normally serve separate css files depending on user selection. That would, however, be justifiable if you have significant difference styling both themes (i.e. more than one line background difference) making sure redundant css is not received by the client.

If the differences are minor, Andy's answer would work well. And yes, do save the choice in a cookie - this would allow for their preference to be saved even without a profile stored on the server, meaning they don't have to re-select the correct theme every time they visit the site.