Переключатель "сменить цвет шаблона" на DLE пользователем
Как для пользователя сделать красивую кнопку смены цвета шаблона на лету на сайте? Как сменить "дневной" шаблон на "ночной", светлый на темный? Есть несколько способов. Результат будет такой, справа кнопка:
![]()
Код css подгоняйте для себя, иконки fal (популярный набор Font Awesome) меняйте на свои иконки, если требуется.
Этот способ используется в наших шаблонах, в которых есть такая функция. Суть способа: кнопкой переключается класс у body, в зависимости от класса меняется цвет. Легко и удобно менять, если цвета в шаблоне заданы через переменные. Плюс способа: это один шаблон, очень быстро и легко меняется цвет. Минус: требуется обладать минимальными знаниями работы с css, чтобы применять этот способ. Допустим, у нас светлая тема по умолчанию, хотим переключить на темную, за темную отвечает класс dt-is-active.
В main.tpl в нужное место вставить кнопку
В main.tpl после
В main.tpl перед
Таким образом, если у нас цвета шаблона заданы через переменные
то мы просто переназначаем их, добавляем недостающие, меняем если нужно. То есть ниже основных переменных добавляем
Второй способ похож на первый, но вместо замены класса мы на лету добавляем на страницу css файл, где описаны настройки другого цвета. Будет позже.
Предлагаю вам простой вариант на ajax с помощью стандартной функции change color на DLE. Плюс способа: не нужно знаний, просто копировать и вставить. Минус: это не один шаблон, а два, значит при внесении правок нужно вносить правки в оба шаблона, а также соответственно иметь эти два шаблона разного цвета. Неудобно.
Как многие знают, сменить шаблон можно по ссылке
Эту функцию мы и используем, причем делать мы будем лишь в шаблоне, движок не затронем, а пользователь останется на той же странице.
Код в ваш tpl
Где dark-theme название шаблона на который меняем, а класс is-active выделяет активный пункт. То есть, если код выше для светлого шаблона, то для темного dark-theme соответственно будет
В ваш css файл
В ваш js файл
Вот и все. В настройках - посетители должно быть включено "Разрешить посетителям смену скина на сайте".
Иногда по неизвестным мне причинам на сайте не срабатывает ajax запрос. При клике страница просто перезагружается, а шаблон не меняется. В таком случае замените код в вашем js файле на код ниже. Этот способ хуже тем что юзера перенаправит на главную страницу, но у меня нет других вариантов.
Код css подгоняйте для себя, иконки fal (популярный набор Font Awesome) меняйте на свои иконки, если требуется.
Первый способ
Этот способ используется в наших шаблонах, в которых есть такая функция. Суть способа: кнопкой переключается класс у body, в зависимости от класса меняется цвет. Легко и удобно менять, если цвета в шаблоне заданы через переменные. Плюс способа: это один шаблон, очень быстро и легко меняется цвет. Минус: требуется обладать минимальными знаниями работы с css, чтобы применять этот способ. Допустим, у нас светлая тема по умолчанию, хотим переключить на темную, за темную отвечает класс dt-is-active.
В main.tpl в нужное место вставить кнопку
<div class="change-color">
<span class="fal fa-sun"></span>
<span class="fal fa-moon"></span>
</div>В main.tpl после
<body><script>
function switchLight() {
if (localStorage.getItem('theme') === 'dark') {
document.querySelector('body').classList.add('dt-is-active');
} else {
document.querySelector('body').classList.remove('dt-is-active');
};
};
switchLight();
</script>
<style>
.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; gap: 5px;}
.change-color span {width: 30px; height: 30px; border-radius: 50%; color: #ccc; display: grid; place-items: center;}
body:not(.dt-is-active) .change-color li:first-child, body.dt-is-active .change-color li:last-child {background-color:#fff; color: #444;}
</style>
В main.tpl перед
</body><script>
document.querySelector('.theme-toggle').onclick = ()=> {
if (localStorage.getItem('theme') === 'dark') {
localStorage.removeItem('theme');
} else {
localStorage.setItem('theme','dark');
};
switchLight();
};
</script>
Таким образом, если у нас цвета шаблона заданы через переменные
:root {
--bg: #fff; --bg-darker: #f6f6f8;
--tt: #212121; --tt-fade: #8e8e8e;
--bg-btn: #9b59b6; --tt-btn: #fff; --bg-btn-hover: #8e44ad;
--accent-red: #9b59b6; --accent-red2: #eb4d4b; --accent-blue: #06c; --accent-green: #2ecc71;
}
то мы просто переназначаем их, добавляем недостающие, меняем если нужно. То есть ниже основных переменных добавляем
.dt-is-active {
--bg: #0f1014; --bg-darker: #090a0e;
--tt: #fff; --tt-fade: #9c9c9c;
--bg-btn: #ce2640; --tt-btn: #fff; --bg-btn-hover: #e73752;
}
.dt-is-active .descr {color: var(--tt-fade);}
Второй способ
Второй способ похож на первый, но вместо замены класса мы на лету добавляем на страницу css файл, где описаны настройки другого цвета. Будет позже.
Третий способ
Предлагаю вам простой вариант на 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]; }
});
};Вот и все. В настройках - посетители должно быть включено "Разрешить посетителям смену скина на сайте".
Иногда по неизвестным мне причинам на сайте не срабатывает ajax запрос. При клике страница просто перезагружается, а шаблон не меняется. В таком случае замените код в вашем js файле на код ниже. Этот способ хуже тем что юзера перенаправит на главную страницу, но у меня нет других вариантов.
function skinChange(a) {
window.location = '/index.php?action_skin_change=yes&skin_name='+a+'';
};Отзывов (13)