Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК, пн-пт)
Техническая поддержка
Корзина 0
Адаптивные dle шаблоны   Советы и новости   Переключатель "сменить цвет шаблона" на DLE пользователем

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

Как для пользователя сделать красивую кнопку смены шаблона на лету на сайте? Как сменить "дневной" шаблон на "ночной", светлый на темный? Предлагаю вам простой вариант на ajax с помощью стандартной функции skin change на 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+'';
};


В настройках - посетители должно быть включено "Разрешить посетителям смену скина на сайте"
Код css подгоняйте для себя, иконки fal (популярный набор Font Awesome) меняйте на свои иконки, если требуется.
Вообще вся соль тут в onclick="skinChange('dark-theme');" и используя это вы можете сделать кнопки любого вида и хоть 10 штук.
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Коза - козел, корова - ... ?
Отзывов (7)
Александр
Александр Гости 22 марта 2021 20:05
Спасибо давно искал такой код sunglasses wink
Андрей
Андрей Гости 30 марта 2021 20:00
А можно сделать примеру так ? что-бы в одном шаблоне лежали все стили
/templates/название шаблона/css/styles1.css основной белый
/templates/название шаблона/css/styles2.css второй черный
webrambo
webrambo Администраторы 30 марта 2021 20:33
Андрей, можно примерно так и другим способом https://teramoune.info/free/31-change-theme-mode.html
proger86
proger86 Посетители 17 сентября 2021 20:54
Почему может не работать этот метод? Нажимаю на кнопку, идет загрузка и ничего не меняется. Стандартным {changeskin} работает нормально.

Название шаблонов указано правильно
webrambo
webrambo Администраторы 18 сентября 2021 09:36
proger86, открываете в меню браузера инструменты разработчика, там вкладка консоль, смотрите там ошибки без клика и с кликом по переключателю.
proger86
proger86 Посетители 18 сентября 2021 11:50
webrambo,
Вообще нет никаких ошибок, страница перегружается как будто там выбран этот же шаблон
Evghenii
Evghenii Гости 13 октября 2021 08:32
Подскажите пожалуйста, как иконки подключить? Буду очень благодарен за ответ!)