Форум поддержки пользователей ZeroParking

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » СМЕНА дизайна(или стиля) кнопочками


СМЕНА дизайна(или стиля) кнопочками

Сообщений 1 страница 23 из 23

1

СМЕНА дизайна(или стиля) кнопочками

http://savepic.org/2188755m.gif

Поглядеть Живьём >http://hostjs-mybb2011.narod.ru/ChangeStyle.htm

В Начало HTML верх:

Код:
<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>

Сразу следом, - ставим наши кнопки

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

Пояснения:
Красным - ссылки на картинки соответствующих кнопок
Коричневым жирным  - ссылки на файлы стиля для этой кнопки
Синим жирным - стиль кнопки после нажатия


Дополнения:


(Ссылки на файлы стиля можно брать со своего тестовика или заливать на хостинг, к примеру этот > http://www.nextmail.ru/

Для получения Ссылки на стиль Со Своего Тестовика:
Cтавите: Временно,на данном форуме  в HTML низ, самый низ Кнопку получения Стиля
(Кнопка будет в самом низу слево

Код:
<!--Кнопка получения Стиля-->
<script type="text/javascript">
var L2='',L='<p style="float:left;"><button id="lnkCss">Ccылка на сss</button></p>';
$(document).ready(function(){$("#pun-about .container").append(L);
$("#lnkCss").click(function (){L=$("link[rel='stylesheet']").attr("href");
L2=L.replace(/style\.(\d*)\.css$/i,"style_cs.$1.css");
if(L2==L){L2=L.replace(/\/([^\/]*)\.css$/i,"/$1_cs.css")};
alert("Ссылка на первое Окно стиля >\n\n"+L+"\n")
alert("Ссылка на Второе Окно стиля >\n\n"+L2+"\n");});});
</script>

При первом Клике - Получаете ссылку на Первое Окно стиля
При втором клике - Получаем Ссылку на Второе Окно стиля
При использовании стиля прямо с тестовика - первой ссылки достаточно для вставки в  одну кнопку скрипта смены стиля
---
Для Заливки же - Объединённого  файла Стиля на хостинг хранения (*и использования уже этой ссылки -залитого объединенного файла) необходимо удалить целиком в Первом Окне пункт  /* A1.1 */

/* A1.1 */
@import url(Ла Ла Ла);

Второе Окно Стиля ставим в любом текстовом редакторе впереди первого и сохраняем объединенный стиль с расширением .css

Итоговый файл, с расширением  .css заливаем на хостинг хранения(см выше), ccылку вставляем в код соответствующей кнопки

Теги: Новые Скрипты

+1

2

Что-то у меня ничего не получается. :dontknow:
Никакая кнопка получения стиля не появилась.  :|
Да и свой стиль я теперь не могу вернуть. Где на него ссылка спрятана?
http://bellasity.ixbb.ru/

Отредактировано Зайца (2011-11-01 15:07:09)

0

3

Deff написал(а):

При первом Клике - Получаете ссылку на Первое Окно стиля
При втором клике - Получаем Ссылку на Второе Окно стиля

У меня ссылки эти не копируются. :dontknow:

0

4

Зайца У Вас уже всё поставлено, чтобы копировалось пробуйте с Оперы

0

5

Deff написал(а):

Зайца У Вас уже всё поставлено

А почему тогда моя шапка ложится поверх выбираемых стилей? Некрасиво так. :|

0

6

Зайца написал(а):

А почему тогда моя шапка ложится поверх выбираемых стилей? Некрасиво так.

Потому шо пытаемсо быстрей быстрей ...(* Если бы к Вашему Оверлоку и инструкции к нему так относились соседи, Вы бы их убили
=>

Deff написал(а):

Дополнительные Контейнеры для HTML контента,   подключаемые только к Определенному выбираемому Стилю Пост 979

0

7

Я не поняла,как это исправить. :blush:

0

8

Зайца Посместите ваш Логотип в контейнер и прикрепите именно к Вашему стилю
Коды для фоновых картинок Вашего Стиля, удалив теги <style> </style>, -  перенесите во второе Окно стиля, добавив к соответствующим селекторам(ну или есть сложности с поиском - в конец второго окна Стиля или даже лучше первого, поскольку это полностью аналогично HTML верх

Отредактировано Deff (2011-11-01 20:28:15)

0

9

О Боже, у меня почти получилось  [взломанный сайт]
Deff,только я с последней кнопкой что-то не так сделала,я хотела чтобы она выводила на мой постоянный стиль   http://gnezdo.0pk.ru/ ,а там почему-то пол стиля. :huh:

Код:
 <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://s002.radikal.ru/i200/1012/47/5ccc220be759.png" alt="http://bellasity.ixbb.ru/style/Mybb_Cafe/Mybb_Cafe.css" />
<br>
<img src="http://s002.radikal.ru/i200/1012/47/5ccc220be759.png" alt="http://bellasity.ixbb.ru/style/Minima/Minima.css" />
<br>
<img src="http://s002.radikal.ru/i200/1012/47/5ccc220be759.png" alt="http://bellasity.ixbb.ru/style/Mybb_Acid_Tech/Mybb_Acid_Tech.css"/>
<br>
<img src="http://s002.radikal.ru/i200/1012/47/5ccc220be759.png" alt="http://forumstatic.ru/styles/000e/fa/53/style.1320243138.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>

Отредактировано Зайца (2011-11-02 21:12:26)

0

10

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

Отредактировано Deff (2011-11-02 23:03:19)

0

11

Deff написал(а):

Вам вроде нужно было только два стиля - для телефонов и обычный, тогда достаточно всего двух кнопок

Это не мне нужно,это нужно тем кто с телефона заходит,а я не знаю как это выглядит с телефона. Сами выберут,потом лишнее удалю.

Спасибо!  [взломанный сайт]

Отредактировано Зайца (2011-11-02 23:38:07)

0

12

Идея иметь на форуме доп стиль для телефона провалилась.
Вот как это выглядит с телефона. http://uploads.ru/t/f/9/z/f9zrV.jpg
Может я не по теме обратилась....
Мне нужна WAP версия в дополнение к моему стилю,такое возможно иметь на форуме?  :blush:

0

13

Deff написал(а):

Этот стиль неплохо смотрелся с телефона => http://bellasity.ixbb.ru/style/Mybb_Aci … d_Tech.css

Да,но он темный,а мы,девочки, любим что-нибудь светленькое.  :flirt:  Типа вот этого Myff_Autumn , Myff_Pirates_of_the_Caribbean на 1 стр. или Mybb_Pending- на 8 стр.

Deff написал(а):

Достаточно было убрать значки радиации

Стесняюсь спросить что это и где убрать? :blush:

Отредактировано Зайца (2011-11-03 12:15:56)

0

14

Зайца Откройте Свою Тему, Помощь в дизайне, иначе тут всё зафлудим - делайте скриншоты - тыкайте стрелками - что поправить

0

15

Ставлю скрипт и всё работает, только когда обновляешь страничку - исчезает дизайн. Приходится снова нажимать кнопку и так каждый раз. Почему не запоминается какой-то выбранный вариант?

Отредактировано epic fail (2011-12-18 01:23:36)

0

16

epic fail написал(а):

Ставлю скрипт и всё работает, только когда обновляешь страничку - исчезает дизайн. Приходится снова нажимать кнопку и так каждый раз. Почему не запоминается какой-то выбранный вариант?

присоединюсь к вопросу (((

0

17

Ньяк
Поскольку запоминание идёт через куки - необходимо, что бы кукисы были включены - и ссылку на форум прикладывайте - иначе ответы - чисто по типовым траблам

0

18

Прекрасный скрипт, нашли и очень обрадовались, правда, радовались не слишком долго, когда дошло, что смена стиля не приведет к смене HTML вверх/низ  и объявлений, а так как предполагаемые дизайны по цветовой гамме сильно отличаются друг от друга - некоторые части, особенно в объявлениях, будут эстетически и графически сильно выпадать при смене. Не подскажите, можно ли так же отдельно залить  верх/низ вместе с объявлениями, как это было сделано со стилем?"

0

19

Лори написал(а):

Прекрасный скрипт, нашли и очень обрадовались, правда, радовались не слишком долго, когда дошло, что смена стиля не приведет к смене HTML вверх/низ  и объявлений, а так как предполагаемые дизайны по цветовой гамме сильно отличаются друг от друга - некоторые части, особенно в объявлениях, будут эстетически и графически сильно выпадать при смене. Не подскажите, можно ли так же отдельно залить  верх/низ вместе с объявлениями, как это было сделано со стилем?"

дополнительный код, для контейнера скриптов должен быть ( приделываемый к стилю, http://forum.mybb.ru/viewtopic.php?id=6 … 49#p706214 пост 979

0

20

Дополнительные Контейнеры для 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>/*

Тут Обрамляемый Код (*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 добавляем в  конец Первого Окна стиля(если используем его), либо в конец загружаемого файла данного Стиля.

Зы2: При комбинации с дополнительным css в переключаемых стилях, дефолтный стиль часто удобно прописывать в Первом Окне стиля чисто ссылкой на внешний, загружаемый файл этого Стиля, поскольку ссылка на данный файл не меняется, в отличии от ссылок на Окна стиля...

Т.е прописываем тогда единственный Оператор в первом Окне на странице Стиля:
И всё Окно (целиком) будет выглядеть так:

/*************************************************************
A - SETUP
**************************************************************/

/* A0 Import default Style
-------------------------------------------------------------*/

/* A0.1 */
  @import url(Ccылка на файл Стиля по умолчанию);

Отредактировано Deff (2012-03-11 12:16:38)

0

21

Deff написал(а):

Тут Обрамляемый Код (*cкрипты и HTML  для стиля по ссылке Красным,)

Обрамляемый код - это коды верха, низа и объявлений? всё вместе или вы что-то другое имеете ввиду?

0

22

Лори написал(а):

Обрамляемый код - это коды верха, низа и объявлений? всё вместе или вы что-то другое имеете ввиду?

Контейнеров может быть несколько.(где угодно)
В том месте где  Ваш код стоит( который будет меняцо в другом стиле) его там же и обрамляем и указываем в alt к какому стилю его закреплять

Коды с тегами style - в контейнере - не работают, убираем теги и вставляем либо в конец первого окна стиля, либо в конец суммарного  файла стиля

в конец суммарного  файла стиля => значительно удобнее, если используются  контейнеры, поскольку не надо править ссылки  каждый раз при правке стиля.

Для этого сохраненный файл стиля из Администрирование - файлы - сохраняеи на рабочий стол - правим и перезаливаем под тем же именем, что и сохраняли из Админки

Отредактировано Deff (2012-03-11 12:13:41)

0

23

Добрый день!
Очень интересный скрипт, но у меня возникла одна проблема с моим стилем.
Когда форум загружается впервые Стиль выглядит так как нужно, но после переключения на Стиль 2 (или 3 без разницы) и возвращения обратно к Стилю 1, вверху и внизу форума появляются просветы.
http://uploads.ru/t/b/e/N/beN7B.jpg
Ссылка на тестовый форум: http://woodford.rolka.su/
Помогите, пожалуйста, сделать так, чтобы шапка и подпись выравнивались после переключения впритык т.т

0


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » СМЕНА дизайна(или стиля) кнопочками


Рейтинг форумов | Создать форум бесплатно