Разрешить пользователю изменять элементы дизайна CSS с выпадающим меню?

Question

Итак, поскольку у меня возникли проблемы с определением абсолютной темы для моего сайта, я бы хотел, чтобы пользователь выбирал тему из выпадающего меню, а при нажатии кнопки она меняет фоновое изображение, цвет фона, и фонового позиционирования.

например. Если пользователь выбрал тему «Mario Bros 3», они получили бы

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

И если вы выбираете «Zelda LTTP» тему, вы получите

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

Я хотел бы, чтобы это быть в выпадающем меню, и помнить о своем выборе, чтобы он применялся каждый раз.

У меня нет понятия, как это сделать, может ли кто-нибудь помочь?

Answer 1

Я бы выбрать темы по различным классам на теле, как и что:

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

Затем установите класс тела с JavaScript (или на стороне сервера) и сохраните выбор в куки.

---

Ровно, поставить CSS в файле CSS, то вы можете изменить его так:

HTML:

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

чисто JS:

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

или jQuery если вы предпочитаете:

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

---

Оказалось, что на вашем сайте проблема в том, что у тела уже есть куча других классов. И className перезаписывает все из них. Одним из решений было бы сохранить старые классы, а затем добавить новые так:

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

или JQuery:

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

Answer 2

Если вы смотрите в WordPress' или многочисленных досках объявлений тематизации архитектуры, они обычно обслуживают отдельные файлы css в зависимости от выбора пользователя. Это, однако, было бы оправданным, если бы у вас была значительная разница в дизайне обеих тем (т. Е. Более чем в одной разнице фона в линии), чтобы клиент не получал избыточную сумму css.

Если различия незначительны, ответ Энди будет работать хорошо. И да, сохраните выбор в cookie - это позволит сохранить их предпочтение даже без профиля, хранящегося на сервере, что означает, что им не нужно повторно выбирать правильную тему каждый раз, когда они посещают сайт ,