Внешний вид сайта:

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

Будем делать смену стилей сайта с запоминанием на Cookie.Это хорошая возможность сделать кнопки смены оформления, фона, расцветки панелей или дизайна на основе данного скрипта. Ваш пользователь 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

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

Важно! Не допускайте дублирования директив 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 отвечает за выделение кнопки активной темы после нажатия.

Комментарии

Нет комментариев. Ваш будет первым!