Смена стиля/дизайна кнопками (Deff)
В Начало HTML верх:
Сразу следом, - ставим наши кнопки
Пояснения:
Красным - ссылки на картинки соответствующих кнопок
Коричневым жирным - ссылки на файлы стиля для этой кнопки
Синим жирным - стиль кнопки после нажатия
Ссылки на файлы стиля можно брать со своего тестовика или заливать на хостинг.
Для Заливки - Объединённого файла Стиля в админке(*и использования уже этой ссылки -залитого объединенного файла)необходимо удалить целиком в Первом Окне пункт /* A1.1 */
Второе Окно Стиля ставим в любом текстовом редакторе впереди первого и сохраняем объединенный стиль с расширением .css
Итоговый файл с расширением .css заливаем в админке, ccылку вставляем в код соответствующей кнопки.
Дополнения:
Дополнительные Контейнеры для HTML контента,
подключаемые только к Определенному выбираемому Стилю
Иногда необходимо поставить к каждому стилю свою картинку в Объявлении(или вообще сменить объявлении или заменить скрипт( к примеру: скрипт установки "Cвоя Картинка к каждой категории", или убрать-поставить: сайдбар, или Инфопанель от Duka, или слайдер, либо обрамление чего-то в рамку )
Для начала делаем добавку красным в скрипт, стоящий ниже кнопок:
(проще заменить весь скрипт целиком отсюда)
А, в том же месте, где и стоял HTML-код для нужного дизайна(html и cкрипты, кроме сss) - просто обрамляем его в выделенное жирным,
Красным - жирным - ссылка на Стиль - к которому данный кусок Вашего кода будет подключаться
(контейнеров для каждого стиля может быть несколько.
PS: Контейнер не позволяет вставлять код css. Дополнительные Коды css добавляем в конец Первого Окна стиля(если используем его), либо в конец загружаемого файла данного Стиля.
PPS: При комбинации с дополнительным css в переключаемых стилях, дефолтный стиль часто удобно прописывать в Первом Окне стиля чисто ссылкой на внешний, загружаемый файл этого Стиля, поскольку ссылка на данный файл не меняется, в отличии от ссылок на Окна стиля...
Т.е прописываем тогда единственный Оператор в первом Окне на странице Стиля:
Код
<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function clearSet(L){if(L){setcookie("changeStyle",L,30);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=getcookie("changeStyle");clearSet(Lmem);
</script>
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function clearSet(L){if(L){setcookie("changeStyle",L,30);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=getcookie("changeStyle");clearSet(Lmem);
</script>
Сразу следом, - ставим наши кнопки
Цитата
<style>#changeStyle img{border:solid 2px transparent;}
.STYLselect {border-color:red!important;}
</style>
<div id="changeStyle" style="top:0; left: 3px; position:fixed!important;">
<img src="http://www.10pix.ru/img1/3444/5439522.jpg" alt="http://forum.mybb.ru/style/Mybb_Strange_Vision/Mybb_Strange_Vision.css"/>
<br>
<img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="http://forum.mybb.ru/style/Mybb_Space/Mybb_Space.css"/>
<br>
<img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="http://forum.mybb.ru/style/Mybb_Sloven/Mybb_Sloven.css"/>
<br>
</div>
<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L)});</script>
.STYLselect {border-color:red!important;}
</style>
<div id="changeStyle" style="top:0; left: 3px; position:fixed!important;">
<img src="http://www.10pix.ru/img1/3444/5439522.jpg" alt="http://forum.mybb.ru/style/Mybb_Strange_Vision/Mybb_Strange_Vision.css"/>
<br>
<img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="http://forum.mybb.ru/style/Mybb_Space/Mybb_Space.css"/>
<br>
<img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="http://forum.mybb.ru/style/Mybb_Sloven/Mybb_Sloven.css"/>
<br>
</div>
<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L)});</script>
Пояснения:
Красным - ссылки на картинки соответствующих кнопок
Коричневым жирным - ссылки на файлы стиля для этой кнопки
Синим жирным - стиль кнопки после нажатия
Ссылки на файлы стиля можно брать со своего тестовика или заливать на хостинг.
Для Заливки - Объединённого файла Стиля в админке(*и использования уже этой ссылки -залитого объединенного файла)необходимо удалить целиком в Первом Окне пункт /* A1.1 */
Цитата
/* A1.1 */
@import url(Ла Ла Ла);
@import url(Ла Ла Ла);
Второе Окно Стиля ставим в любом текстовом редакторе впереди первого и сохраняем объединенный стиль с расширением .css
Итоговый файл с расширением .css заливаем в админке, ccылку вставляем в код соответствующей кнопки.
Дополнения:
Дополнительные Контейнеры для HTML контента,
подключаемые только к Определенному выбираемому Стилю
Иногда необходимо поставить к каждому стилю свою картинку в Объявлении(или вообще сменить объявлении или заменить скрипт( к примеру: скрипт установки "Cвоя Картинка к каждой категории", или убрать-поставить: сайдбар, или Инфопанель от Duka, или слайдер, либо обрамление чего-то в рамку )
Для начала делаем добавку красным в скрипт, стоящий ниже кнопок:
(проще заменить весь скрипт целиком отсюда)
Цитата
<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L);window.location=document.URL.replace(/#.\d+$/img,"");});</script>
А, в том же месте, где и стоял HTML-код для нужного дизайна(html и cкрипты, кроме сss) - просто обрамляем его в выделенное жирным,
Красным - жирным - ссылка на Стиль - к которому данный кусок Вашего кода будет подключаться
(контейнеров для каждого стиля может быть несколько.
Цитата
<style alt="http://forum.mybb.ru/style/Mybb_Bend/Mybb_Bend.css" class=OnlyThisStyle>/*
*/</style>
<script>var L=$("link[rel='stylesheet']:first").attr('href');var V=$("style.OnlyThisStyle[alt='"+L+"']");if(V.html()!=null){var V1=V.html().replace(/^\/\*([\s\S]*)\*\//img,"$1");V.replaceWith(V1);}</script>
Цитата
Тут Обрамляемый Код(*cкрипты и HTML для стиля по ссылке Красным,)
*/</style>
<script>var L=$("link[rel='stylesheet']:first").attr('href');var V=$("style.OnlyThisStyle[alt='"+L+"']");if(V.html()!=null){var V1=V.html().replace(/^\/\*([\s\S]*)\*\//img,"$1");V.replaceWith(V1);}</script>
PS: Контейнер не позволяет вставлять код css. Дополнительные Коды css добавляем в конец Первого Окна стиля(если используем его), либо в конец загружаемого файла данного Стиля.
PPS: При комбинации с дополнительным css в переключаемых стилях, дефолтный стиль часто удобно прописывать в Первом Окне стиля чисто ссылкой на внешний, загружаемый файл этого Стиля, поскольку ссылка на данный файл не меняется, в отличии от ссылок на Окна стиля...
Т.е прописываем тогда единственный Оператор в первом Окне на странице Стиля:
Цитата
/*************************************************************
A - SETUP
**************************************************************/
/* A0 Import default Style
-------------------------------------------------------------*/
/* A0.1 */
@import url(Ccылка на файл Стиля по умолчанию);
A - SETUP
**************************************************************/
/* A0 Import default Style
-------------------------------------------------------------*/
/* A0.1 */
@import url(Ccылка на файл Стиля по умолчанию);
Просмотров: 823, Загрузок: 0, Оценка: 5.0 (1)
| Страницы: | |