portfoliopost
FDteam-portf
freepost
Скрипт установки нескольких стилей с общей разметкой в css-стилях ("свой стиль" на форумах Mybb.ru)
Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.Описание
Скрипт служит для установки нескольких стилей в форму "Свой стиль" без необходимости подгрузки и замены стилевых файлов.
Устанавливает класс для элемента body. Предполагает наличие общей разметки у всех установленных стилей, смену стилевых настроек отдельных элементов (как правило, это цвета фона, шрифта и рамок, картинки бэкграунда) в зависимости от выбранного пользователем стиля.
По умолчанию кнопки устанавливаются в начало body, однако по желанию их можно разместить и в других блоках. Например, в #html-header (html-верх) или сделать их выпадающим списком главного меню.Код скрипта устанавливается в блок "HTML верх" (в разделе "Формы"):
Список доступных стилей и соответствующих им классов хранится в переменной styleList, заполняется по образцу, приведённому в начале скрипта. Вы можете оставить название стиля пустым, если не хотите отображения надписей и предпочитаете оформление кнопок стилем. Также вместо текстовой надписи вы можете использовать любые html-теги, например, сразу добавить кнопку-картинку:
Примерный стиль для расположения кнопок в левом верхнем углу форума (может быть размещён в своём стиле или в блоке <style>...</style> перед скриптом):
Пример стилизации кнопок через css:
Для того, чтобы кнопки добавились не в тело форума, а в блок #html-header, разместите в форме html-верх следующий код:
Для размещения кнопок смены стиля в виде выпадающего списка главного меню, нужно добавить дополнительный пункт меню:
Обратите внимание, что для корректного отображения такого списка вам нужно будет стилизовать выпадающее меню.
Switch-переключатель. Демо:Скрипт:
Код:<!-- Смена стиля, (с) ForumD.ru, satsana, модификация от Fumuse --> <script type="text/javascript"> const styleList = [{ class: 'day', name: 'День' }, { class: 'night', name: 'Ночь' }]; function getCookie(a) { return (a = document.cookie.match(new RegExp("(?:^|; )" + a.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"))) ? decodeURIComponent(a[1]) : void 0 } function setStyle(a) { $("body").attr("class", a); selStyle = a; document.cookie = "selStyle=" + a + "; max-age=2592000"; } let selStyle = getCookie("selStyle"); selStyle && setStyle(selStyle); function darkLight () { if (styleList[1]["class"] === selStyle) { $('#checkBox').prop("checked", false); setStyle(styleList[0]["class"]); } else { $('#checkBox').prop("checked", true); setStyle(styleList[1]["class"]); } } $(document).pun_mainReady(function () { if ($("#stylelist").length || $("body").prepend('<ul id="stylelist"></ul>')) { $("#stylelist").append('<label class="switch">\n' + '<input type="checkbox" onclick="darkLight();" id="checkBox" ' + (styleList[1]["class"] === selStyle ? 'checked' : false) + '>\n' + '<span class="slider"></span>\n' + '</label>'); } }); </script> <!-- Смена стиля - END -->Стиль (с codeopen):
Код:/*TOGGLE COLORS*/ .dark { background: #545454; color: #efefef; } p { background: none !important; } /*SWITCH*/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; align-self: center; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; } input:checked + .slider { background-color: #2196f3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider { border-radius: 30px; } .slider:before { border-radius: 50%; }Если вы пытаетесь установить блок с кнопками смены стиля в подвале или хотите использовать скрипт на другой платформе, и кнопки не появляются - найдите в коде скрипта pun_mainReady и замените на ready.
Стиль, используемый по умолчанию, пишется как обычно, без указания стилевого класса, и размещается в полях "своего стиля". Для изменения стилевых настроек отдельных элементов нужно добавить эти настройки в стиль ниже основных с добавлением в начало селектора стилевого класса.
Допустим, вы собираетесь использовать два стиля: Светлый с классом light и Тёмный с классом dark. По умолчанию выбрали светлый стиль. Все его настройки прописываются как обычно, без указания класса light. По умолчанию вы прописываете фон и цвет шрифта для какого-то элемента так, как он должен выглядеть в светлом стиле. Для примера возьмём блок объявления:Для того, чтобы эти параметры изменились в тёмном стиле, дописываем чуть ниже, добавив в начало селектора класс .dark:
Если стилей больше двух - дальше по тому же принципу дописываем настройки для остальных. И так для всех элементов, отображение которых будет меняться в разных стилях. Если в отдельном стиле какой-то элемент не меняется - ничего не прописывайте, будут использованы настройки по умолчанию.
Исключение составляет элемент body, для него стилевой селектор будет выглядеть так: body.dark {}. А также элемент html - изменить его настройки с помощью этого скрипта не получится, поэтому воздержитесь от прописывания в нём фонов и цвета шрифта.Очевидный момент на который будет не лишним указать: если у вас в коде есть перечисление нескольких селекторов через запятую (например .punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {}), то стилевой селектор надо ставить в начале строки и после КАЖДОЙ запятой (например .dark .punbb .formsubmit input, .dark .punbb .formsubmit a, .dark .punbb .formsubmit span {})
Желаю всем хорошего настроения и прекрасных дизайнов!