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

Объявление

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

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

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

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

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

Подробнее

Мийрон

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

Подробнее

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее
Ищешь чем бы украсить свой форум или сайт к Хэллоуину? 🎃 Мы поможем нарядиться! 🎃

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио команды » Установка нескольких стилей в "свой стиль" без подгрузки файлов


Установка нескольких стилей в "свой стиль" без подгрузки файлов

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

1

[html]<link rel="stylesheet" href="http://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Установка нескольких стилей в "свой стиль" без подгрузки файлов">
  <div id="icon"></div>
  <img src="https://i.gyazo.com/46159ca388ec04e1bbb29cf623dd88f9.png" class="postimg">
</a>

<div id="cover-block">
Дата: 21.05.2020<br>
Автор: <a href="/profile.php?id=6774" target="_blank">satsana</a><br>
Бесплатный скрипт<br>
Описание: Скрипт установки нескольких стилей с общей разметкой в "свой стиль".
</div>

</div>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]

код и описание

Скрипт служит для установки нескольких стилей в форму "Свой стиль" без необходимости подгрузки и замены стилевых файлов.
Устанавливает класс для элемента body. Предполагает наличие общей разметки у всех установленных стилей, смену стилевых настроек отдельных элементов (как правило, это цвета фона, шрифта и рамок, картинки бэкграунда) в зависимости от выбранного пользователем стиля.
По умолчанию кнопки устанавливаются в начало body, однако по желанию их можно разместить и в других блоках. Например, в #html-header (html-верх) или сделать их выпадающим списком главного меню.

Код скрипта устанавливается в блок "HTML верх" (в разделе "Формы"):

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

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

Список доступных стилей и соответствующих им классов хранится в переменной styleList, заполняется по образцу, приведённому в начале скрипта. Вы можете оставить название стиля пустым, если не хотите отображения надписей и предпочитаете оформление кнопок стилем. Также вместо текстовой надписи вы можете использовать любые html-теги, например, сразу добавить кнопку-картинку:

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

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

Примерный стиль для расположения кнопок в левом верхнем углу форума (может быть размещён в своём стиле или в блоке <style>...</style> перед скриптом):

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

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

Для того, чтобы кнопки добавились не в тело форума, а в блок #html-header, разместите в форме html-верх следующий код:

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

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

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

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

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

Обратите внимание, что для корректного отображения такого списка вам нужно будет стилизовать выпадающее меню.

Стиль, используемый по умолчанию, пишется как обычно, без указания стилевого класса, и размещается в полях "своего стиля". Для изменения стилевых настроек отдельных элементов нужно добавить эти настройки в стиль ниже основных с добавлением в начало селектора стилевого класса.
Допустим, вы собираетесь использовать два стиля: Светлый с классом light и Тёмный с классом dark. По умолчанию выбрали светлый стиль. Все его настройки прописываются как обычно, без указания класса light. По умолчанию вы прописываете фон и цвет шрифта для какого-то элемента так, как он должен выглядеть в светлом стиле. Для примера возьмём блок объявления:

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

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

Для того, чтобы эти параметры изменились в тёмном стиле, дописываем чуть ниже, добавив в начало селектора класс .dark:

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

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

Если стилей больше двух - дальше по тому же принципу дописываем настройки для остальных. И так для всех элементов, отображение которых будет меняться в разных стилях. Если в отдельном стиле какой-то элемент не меняется - ничего не прописывайте, будут использованы настройки по умолчанию.
Исключение составляет элемент body, для него стилевой селектор будет выглядеть так: body.dark {}. А также элемент html - изменить его настройки с помощью этого скрипта не получится, поэтому воздержитесь от прописывания в нём фонов и цвета шрифта.

Желаю всем хорошего настроения и прекрасных дизайнов!

+9

2

По идее можно дать наверно ссылку на кузнечик? Как демо реализации
2-е Подсказать что стили для отдельных частей можно рисовать в отдельных файлах независимо и подгружать через  @import (ибо длинные файлы в Админке читать весьма неудобно. особенно с телефона) (Мой пост можешь удалить  :flag:

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

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

+1

3

Всё работает, довольно просто установилось! Я зря боялась этого скрипта!
Спасибо огромное!

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

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh

+3

4

Deff, на Кузнечике на самом деле немного другая реализация. Хотя идея ставить стили не заменой файла, а селектором, родилась именно тогда, тогда же была написана основа для этого. Я с самого начала хотела реализовать это отдельным универсальным скриптом с возможностью ставить кнопки в любое место, но там эта идея в итоге разрослась до того вот кода, который ставит верхнее меню, плюс подгрузка видюшек на главную добавилась. А сейчас вот я решила вернуться к изначальной идее и выложить то, что можно на любой форум поставить.

#p150031,Deff написал(а):

стили для отдельных частей можно рисовать в отдельных файлах

Не. Идея как раз в том, чтобы отдельных файлов не было, а все возможные цветовые решения для одного и того же элемента лежали рядышком, друг за другом в общей форме. Их так редактировать удобнее. Во втором окне стиля обычно только цвета и картинки бэкграундов прописываются, так что кода там немного. Оно не лопнет, если туда несколько цветовых решений вписать. Ну и - это же по сути своей один стиль с общей базовой разметкой. Зачем его на отдельные файлы разбивать и искать эти файлы потом среди загруженного? Имхо, стандартного разделения на разметку и цвета вполне достаточно.
Так-то конечно никто не мешает хоть весь стиль целиком в подключаемый файл воткнуть, если тебе так с ним работать удобнее... Но большинству таки удобнее в окошках в одном месте всё это держать.

#p150035,Automation Baby написал(а):

Всё работает, довольно просто установилось! Я зря боялась этого скрипта!
Спасибо огромное!

И тебе спасибо - за отзыв. : )) Я старалась, чтобы всё было просто и понятно.

+4

5

#p150040,satsana написал(а):

И тебе спасибо - за отзыв. : )) Я старалась, чтобы всё было просто и понятно.

Я бы добавила чтобы убедились что есть вот это в первом окне стиля:

Код:
@import url(style_cs.css);

Такое пояснение для таких как я...

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

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh

+1

6

#p150072,Automation Baby написал(а):

Я бы добавила чтобы убедились что есть вот это в первом окне стиля:

Ммм... Дело в том, что по умолчанию это там всегда есть, если второе окно стиля используется. Это базовая фишка майбб-дизайнов, штатное подключение второго файла. С этой штукой сталкиваются те, кто пишет стиль с нуля впервые - или владельцы дизайнов, где "цветовое" окно стиля по каким-то причинам не использовалось. Вот на НОЛФ скорее всего импорт был, но ссылался он не на второе окно стиля, а на подключаемые файлы.
В общем, к данному конкретному скрипту эта ситуация не имеет отношения. Фраза "стиль пишется как обычно" - уже предполагает использование этого "импорта".
Добавлено спустя 5 минут 18 секунд: Ты в шаге от того, чтобы стать верстальщиком стилей для майбб.ру! У тебя есть преимущество перед теми, кто уже знает css, но ещё не работал с нашими форумами. Ты знаешь, как подключить второе окно "своего стиля"! ;)

+3

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио команды » Установка нескольких стилей в "свой стиль" без подгрузки файлов