Хаки и Скрипты Next Generation CMS

Делаем выбор стиля оформления сайта пользователем

irbees2008 irbees2008 Опубликовано - 11 - марта Интерфейс
4946 - 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

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

Можешь почитать и вот эту статейку "Регулярные выражения для валидации"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [13]
  • Гости: [13]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 30
  • Генерация страницы: 0.558сек
  • Потребление памяти: 5.164 Mb 
  •   Яндекс.Метрика