Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Выбор дополнительных стилей дизайна для пользователей сайта
Дата добавления: 10.01.2014 - 09:33
Категория: Хаки / Дополнения, Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 1583
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Пример создания дополнительных стилей для сайта.
Позволяющий на пользовательской стороне выбрать стиль пользователем, который больше понравится гостю сайта.
И так...
в js/ папке создать файл foot_global.js и в него поместить код
на страницах модулей (которые активированы)
перед закрывающимся тегом
</head>
прописать (обязательно ниже всех остальных файлов css путь)
перед закрывающимся тегом
</body>
прописать
в любом месте вашего шаблона прописать
в /style/styles.css прописать
в папке /style/ создать файлы
style-green.css
style-blye.css
style-red.css
style-yellow.css
и в них прописывать доп стили которые и будут изменять на пользовательском уровне
Позволяющий на пользовательской стороне выбрать стиль пользователем, который больше понравится гостю сайта.
И так...
в 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"))
}
}
//]]>
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"))
}
}
//]]>
на страницах модулей (которые активированы)
перед закрывающимся тегом
</head>
прописать (обязательно ниже всех остальных файлов css путь)
Код
<!--Cookie стиль-->
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="/style/style-green.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blye-theme" href="/style/style-blye.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="/style/style-red.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-theme" href="/style/style-yellow.css" disabled="">
<!--Cookie стиль-->
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="/style/style-green.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blye-theme" href="/style/style-blye.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="/style/style-red.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-theme" href="/style/style-yellow.css" disabled="">
<!--Cookie стиль-->
перед закрывающимся тегом
</body>
прописать
Код
<script type="text/javascript" src="/js/foot_global.js"></script>
в любом месте вашего шаблона прописать
Код
<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>
<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>
в /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;}
#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;}
в папке /style/ создать файлы
style-green.css
style-blye.css
style-red.css
style-yellow.css
и в них прописывать доп стили которые и будут изменять на пользовательском уровне
Поделись с друзьями: