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();
});