Выбор темы оформления на cookies.
Вложений: 1
Всем доброго времени суток (лично у меня ночь :D ).
Вопрос не столь банальный, как можно предположить из заголовка. Нужно сделать возможность пользовательской настройки оформления сайта. А именно: фоновое изображение, цвет ссылок, и цвет текста. Все эти параметры должны настраиваться независимо, т.е. использование .css файлов тут не прокатит. Допустим, как сделать смену изображения с "печеньками" я знаю, а вот цвет ссылок никак. Сотню сайтов точно просмотрел. :-? Усложнять задачу палитрами не вижу смысла, поэтому можно просто ограничиться выбором заранее заданных цветов. localStorage тут не прокатит, т.к. нужна поддержка ещё и старых браузеров (будь они неладны!!!!). И тут даже больше проблема не в том, как записать это в cookies, а в том, как подставить в существующий файл css, без использования дополнительных файлов и php. Вроде как должно получиться через это $("body").css();, НО, в js я ламер :haha: Нашёл где-то далеко в 3/9 царстве скрипт [ссылка ниже], но мне не подходит такая реализация. А вот выбор Основного цвета - то что мне нужно. И я так подозреваю, придётся делать три скрипта для сохранения параметров. Или можно в один фай одним скриптом записывать все три значения? Если "никто за вас тут скрипты писать не будет, думайте сами", то хотябы подтолкните на путь истинный, пожалуйста.:write: |
Цитата:
Хотя если динамики нет (всяких аяксов там), то можно и методом в лоб сделать: $('a').css('color', getUserStyle('link-color') ); Соответственно функцию getUserStyle тебе нужно написать самому. Если динамика есть, то нужно создавать элемет <style> и добавлять в него каскадные стили типа типа var $style = $('<style/>').appendTo($('head')); $style.prop('sheet').addRule('a', "color:" + getUserStyle('link-color')); (код не кроссбраузерный) |
Динамики нет.
Т.е. этой строчкой мы применяем к странице выбранный стиль?! $('a').css('color', getUserStyle('link-color') ); И можно вот это адаптировать под изменение цвета: <script> function ChangeOpacity(x) {var opacity=x.options[x.selectedIndex].text; var el=document.getElementById("p1"); if (el.style.opacity!==undefined) {el.style.opacity=opacity;} else {alert("Ваш браузер не поддерживает эту функцию!:( ");} } </script> <select onchange="ChangeOpacity(this);" size="5"> <option selected="selected" />0 <option />0.2 <option />0.5 <option />0.75 <option />1 </select> Или я что-то недо понимаю?! |
Цитата:
Цитата:
Цитата:
|
function cookie(a, b) { if(b) document.cookie = a+'='+escape(b)+'; expires = Mon, 01-Jan-2999 00:00:00 GMT; path=/'; var c = '(?:; )?'+a+'=([^;]*);?', d = new RegExp(c); return d.test(document.cookie) ? decodeURIComponent(RegExp['$1']) : 0; } $('body').css('backgroundImage', 'url(\''+(cookie('bg') || 'стандартный_фон.jpg')+'\')'); $('a').css('color', cookie('link') || '#стандартный_цвет'); Например, для смены цвета ссылок: <select onchange="cookie('link', this.value); document.location = ''"> <option value="red">Красный</option> <option value="red">Зелёный</option> <option value="#FFF">Белый</option> </select> Или с палитрой (Opera, Chrome): <input onchange="cookie('link', this.value); document.location = ''" type="color" /> |
danik.js, это просто как пример. Т.к. написать код с нуля для меня сложная задача, приходится брать готовые решения, и переписывать их под себя.
Ruslan_xDD, дефолтный фон поставился, а цвет нет. Да и не применяется ни один из списка. |
Часовой пояс GMT +3, время: 15:36. |