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

[redissx]

Как для пользователя сделать красивую кнопку смены шаблона на лету на сайте? Как сменить "дневной" шаблон на "ночной", светлый на темный? Предлагаю вам простой вариант на ajax с помощью стандартной функции change color на DLE. Как многие знают, сменить шаблон можно по ссылке

ВАШСАЙТ/index.php?action_skin_change=yes&skin_name=ИМЯШАБЛОНА

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

Код в ваш 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 пользователем

 

[Heiz]

redissx это смена шабов же. Тогда надо будет правки в 2х шаблонах вносить. Вопрос по последней теме. Сложно ли твой стиль разбить на 2 файла - базовый минимального размера, где будут все цвета изменяющиеся прописаны и второй со остальными (статичными) стилями? Хочу цвет заменой файла стилей менять. В каком-то шабе из недавних видел переменные в CSS для быстрой правки цвета. У тебя не так сейчас?

 

[redissx]

Heiz у меня нет внятного ответа, не все так просто. В перспективе одним файлом с общими настройками где переменные. Но у меня сейчас такого нет и в новом шаблоне.

 

[TeraMoune]

Метод так себе, тут я описал простой способ реализации смены оформления, основанного на cookie.

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

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