Смена шаблона сайта на лету

Это пример создания разных дополнительных стилей для сайта с использованием 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

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

Важно! Не допускайте дублирования директив CSS при подключении файлов стилей. Если директивы будут повторяться в нескольких подключенных файлах, то повторное объявление свойств элементов будет проигнорировано.

Например, если вы подключаете основной файл стилей style.css, который содержит

body { background: url("../images/bg.png"); }

то попытка объявить

body { background: url("../images/new_bg.png"); }

в любом из файлов style-green.css, style-blye.css, style-red.css, style-yellow.css не сработает.

Альтернативный вариант

В секции head подключаем стиль, сохраненный в cookie пользователя:

<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcookie(a,b,c) {
	if(c){var d = new Date();d.setDate(d.getDate()+c);}
	if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');
	else return false;
	}
function getcookie(a) {
	var b = new RegExp(a+'=([^;]){1,}');
	var c = b.exec(document.cookie);
	if(c) c = c[0].split('=');
	else return false;
	return c[1] ? c[1] : false;
	}
function clearSet(L){
	if(L){setcookie("changeStyle",L,30);
	$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};
	var Lmem=getcookie("changeStyle");clearSet(Lmem);
</script>

Сразу следом, - ставим наши кнопки:

<div id="changeStyle" style="top:0; left: 3px; position:fixed!important;">
<img src="../images/active_button.jpg" alt="ваш_шаблон/css/style1.css"/>
<br>
<img src="../images/button.jpg" alt="ваш_шаблон/css/style2.css"/>
<br>
<img src="../images/button.jpg" alt="ваш_шаблон/style3.css"/>
<br>
</div>

и скрипт смены стиля кнопки текущей темы:

<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L)});</script>

Для оформления кнопок используем следующий CSS:

<style>
   #changeStyle img{border:solid 2px transparent;}
   .STYLselect {border-color:red!important;}
</style>

.STYLselect отвечает за выделение кнопки активной темы после нажатия.