Allow the user to change CSS design elements with a dropdown menu?

css, drop-down-menu, themes

Solution

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

Problem

Original source