• 2869
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Будем делать смену стилей сайта с запоминанием на Cookie .Это возможность сделать кнопки смены оформления, фона, расцветки панелей или дизайна на основе CSS . Ваш пользователь cможет выбрать сам оформление сайта.
Это пример создания разных дополнительных стилей для сайта с использованием JS скриптов.
Установка :
1.В JS/ папке шаблона создать файл foot_global.js и в него поместить код

Код:
//<![CDATA[ 
var manual_or_random = "manual" //"manual" - ручной, "random" - случайный
var randomsetting = "3 days" //"eachtime" - смена каждый раз, "sessiononly" - смена каждой сессия, "x days" (заменить х на желаемое число) . Применяется только, если режим является случайным.
//////// Код ниже нет необходимости редактировать /////////
function getCookie(Name) {
var re = new RegExp(Name + "=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
var expstring = (typeof days != "undefined") ? expireDate.setDate(expireDate.getDate() + parseInt(days)) : expireDate.setDate(expireDate.getDate() - 5)
document.cookie = name + "=" + value + "; expires=" + expireDate.toGMTString() + "; path=/";
}
function deleteCookie(name) {
setCookie(name, "moot")
}
function setStylesheet(title, randomize) {
var i, cacheobj, altsheets = [""]
for (i = 0;
(cacheobj = document.getElementsByTagName("link")[i]); i++) {
if (cacheobj.getAttribute("rel").toLowerCase() == "alternate stylesheet" && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
altsheets.push(cacheobj)
if (cacheobj.getAttribute("title") == title)
cacheobj.disabled = false
}
}
if (typeof randomize != "undefined") {
var randomnumber = Math.floor(Math.random() * altsheets.length)
altsheets[randomnumber].disabled = false
}
return (typeof randomize != "undefined" && altsheets[randomnumber] != "") ? altsheets[randomnumber].getAttribute("title") : ""
}
function chooseStyle(styletitle, days) {
if (document.getElementById) {
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element) {
if (selectedtitle != null && (element.type == undefined || element.type == "select-one")) {
var element = (element.type == "select-one") ? element.options : element
for (var i = 0; i < element.length; i++) {
if (element[i].value == selectedtitle) {
if (element[i].tagName == "OPTION")
element[i].selected = true
else
element[i].checked = true
break
}
}
}
}
if (manual_or_random == "manual") {
var selectedtitle = getCookie("mysheet")
if (document.getElementById && selectedtitle != null)
setStylesheet(selectedtitle)
} else if (manual_or_random == "random") {
if (randomsetting == "eachtime") setStylesheet("", "random")
else if (randomsetting == "sessiononly") {
if (getCookie("mysheet_s") == null)
document.cookie = "mysheet_s=" + setStylesheet("", "random") + "; path=/"
else setStylesheet(getCookie("mysheet_s"))
} else if (randomsetting.search(/^[1-9]+ days/i) != -1) {
if (getCookie("mysheet_r") == null || parseInt(getCookie("mysheet_r_days")) != parseInt(randomsetting)) {
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting))
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting))
} else setStylesheet(getCookie("mysheet_r"))
}
}
//]]>
2.В main.tpl перед закрывающимся тегом /head прописать (обязательно ниже всех остальных файлов css)
Код:
<!--Cookie стиль-->
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="{tpl_url}/style/style-green.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blye-theme" href="{tpl_url}/style/style-blye.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="{tpl_url}/style/style-red.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-theme" href="{tpl_url}/style/style-yellow.css" disabled="">
<!--Cookie стиль-->
3.Перед закрывающимся тегом /body в main.tpl добавить
Код:
<script type="text/javascript" src="{tpl_url}/js/foot_global.js"></script>
4.В любом месте или нужном вашего шаблона добавляете следующий код
Код:
  <div id="settings">
<a class="colorbox colororange" href="javascript:chooseStyle('none', 60)"></a>
<a class="colorbox colorgreen" href="javascript:chooseStyle('green-theme', 60)"></a>
<a class="colorbox colorblye" href="javascript:chooseStyle('blye-theme', 60)"></a>
<a class="colorbox colorred" href="javascript:chooseStyle('red-theme', 60)"></a>
<a class="colorbox coloryellow" href="javascript:chooseStyle('yellow-theme', 60)"></a>
</div>
5.В style/styles.css прописать
Код:
/** Смена стилей **/
#settings{border: 1px solid;display: block;font-size: 0;line-height: 0;}
#settings .colorbox{display: inline-block;margin: 8px;height: 27px;width: 27px;}
#settings .colororange{background: #f60;}
#settings .colorgreen{background: #0C0;}
#settings .colorblye{background: #08C;}
#settings .colorred{background: #F00;}
#settings .coloryellow{background: #FFF500;}
6.в папке style/ создать файлы
style-green.css
style-blye.css
style-red.css
style-yellow.css

и в них прописывать доп стили которые и будут изменять /

Можешь почитать и вот эту статейку "Делаем красивую пагинацию на сайте"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element