Шаблоны для 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]; }
  }); 
};

Вот и все.

В настройках - посетители должно быть включено "Разрешить посетителям смену скина на сайте"
Код 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
Коза - козел, корова - ... ?
Отзывов (3)
Александр
Александр Гости 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