[Ликбез]
Форма входа
Логин:
Пароль:
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Как сделать несколько тем оформления на сайте?
Как сделать несколько тем оформления на сайте?
[1] likbezz [20.04.2011, 05:15]
Rob_Girl, (04-Апр-2011, 21:33:53 | Сообщение # 230)

Quote (Rob_Girl)
nightdrednout,у меня стоит скрипт смены CSS стиля, но когда я меняю (я всё нормуль установила) то они всё равно не меняются, хотя должны изменится, раз мы его в CSS прописали

Странно, у меня всё меняется, и сохраняется, но я бы поправил несколько ....
Вот этот момент:
Code
<link id="dyncss" rel="stylesheet" type="text/css" href="">

Прописал бы ID основной таблице.
Кроме того, не факт, что document.getElementById('dyncss').href = url; к элементу «link» будет работать во всех баузерах. Не проверял, просто сомнения. Я бы написал немного по другому ... но, это уже так, ....
...

☑ Пример .... (рабочий ИЕ v7+, Мозилла, Сафари, Опера, Хром, SeaMonkey)
Скрипт интересный.

На тему:
Switch stylesheets with jQuery
jQuery styleswitch – now with toggle
...
☑ Пример работы (styleswitch)
...
Архивы:
» styleswitch.zip «
» stylesheetToggle.rar «

Прикрепления: stylesheetToggl.rar (2.1 Kb) · styleswitch.zip (3.4 Kb)
[2] likbezz [20.04.2011, 06:05]
Как это работает?
Объясняю.
Вариант «Switch stylesheets with jQuery»

Создаём дополнительные стили для документа (сайта). Допустим style1.css и style2.css, прописываем необходимое оформление в них.
В примере выше - это просто фон боди и цвет текста. Прописывать можно любые свойства.

В документ, для юкоз - в шаблон, добавляем ссылки на созданные дополнительные стили.
Все стили прописываются в <head /> документа.

Формат записи должен быть вот такой:

Quote (Code)
<link rel="alternate stylesheet" type="text/css" href="/_theme/_script/_ext/style1.css" title="style1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/_theme/_script/_ext/style2.css" title="style2" media="screen" />

Где:
rel="alternate stylesheet" - указываем принадлежность и значение «alternate», указывающее, что стиль альтернативный (дополнительный).
title="style1" - устанавливаем, рекомендованный W3C? для таких целей, атрибут «title», что делает её авторской, и устанавливаем информативное название (имя).
href="/_theme/_script/_ext/style2.css" - ссылка до таблицы стилей.
media="screen" - не обязательный (в данном случае) атрибут, указывающий тип носителя.
type="text/css" - обязательный атрибут указывающий тип содержимого языка стилей.

Инфо:
Альтернативные таблицы стилей - взаимоисключающие.

Ту да же, в <head />, добавляем ссылку на скрипт, осуществляющий смену стилей.

Code
<script type="text/javascript" src="/_theme/_script/_ext/styleswitch.js"></script>

Для сайтов на юкоз - скрипт прописываем после открывающего <body />, например, в верхний глобальный блок.

Добавляем управляющие элементы - то бишь - кнопочки (текстовые, графические, прочие) в нужное место документа.

Quote (Code)
<div>
<a href="javascript://" rel="style1" class="styleswitch">Светлый</a> | 
<a href="javascript://" rel="style2" class="styleswitch">Темный</a> | 
<a href="javascript://" onclick="eraseCookie('style');return false;">Удалить куку</a>
</div>

Где:
rel="style1" - обязательный атрибут. В нём указываем существующий альтернативный стиль. Значение атрибута «rel» должно совпадать с атрибутом «title» подключаемой таблицы.
class="styleswitch" - обязательный атрибут «class». К нему привязан скрипт, обрабатывающий событие «click».
onclick="eraseCookie('style');return false;" - не обязательная ссылка - для удаления одноимённой куки.

В сумме, ваш документ (шаблон) должен выглядеть примерно так:
Для обычных сайтов

Для сайтов на юкоз


...

Вопросы только по теме.

[3] zizi [21.04.2011, 15:22]
Здравствуйте поставлена смена стиля форума посредством этого кода

, а добавить в него и смену допустим шапки и нижней части сайта ?

[4] likbezz [21.04.2011, 21:43]
zizi,
Quote (zizi)
Здравствуйте поставлена смена стиля форума посредством этого кода

Какая жуть )))
Quote (zizi)
а добавить в него и смену допустим шапки и нижней части сайта ?

Можно.
Добавьте необходимые стили в подключаемую таблицу и все ...
...
[5] likbezz [21.04.2011, 21:52]
Кстати, код и скрипт от первого примера вот такой:

Скрипт:

Code
<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>

В нужное место (туда, где будут выводиться картинки для переключения между стилями):

Code
<img style="border:0 none;cursor:pointer;" src="Ссылка на картинку" onclick="setDynCSS('Ссылка на стиль 1.css')" />   
<img style="border:0 none;cursor:pointer;" src="Ссылка на картинку" onclick="setDynCSS('Ссылка на стиль 2.css')" />

Или текстом:

Code
<a href="javascript://" onclick="setDynCSS('Ссылка на стиль 1.css');return false;">Стиль 1</a>
<a href="javascript://" onclick="setDynCSS('Ссылка на стиль 2.css');return false;">Стиль 2</a>

...
[6] zizi [22.04.2011, 07:03]
likbezz, спасибо
[7] likbezz [26.12.2011, 01:55]

Смена фона по клику №1 + gradient + cookie



Вариация скрипта постом выше «dyncss» - устанавливает и запоминает установленный класс для элемента, на чем и строится смена дизайна.

Скрипт:
Code
<script type="text/javascript">     
function setDynClass(a){
if(!arguments.length){
var a=(a=document.cookie.match(/\bdyncss=([^;]*)/))&&a[1];if(!a)return''}
document.getElementById('dm1').className='style'+a;
var d=new Date();d.setFullYear(d.getFullYear()+1);
document.cookie=['dyncss=',a,';expires=',d.toGMTString(),';path=/;'].join('');return a}
setDynClass();     
</script>


Элеметы управления:
Code
<div id="switcher-content">
   <a class="c1" rel="1" href="javascript://">Картинка 1</a>
   <a class="c2" rel="2" href="javascript://">Картинка 2</a>
   <a class="c3" rel="3" href="javascript://">Картинка 3</a>
   <a class="c4" rel="4" href="javascript://">gradient 1</a>
   <a class="c5" rel="5" href="javascript://">gradient 2</a>
</div>


Скрипт для смены/установки класса:
Code
<script type="text/javascript">
$('#switcher-content a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var n=this.rel;
document.getElementById('dm1').className='style'+n;   
setDynClass(n);
return false;
});   
</script>


☑ Пример всего этого (Смена фона по клику №1 + gradient + cookie)
...
[8] famous [25.01.2012, 21:06]
После добавления двух стилей (альтернативных) нужно удалять главный? Или главный и один из альтернативных просто должны быть одинаковы?
[9] likbezz [26.01.2012, 08:47]
famous,
Quote (famous)
После добавления двух стилей (альтернативных) нужно удалять главный?

Нет, не нужно.
Предполагается, что дополнительные стили будут лишь изменять/дополнять текущие стили.
...
Quote (famous)
Или главный и один из альтернативных просто должны быть одинаковы?

Альтернативные стили дополняют/изменяют текущие стили. Изменяют какие то части дизайна а не полностью весь дизайн.
Например оформление ссылок, шапки, стилей блока ... и так далее ...
По любому, подключённые стили будут иметь более высокий приоритет перед изначальными. Так как подключаются ниже по коду документа.
...
[10] famous [28.07.2012, 01:29]
likbezz, спасибо! Будет время - обязательно испробую. Если получится что-то дельное - покажу)

Сообщение отредактировал famous - Суббота, 28.07.2012, 01:30
Полная версия сайта