Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Переключатель "сменить цвет шаблона" на dle пользователем

Тема в разделе "Хаки DLE", создана пользователем redissx, 6 мар 2021.

06.03.21 в 14:08
09.03.21 в 17:58
3
6.920
8
  1. TopicStarter Overlay
    redissx

    redissx Бывалый

    Регистрация:
    23 сен 2015
    Сообщения:
    815
    Лучших ответов:
    7
    Рейтинги:
    +977 / 162 / -0
    Как для пользователя сделать красивую кнопку смены шаблона на лету на сайте? Как сменить "дневной" шаблон на "ночной", светлый на темный? Предлагаю вам простой вариант на ajax с помощью стандартной функции change color на DLE. Как многие знают, сменить шаблон можно по ссылке
    Код:
    ВАШСАЙТ/index.php?action_skin_change=yes&skin_name=ИМЯШАБЛОНА
    Эту функцию мы и используем, причем делать мы будем лишь в шаблоне, движок не затронем, а пользователь останется на той же странице. Результат будет такой, справа кнопка:
    [​IMG]

    Код в ваш tpl
    Код:
    <ul class="change-color" onclick="skinChange('dark-theme');" title="Сменить цвет дизайна">
    <li class="is-active"><span class="fal fa-sun"></span></li>
    <li><span class="fal fa-moon"></span></li>
    </ul>
    Где dark-theme название шаблона на который меняем, а класс is-active выделяет активный пункт. То есть, если код выше для светлого шаблона, то для темного dark-theme соответственно будет
    Код:
    <ul class="change-color" onclick="skinChange('light-theme');" title="Сменить цвет дизайна">
    <li><span class="fal fa-sun"></span></li>
    <li class="is-active"><span class="fal fa-moon"></span></li>
    </ul>
    В ваш css файл
    Код:
    .change-color, .change-color * {box-sizing: border-box;}
    .change-color {display: inline-flex; justify-content: space-between; align-items: center; cursor: pointer;
       background-color: #444; height: 40px; border-radius: 20px; padding: 5px 0; margin-left: 20px;}
    .change-color li {cursor: pointer; width: 30px; height: 30px; line-height: 30px;
       border-radius: 50%; text-align: center; color: #ccc; margin: 0 5px;}
    .change-color li.is-active {background-color:#fff; color: #444;}
    В ваш js файл
    Код:
    function skinChange(a) {
       $.ajax({
       type: "POST",
         url: "/index.php",
       data: {'action_skin_change': 'yes', 'skin_name': a},
       beforeSend: function() { ShowLoading(''); },
       success: function() { window.location = window.location.href.split("#")[0]; }
      });
    };
    Вот и все.

    В настройках - посетители должно быть включено "Разрешить посетителям смену скина на сайте"
    Код css подгоняйте для себя, иконки fal (популярный набор Font Awesome) меняйте на свои иконки, если требуется.

    Источник Переключатель "сменить цвет шаблона" на DLE пользователем
     
    • Нравится Нравится x 8
  2. Heiz

    PRO Users

    Регистрация:
    24 сен 2016
    Сообщения:
    1.112
    Лучших ответов:
    1
    Рейтинги:
    +312 / 48 / -0
    redissx это смена шабов же. Тогда надо будет правки в 2х шаблонах вносить. Вопрос по последней теме. Сложно ли твой стиль разбить на 2 файла - базовый минимального размера, где будут все цвета изменяющиеся прописаны и второй со остальными (статичными) стилями? Хочу цвет заменой файла стилей менять. В каком-то шабе из недавних видел переменные в CSS для быстрой правки цвета. У тебя не так сейчас?
     
    • Не согласен Не согласен x 1
  3. TopicStarter Overlay
    redissx

    redissx Бывалый

    Регистрация:
    23 сен 2015
    Сообщения:
    815
    Лучших ответов:
    7
    Рейтинги:
    +977 / 162 / -0
    Heiz у меня нет внятного ответа, не все так просто. В перспективе одним файлом с общими настройками где переменные. Но у меня сейчас такого нет и в новом шаблоне.
     
  4. TeraMoune

    TeraMoune Бывалый

    Регистрация:
    6 апр 2019
    Сообщения:
    310
    Лучших ответов:
    3
    Рейтинги:
    +130 / 9 / -0
    Метод так себе, тут я описал простой способ реализации смены оформления, основанного на cookie.

    Смена цвета определяется наличием класса у body и в основном файле стилей есть небольшая часть стилей которая перебивает стили основного сайта. Есть функция подобно той, как описана в примере топика но проще, функция добавляет или убирает класс и присваивает cookie.

    А в cms параметр используется для добавления на страницу уже после перезагрузки страниц.
     
    • Нравится Нравится x 1
Яндекс.Метрика