Выбор темы оформления на 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, время: 06:23. |