ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

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



Смена стиля/дизайна кнопками

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

1

СМЕНА дизайна (или стиля) кнопочками
Стиль форума/сайта будет меняться по клику на кнопки.

https://forumupload.ru/uploads/0007/e3/f7/2617/21324.gif

Автор: Deff
Платформа: любая
Демо: http://hostjs-mybb2011.narod.ru/ChangeStyle.htm

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Пояснения для пользователей майбб

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

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

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


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

Иногда необходимо поставить к каждому стилю свою картинку в каком-либо блоке, вообще сменить весь контент блока или заменить скрипт (к примеру: скрипт установки "Cвоя Картинка к каждой категории" или убрать-поставить: сайдбар, или юзер-панель, или слайдер, либо обрамление чего-то в рамку)

Для начала делаем добавку красным в  скрипт, стоящий ниже кнопок
(проще заменить весь скрипт целиком отсюда)

<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крипты) - просто обрамляем его в выделенное жирным:

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

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

ВНИМАНИЕ!!!: Контейнер не позволяет вставлять код css. Дополнительные Коды css добавляем в стиль сайта/форума (по умолчанию) или в стиль подгружаемого файла стилей по клику на кнопку!

Отредактировано Герда (20.05.13 07:29)

+2

2

:glasses: faiko Замените плиз > http://forum.mybb.ru/viewtopic.php?id=6 … 45#p701301 (*Переработано

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

3

Прикольно!!!

0

4

[mod]Deff
Ага, исправлено.[/mod]

+1

5

faiko
Правда я не пойму куда стили и как надо выкладывать?

0

6

Дафна де Лорена

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

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

Жирное - картинки смены дизайна. В данном случае это "Дизайн 1", "Дизайн 2" и "Дизайн 3".
Зеленое - ссылка на стиль. Подробнее:

http://ссылка на форум/style/название стиля/название стиля.css

То, что я подчеркнула, адрез БЕЗ http и www!
Фиолетовое - стиль при наведении курсора.
Розовое - цвет рамки.
вот все, что я поняла =="

Отредактировано Jii-Jo (02.09.11 19:56)

0

7

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

А Как получить эти ссылки вставляемые в alt ?

Sana, - Регаетесь по ссылке  http://www.nextmail.ru/  - дабы иметь возможность загрузить туда файлы css
Далее: - Убираете из Первого Окна стиля(который будете загружать на хостинг
выделенное Красным:

/* A1.1 */
  @import url(style_cs.css);

Объединяет в любом текстовом редакторе оба стиля!!!Внимание - Второе Окно Стиля идёт впереди Первого!

Сохраняете файл на рабочий стол с расширением css - и загружаете его на вышеуказанный > http://www.nextmail.ru/ хостинг - получаете ссылку - вставляете в нужный alt.

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

8

Jii-Jo
Спасибо!

0

9

Всем Чаоссу. У меня возник вопрос, а можно как-нибудь поменять положение кнопочек, например, перетащить вправо. Лучше бы конечно не просто в право, а в самое подходящее для иконок место :З

0

10

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

Всем Чаоссу. У меня возник вопрос, а можно как-нибудь поменять положение кнопочек, например, перетащить вправо. Лучше бы конечно не просто в право, а в самое подходящее для иконок место :З

<div id="changeStyle" style="top:0; margin-left: 300px; position:fixed!important;">

Чуть меняете тег - цифры - регулируете.

Для установки в самый низ - просто не меняя положения скриптов - ставим top:100%;
можно добавить еще плюс  margin-top:-200px; ( для мелких смещений по вертикали

Отредактировано Deff (22.12.11 02:39)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0