Суть хака проста – одним кликом можно переключаться между файлами стилей CSS, в результате чего изменяется дизайн сайта. При этом, что самое важное, последний использованный (включенный) юзером дизайн сохраняется.
Практическое применение нереально просто: включаем воображение и придумываем что-то типа смена времён года по клику, либо что-нибудь простое типа смены дизайна сайта.
В общем придумывай и юзай...
Установка:
Качаем архив с двумя .js файлами и кидаем папку с ними либо в корень либо в шаблон.
Прописывам путь к ним в main.tpl или в файле котором будет применяться данный хак:
Создаем .css файл и пишем в нем например:
И тогда блок на сайте который будет меняться при переключении, ну или вообще глобально весь body берем в div'ы:
Ну и на конец пишем две ссылки или делаем кнопки для переключения например так:
Вот так все просто.
Демо можно глянуть тут: http://dle.yooclub.net/styleswitch.html
Качаем архив с двумя .js файлами и кидаем папку с ними либо в корень либо в шаблон.
Прописывам путь к ним в main.tpl или в файле котором будет применяться данный хак:
<script type="text/javascript" src="styleswitch/jquery.min.js"></script>
<script type="text/javascript" src="styleswitch/styleswitch.js"></script>
<script type="text/javascript" src="styleswitch/styleswitch.js"></script>
Создаем .css файл и пишем в нем например:
#st2 {
background-color:#ff9900;
color: #ffffff;
font-size: 12px;
font-family: tahoma;
padding-left: 6px;
}
background-color:#ff9900;
color: #ffffff;
font-size: 12px;
font-family: tahoma;
padding-left: 6px;
}
И тогда блок на сайте который будет меняться при переключении, ну или вообще глобально весь body берем в div'ы:
<div id="st2">Блок или текст который будет изменяться при нажатии</div>
Ну и на конец пишем две ссылки или делаем кнопки для переключения например так:
<ul>
<li><a href="serversideSwitch.html-style=style1.htm" rel="styles2" class="styleswitch">кнопка 1</a></li>
<li><a href="serversideSwitch.html-style=style2.htm" rel="styles1" class="styleswitch">кнопка 2</a></li>
</ul>
<li><a href="serversideSwitch.html-style=style1.htm" rel="styles2" class="styleswitch">кнопка 1</a></li>
<li><a href="serversideSwitch.html-style=style2.htm" rel="styles1" class="styleswitch">кнопка 2</a></li>
</ul>
Вот так все просто.
Демо можно глянуть тут: http://dle.yooclub.net/styleswitch.html