Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

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


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Смена стиля кнопками. Deff


Смена стиля кнопками. Deff

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

1

http://uploads.ru/t/j/a/X/jaXJ4.gif

В Начало 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>

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

-----------------------------
Дополнения:

Дополнительные Контейнеры для 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ылка на файл Стиля по умолчанию);

-----------------------------

(Ссылки на файлы стиля можно брать со своего тестовика или заливать на хостинг, к примеру этот > 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ылку вставляем в код соответствующей кнопки.

автор: Deff
ссылка на оригинал
демо: hostjs-mybb2011.narod.ru

Теги: Скрипты и дополнения, Главная страница,свой стиль,смена стиля

+1

2

rusff.ru написал(а):

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

не могли бы вы поподробнее рассказать как все делать, а то из этих объяснений ничего не понятно

0

3

Enima Lin написал(а):

не могли бы вы поподробнее рассказать как все делать, а то из этих объяснений ничего не понятно

Если все еще нужна помощь с этим - могу объяснить.

+1

4

спасибо, уже разобралась

0

5

rusff.ru написал(а):

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


если я правильно понимаю, это как раз для тех случаев, когда для каждого стиля мы отдельно устанавливаем свою таблицы в объявлении?

0

6

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

Суть моего текста - дискомфорт пользования.

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

0

7

Anderty
Для таких случаев реализована возможность выбора для каждого пользователя стиля оформления форума через Профиль - Отображение (если администратор не отключил такую возможность).

В качестве комментария. Стили не хранятся в БД, да вообще неважно, где они хранятся, важно, где прописывать на них ссылку. Чтобы задержка была минимальной, нужно класть их в <head>, доступа к которому на QB нет.

0

8

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

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

Есть Вариант прписать первой строкой в HTML верх свой стиль, оставив страницы стилей - пустыми
типо
/**Пустой файл css**/

Но посколь скриптов от сервиса много, будет белая страница, значит в стиле стоит поставить хотя бы цвет body

Отредактировано Deff (19.07.2013 04:30:03)

0

9

А как загрузить этот самый дизайн? Допустим, я хочу сделать переключение нескольких дизайнов. И куда мне загрузить коды, что бы потом вставить их в скрипт?

0

10

Совенок
Открыть на компьютере блокнот, вставить туда код дизайна, сохранить с любым именем и расширением .css (например, style1.css), затем
Администрирование - Файлы - Загрузить

0

11

sadhaka
спасибо большое вам

0

12

Добрый день.
Подскажите пожалуйста. Сделал стиль переключения по вышеприведённой инструкции. Стили прописывал на кнопки ссылками, взятыми с тестовиков. Дефолтный стиль прописан в первом окне css тоже ссылкой с тестовика, вот так, как здесь и рекомендуется (/* A0.1 */
  @import url(Ccылка на файл Стиля по умолчанию) .
Всё отлично, обе кнопки переключают замечательно.  Но - дефолтный стиль при первичной загрузке страницы автоматически, как должн, почему-то не подгружается. То есть, пока не включишь вручную ту или иную кнопку стиля, всё выглядит вот так:
http://uploads.ru/pGtl8.jpg

В чём может быть проблема?
Адрес форума: http://nightchildrengame.rusff.ru

Отредактировано Рррыч (13.08.2014 18:24:49)

0

13

Рррыч
У меня подгрузился. Попробуйте обновить кэш.

0

14

summer
Да, спасибо. Тоже наконец-то всё начало подгружаться. Видимо, браузер долго думал )))
Спасибо, проблема решена!

0

15

Всем здрасти.
Возник вопрос в следующем.
Вроде бы все делаю правильно, как указано в первом посте. Но появилась небольшая загвоздка. (картинки кнопок не меняла, поэтому они не прогруженны, т.к. пока мне это не нужно)
В общем вот такая трабла. Никак не могу понять в чем загвоздка.
http://sd.uploads.ru/ChrMI.jpg

Отредактировано JazziBell (29.09.2014 10:44:43)

0

16

JazziBell
Возможно, какие-то стили у Вас стоят в хтмл-верх

0

17

sadhaka
в хтмл верхе стоит только скрипт кнопок вверх/вниз и все.
Ну и далее скрипт кнопок смены дизов.

0

18

JazziBell
Тогда дело в ошибках в Вашем файле стилей. Сам скрипт работает исправно, это видно по стандартным стилям.
Попробуйте проверить файл стилей на ошибки, убрать комментарии вида

<!--круглые края у цитаты и спойлера--->

они не используются в css

ошибочный импорт

@import url(style_cs.css);

и прочие

0

19

sadhaka
комментарии убрала.
в импорте что именно прописывать? в самом файле: http://xnya.rolka.su/files/0010/ec/76/23684.css я его в файле убрала. на форуме он остался.
но снова все та же проблемка(
И вот тут тоже убирать коменты?
(это второе окно диза)

Свернутый текст

/* CS1.3 */
#pun-stats h2, .punbb .main h2 {
  background-color: transparent; /*цвет*/
  background-image: url(); /*картинка*/
  background-repeat: no-repeat; /*повторение картинки*/
  background-position: bottom center; /*позиционирование картинки*/
  height: 60px;  /*высота контейнера*/
  text-align: center;
  margin-top: -20px;
  margin-bottom: 20px;

Отредактировано JazziBell (29.09.2014 11:54:12)

0

20

JazziBell
Нет, эти комментарии правильные. Импорт убрать совсем. У Вас  объединены в один файл и первое и второе окно стиля, поэтому импорт не нужен, ибо тот файл, который Вы импортируете - не существует.
Кстати, комментарии неверные Вы не везде убрали.
Проверьте файл на другие ошибки. Большая часть файла не читается, поэтому Вы и видите все не так, как надо.

Советую Вам еще раз пересохранить стили из первого и второго окна, сначала вставив содержимое второго окна, затем - первого (убрав строку с импортом). В первом посте все написано, так что читайте внимательнее.

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Смена стиля кнопками. Deff


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC