Тестовое сообщение

Сайдбар для дополнений

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

Что делает?
Скрипт собирает вместе пользовательские скрипты и расширения и выводит их в боковом меню, которое открывается по клику.

Что собирает?

скрипт смены стиля от satsana
скрипт изменения размера шрифта от satsana
Закладки от mybb (нужно включить в Администрировании--Скрипты)
Скрипт черного списка от Lerage
скрипт смены темы от vatueil
Ваши расширения

! Если вы не пользуетесь ЧС или, например, сменой шрифта от satsana, то необходимо закомментировать/удалить ненужные блоки. Блок выглядит так (следите за наличием или отсутствием фигурных скобок!):

{
selector: "#blockUsers", // черный список by Leraje
cls: "blacklist",
name: "Черный список",
badge_selector: "#panel-sticker"
},

Известные проблемы

конфликтует с модераторскими тегами от Alex_63
при загрузке на секунду может мелькнуть ярлык закладок
из-за динамического отображения закладок может "сбрасывать" их при переключении на другую вкладку браузера (требуется перезагрузка страницы)

Установка:

В HTML-верх:

Код:

<!-- addons aggregator by g.vatueil v1.0.2 START HTML-верх -->
<link rel="stylesheet" href="https://forumstatic.ru/files/001c/56/64/48302.css">

В HTML-низ:

Код:

<!-- addons aggregator by g.vatueil v1.0.2 START HTML-низ -->
<div id="vtlThemeSelector"></div>
<script>
if (window.gscript == null) window.gscript = {};
window.gscript.addons = [
  {
    selector: "#vtlThemeSelector", // theme switcher by g.vatueil
    cls: "vtl-themes",
    name: "Тема сайта",
    default: true,
  },
  {
    selector: "#MyBookmarks", // закладки от сервиса
    cls: "bookmarks",
    name: "Закладки",
    badge_selector: "#BookmCntToggle"
  },
  {
    selector: "#blockUsers", // черный список by Leraje
    cls: "blacklist",
    name: "Черный список",
    badge_selector: "#panel-sticker"
  },
  {
    selector: "#chfont", //смена шрифта by satsana
    cls: "chfont",
    name: "Шрифт в постах",
  },
];
window.gscript.caretElClassList = "caret-down";
window.gscript.buttonElClassList = "settings-sliders";
</script>
<script src="https://forumstatic.ru/files/001c/56/64/66331.js"></script>
<!-- addons aggregator by g.vatueil v1.0.2 END -->

Как выглядит со стилями по умолчанию

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

:confused:

Объединенный скрипт смены темы и переключения мобильного дизайна

Автоматическое применение тёмной темы, если на устройстве установлен dark mode
Встроенная кнопка переключения между мобильной и десктопной версиями
Сохранение выбранных настроек в локальном хранилище браузера

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

1. Удалить иные переключатели темы/мобильного режима
2. Проверить, что в Администрировании -> Настройки включена вставка viewport. Без него скрипт работать не будет.

Установка:

Формы -> HTML-верх (самое начало)

забрать код

Код:

<!-- theme selector with mobile/desktop switcher by g.vatueil START-->
<style>
  @media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
    #vtlThemeSelector .gv-viewport-toggler {
      display: none;
    }
  }
</style>
<script type="text/javascript">
  
  if (window.gscript == null) window.gscript = {};
  window.gscript.themes = [
    {
      name: "light",
      color: "#9d9a96"
    },
    {
      name: "dark",
      color: "#383738"
    },
  ];
  
  window.gscript.defaultTheme = "light"; // тема по умолчанию
  window.gscript.darkTheme = "dark"; // темная тема
  window.gscript.fullVerText = "Полная версия"; // текст на кнопке для перехода на полную версию
  window.gscript.mobVerText = "Мобильная версия"; // текст на кнопке для перехода на мобильную версию
// дополнительно
  window.gscript.useDataAttr = false; // использовать атрибут вместо класса
  window.gscript.scaleDesktop = "0.4" // коэффициент масштабирования для десктопной версии
  window.gscript.appendTo="body"; // куда добавить переключатель

</script> 
<script src="https://forumstatic.ru/files/001c/56/64/31866.js"></script>
<!-- theme selector with mobile/desktop switcher by g.vatueil END -->

Темы задаются в массиве window.gscript.themes двумя параметрами:

name -- название латиницей, без спецсимволов. Соответствует названию класса в используемой перекраске;
color -- цвет кнопки в любом удобном цветовом формате.

{
name: "light",
color: "#9d9a96"
},

Тем может быть сколько угодно, новые добавляются в том же формате через запятую. ВАЖНО! При редактировании не забывайте фигурные скобки и запятые, это обязательно для корректной работы скрипта.

Базовая настройка:

1. В переменную window.gscript.defaultTheme записать название той темы (из вашего предварительно настроенного списка тем), которая будет показываться пользователю по умолчанию. Если этот параметр отсутствует, темой по умолчанию станет первая в списке. Пример:

window.gscript.defaultTheme="light";

2. В переменную window.gscript.darkTheme записать название тёмной темы (из вашего предварительно настроенного списка тем). Даже если у вас всего две темы ~~и ни одна из не тёмная по-настоящему~~, одну из них нужно назначить тёмной. Пример:

window.gscript.darkTheme="dark";

ВАЖНО! Если этот параметр отсутствует, скрипт будет пытаться применить тему с названием "dark", и форум, возможно, будет отображаться некорректно.

Как это будет работать? При нажатии на кнопку темы к элементу body применится соответствующий класс (или дата-атрибут к html, об этом ниже). Если тема называется UltimateThemeSecond, добавится класс UltimateThemeSecond и так далее.

Кнопка мобильной/полной версии отображается только для устройств с размером экрана меньше 768px. Регулируется этой частью кода, которую можно при желании унести в файл стилей:

@media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
#vtlThemeSelector .gv-viewport-toggler {
display: none;
}
}

Где появятся кнопки? без дополнительных стилей и настроек они будут болтаться в конце элемента body, то есть левом нижнем углу сайта, под всеми элементами. Если необходимо добавить кнопки, например, в объявление, то в нужное место разметки вставляем элемент-обёртку (альтернативный вариант описан ниже):

Код:

<div id="vtlThemeSelector"></div>

ВАЖНО! элемент-обёртка обязателен, если переключатель нужен в подвале форума (html-низ)

Продвинутая (необязательная) настройка:

Если параметры не заданы, то используются значения по умолчанию

window.gscript.fullVerText
значение по умолчанию:
full version
текст, который будет отображаться на кнопке перехода на полную версию.
window.gscript.mobVerText
значение по умолчанию:
mobile version
текст, который будет отображаться на кнопке перехода в мобильную версию
window.gscript.appendTo
значение по умолчанию:
body
CSS-селектор элемента, в самый конец которого который добавится панель выбора темы (например, "#html-header"). Если на странице уже есть элемент с id vtlThemeSelector, параметр игнорируется.
window.gscript.scaleDesktop
значение по умолчанию:
0.36
коэфициент для десктопного вида -- дробное число c точкой в качестве десятичного разделителя.
Как его рассчитать
Поделить ширину мобильного устройства на ширину желательной области просмотра и округлить до двух знаков после запятой. При просмотре форума на устройстве с шириной экрана 375px коэффициент 0.36 примерно соответствует ширине области просмотра в 1040px и т.д.
window.gscript.useDataAttr
значение по умолчанию:
false
Указывает скрипту, что нужно добавлять не класс к body, а атрибут вида data-theme="themeName" к html.
Как использовать в CSS
:root {
--color: black;
}
:root[data-theme="red"] {
--color: red;
}
Миграция с класса на атрибут:
.dark --> [data-theme="dark"]
body.dark --> [data-theme="dark"] body

Стилизация:

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

1. Самый простой вариант, цветные кнопки, минимум оформления

активна синяя тема, мобильный режим

активна темная тема, режим десктопа

полный код скрипта с настройками

Код:

<!-- theme selector with mobile/desktop switcher by g.vatueil START-->
<style>
  @media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
    #vtlThemeSelector .gv-viewport-toggler {
      display: none;
    }
  }
</style>
<script type="text/javascript">
  if (window.gscript == null) window.gscript = {};
  window.gscript.themes = [
    {
      name: "red",
      color: "#f44336"
    },
    {
      name: "blue",
      color: "#4F5597"
    },
    {
      name: "black",
      color: "#383738"
    },
  ];
  
  window.gscript.darkTheme = "black";
  window.gscript.defaultTheme = "blue";
  window.gscript.fullVerText = "Полная версия";
  window.gscript.mobVerText = "Мобильная версия";
</script> 
<script src="https://forumstatic.ru/files/001c/56/64/31866.js"></script>
<!-- theme selector with mobile/desktop switcher by g.vatueil END -->

код стилей

вставляется в первое окно стилей или в html-верх в теги <style>

Код:

.blue {
  background: #8c90a7;
}

.black {
  background: #28292f;
}

#vtlThemeSelector {
  width: 200px;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  --button-border: 1px solid rgba(0,0,0, 0.4);
}

.black #vtlThemeSelector {
    --button-border: 1px solid rgba(179,179,179, 0.4);
}

#vtlThemeSelector button {
  cursor: pointer;
  border-radius: 3px;
  border: var(--button-border);
  padding: .2rem .4rem;
}

#vtlThemeSelector .vtl-theme-toggler {
  color: transparent;
  opacity: 0.7;
}

#vtlThemeSelector .vtl-theme-toggler:hover {
  opacity: 0.85;
}

#vtlThemeSelector .vtl-theme-toggler.active {
  opacity: 1;
  outline: var(--button-border);
  outline-offset: 1px;
}

#vtlThemeSelector .vtl-viewport-toggler {
  grid-column: 3 span;
}

2. Вариант немного посложнее, с иконками

активна светлая тема, мобильный режим

активна темная тема, режим десктопа

полный код скрипта с настройками

Код:

<!-- theme selector with mobile/desktop switcher by g.vatueil START-->
<style>
  @media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
    #vtlThemeSelector .gv-viewport-toggler {
      display: none;
    }
  }
</style>
<script type="text/javascript">
if (window.gscript == null) window.gscript = {};
window.gscript.themes = [
  {
    name: "light",
    color: "#f1ecde"
  },
  {
    name: "dark",
    color: "#5d3434"
  },
];

window.gscript.darkTheme = "dark";
window.gscript.defaultTheme = "light";
window.gscript.useDataAttr = true;
window.gscript.scaleDesktop = "0.36"
window.gscript.appendTo = ".theme-example";
</script>
<script src="https://forumstatic.ru/files/001c/56/64/31866.js"></script>
<!-- theme selector with mobile/desktop switcher by g.vatueil END -->

код стилей

Код:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {
  --background: #f1ecde;
  --button-border: 1px solid rgba(93,52,52, 0.2);
  --button-color: #5d3434;
  --button-background: #f1ecde;
}

:root[data-theme="dark"] {
  --background: #312222;
  --button-border: 1px solid rgba(93,52,52, 0.2);
  --button-color: #5d3434;
  --button-background: #f1ecde;  
}

.theme-example {
  background-color: var(--background);
  padding: 50px;
}

#vtlThemeSelector {
  width: 200px;
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
}

#vtlThemeSelector button {
  cursor: pointer;
  border-radius: 3px;
  color: transparent;
  border: var(--button-border);
  padding: .2rem .4rem;
  text-align: center;
  font-size: 0;
  background-color: var(--button-background);
  opacity: 0.7;
}

#vtlThemeSelector button:hover {
  opacity: 0.85;
}

#vtlThemeSelector button::before { /* font awesome styles */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  font-size: 1rem;
  line-height: 1;
  text-rendering: auto;
  font-family: "Font Awesome 6 Free";
  color: var(--button-color);
}

#vtlThemeSelector .vtl-theme-toggler.active {
  opacity: 1;  
}

#vtlThemeSelector .vtl-theme-toggler[data-theme="light"]::before {
  content: "\f185"; /* fa-sun */
  font-weight: 900;
}

#vtlThemeSelector .vtl-theme-toggler[data-theme="dark"]::before {
  content: "\f186"; /* fa-moon */
  font-weight: 900;
  color: #f1ecde;
}

#vtlThemeSelector .vtl-viewport-toggler::before {
  content: "\f390"; /* fa-desktop */
  font-weight: 900;
}

#vtlThemeSelector .vtl-viewport-toggler.mobile::before {
  content: "\f3cd"; /* fa-mobile-screen-button */
  font-weight: 900;
}

Script	Корректное цитирование на iOS
Сервис	Обновление CSS-классов?
Конкурс	Победители конкурса валентинок.
Конкурс	Рассказываем о любимых форумах до 5 февраля.
Конкурс	Победители конкурса!
Конкурс	Третья часть конкурса. Вернемся к истокам.
Сервис	Тестируем функционал: голосовые сообщения
Сервис	Наблюдаются проблемы с доступом к mybb. Причины уточняются.
Конкурс	Вторая часть конкурса. Раскрываем тайны персонажа.
Конкурс	Выбери персонажа.
Новости	Минорные изменения.
Сервис	Последствия DDoS-атаки устранены. Форумы должны заработать в прежнем режиме.
Сервис	На mybb ведется DDoS-атака. Форумы могут быть недоступны какое-то время.
Новости	Новый форум для околоролевых проектов.
Сервис	Страсти по РКН.
Сервис	Новая опция: регистрация без подтверждения по email.
Сервис	Блокировки на сервисе.

window.gscript.fullVerText значение по умолчанию: full version	текст, который будет отображаться на кнопке перехода на полную версию.
window.gscript.mobVerText значение по умолчанию: mobile version	текст, который будет отображаться на кнопке перехода в мобильную версию
window.gscript.appendTo значение по умолчанию: body	CSS-селектор элемента, в самый конец которого который добавится панель выбора темы (например, "#html-header"). Если на странице уже есть элемент с id vtlThemeSelector, параметр игнорируется.
window.gscript.scaleDesktop значение по умолчанию: 0.36	коэфициент для десктопного вида -- дробное число c точкой в качестве десятичного разделителя. Как его рассчитать Поделить ширину мобильного устройства на ширину желательной области просмотра и округлить до двух знаков после запятой. При просмотре форума на устройстве с шириной экрана 375px коэффициент 0.36 примерно соответствует ширине области просмотра в 1040px и т.д.
window.gscript.useDataAttr значение по умолчанию: false	Указывает скрипту, что нужно добавлять не класс к body, а атрибут вида data-theme="themeName" к html. Как использовать в CSS :root { --color: black; } :root[data-theme="red"] { --color: red; } Миграция с класса на атрибут: .dark --> [data-theme="dark"] body.dark --> [data-theme="dark"] body

Birds in shadow

Меню навигации

Пользовательские ссылки

Объявление

Новости

Интересное

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

Тестовое сообщение

Сообщений 11 страница 12 из 12

Поделиться1118-03-2025 11:47

Поделиться1219-03-2025 09:44