Данный скрипт и решение в целом, реализует на вашем сайте несколько вариантов дизайна. Есть несколько вариантов того как реализовать несколько дизайнов на сайте. Этот вариант первый, кнопочный. И самое главное, что он достаточно простой в плане установки и настройки чем другие.
Рисунок 1. Как будет выглядеть переключение дизайна
Принцип работы:
Суть работы скрипта проста. Вы ставите первый скрипт в верх сайта, этот скрипт отвечает за сохранение в памяти браузера дизайна сайта (куки). Второй код ставите там где хотите видеть кнопки переключения дизайнов (на которые пользователи будут кликать дабы выбрать нужный им дизайн). Т.е второй код отвечает за смену дизайнов. А для того чтобы кнопки начали работать, к ним нужно подключить заранее подготовленные вами стили дизайнов (понятно что разный).
Установка:
1. Заходим в панель управления сайтом. Копируем скрипт ниже и ставим в верхнюю часть страниц сайта между <hеаd> и </hеаd>
Код
<link id="dyncss" rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) return '';
}
document.getElementById('dyncss').href = url;
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
return url;
}
setDynCSS();
</script>
<script type="text/javascript">
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) return '';
}
document.getElementById('dyncss').href = url;
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
return url;
}
setDynCSS();
</script>
2. Копируем код кнопок выбора дизайна (ниже) и ставим туда где надо выводить кнопки.
Код
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/blue.jpg" onclick="setDynCSS('Здесь ссылка на ксс 1')">
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/kor.jpg" onclick="setDynCSS('Здесь ссылка на ксс 2')">
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/black.jpg" onclick="setDynCSS('Здесь ссылка на ксс 3')">
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/gray.jpg" onclick="setDynCSS('Здесь ссылка на ксс 4')">
<img style="cursor:pointer;" id="chdesign" src="/images/icons/design/red.jpg" onclick="setDynCSS('Здесь ссылка на ксс 6')">
<img style="cursor:pointer;" id="chdesign" src="/images/icons/design/green.jpg" onclick="setDynCSS('Здесь ссылка на ксс 7')">
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/kor.jpg" onclick="setDynCSS('Здесь ссылка на ксс 2')">
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/black.jpg" onclick="setDynCSS('Здесь ссылка на ксс 3')">
<img style="cursor:pointer;" id="chdesign" src="http://umasters.ucoz.ru/images/icons/design/gray.jpg" onclick="setDynCSS('Здесь ссылка на ксс 4')">
<img style="cursor:pointer;" id="chdesign" src="/images/icons/design/red.jpg" onclick="setDynCSS('Здесь ссылка на ксс 6')">
<img style="cursor:pointer;" id="chdesign" src="/images/icons/design/green.jpg" onclick="setDynCSS('Здесь ссылка на ксс 7')">
2.1 Ссылки на кнопки (типа http://umasters.ucoz.ru/images/icons/design/blue.jpg) смените на свои или перезагрузите на свой сайт в файловый менеджер
3. После того как код кнопок установлен (пункт 2), подключите к ним CSS стили (рисунок 2). Понятно что цвет кнопок (пункт 2.1) должен совпадать с подключаемыми вами стилем дизайна.
Рисунок 2. Подключение разных стилей к кнопкам.
4. Для того чтобы кнопки были видны при разных дизайна, не смешивались с ними к примеру. Нужно прописать рамки для кнопок. Для этого сайдите в таблицу стилей CSS и добавьте строку chdesign (код ниже)
Код
#chdesign {border: 1px solid #ccc; padding: 1px 1px;color:#000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
5. На этом всё. Установка скрипта окончена, осталось только подключить ваши наборы дизайнов, сделать свои кнопки и всё.
Дополнение:
- Для того чтобы подготовить несколько вариантов дизайна, достаточно скопировать ваш текущий дизайн (т.е его таблицу стилей) и внести с него изменения.
- Для удобства, рекомендую создавать в файловом менеджере в папке css или делать отдельную папку с именем design, в которой создавать папки для каждого дизайна (пример: /css/design/green)
- Не забудьте указать в кнопках выбора дизайна, ваш текущий дизайн, дабы пользователь мог выбрать обратно ваш основной дизайн.
- При создании кнопок, нужно делать их в цвет дизайна. Чтобы пользователь мог по цвету кнопки определит цвет выбираемого им дизайна.
- - Посмотреть пример работы скрипта можете на этом сайте, внизу справа кнопки выбора дизайна.
© Автор урока Prochtenniy
1
