Смена цветовой схемы сайта

3823
Всем доброго времени суток!
В одном из шаблонов от Dezerit Web Group, мне понравилась реализация смены стилей CSS в шаблоне сайта.
Т.К. Я не нашел этой реализации в блогах и форуме, в своём первом посте хочу рассказать о том, как это можно реализовать!


1. В файле template.php добавить переменные
После
Код PHP:
if(!defined('VALID_CMS')) { die('ACCESS DENIED'); }
    $inUser = cmsUser::getInstance();
    $inCore = cmsCore::getInstance();

    $mod_count['top']   = cmsCountModules('top');
    $mod_count['sidebar']  = cmsCountModules('sidebar');
Добавить ниже
Код PHP:
/*Стиль шаблона*/
	$selStyle="1"; 	/*Введите между кавычек номер стиля загружаемого по умолчанию*/ 
2. Изменить строку в которой прописан путь к файлу стилей шаблона (добавляется только id)
Это
Код PHP:
<link href="/templates/_ваш шаблон_/css/style.css" rel="stylesheet" type="text/css" />
Заменить на это и добавить ниже скрипт
Код PHP:
<link id="dyncss" href="/templates/_ваш шаблон_/style<?php echo $selStyle;?>/css/main.css" rel="stylesheet" type="text/css" />
Код PHP:
<script type="text/javascript">   
	function selStyle(url) {   
		if (!arguments.length) {   
			url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];   
			if (!url) return '';
		}   
		document.getElementById('dyncss').href = url;   
		var d = new Date();   
		d.setFullYear(d.getFullYear() + 1);   
		document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');   
		return url;
		}   
	selStyle();   
	</script>
style - это название папки со стилем, а <?php echo $selStyle;?> - та переменная, которая будет выступать ввиде номера папки

3. В нужном месте шаблона вставить кнопки, с помощью которых пользователь будет выбирать стиль сайта
Код PHP:
//Пример для вставки
Вариант в виде контекстной ссылки
<a href="javascript://" onclick="selStyle('Ссылка на стиль 1.css');return false;">Стиль 1</a> 
<a href="javascript://" onclick="selStyle('Ссылка на стиль 2.css');return false;">Стиль 2</a>
Вариант с картинкой, которая выступает в роли ссылки
<img style="border:0 none;cursor:pointer;" src="Ссылка на картинку" onclick="selStyle('/templates/_ваш шаблон_/style/blue.css')" />   
<img style="border:0 none;cursor:pointer;" src="Ссылка на картинку" onclick="selStyle('/templates/_ваш шаблон_/style/green.css')" />
4. Последнее что остаётся сделать, это создать отдельные папки для каждого стиля и закинуть ваши разные стили!
В корне шаблона создать 2 папки с названием style1 и style2. (можно больше, зависит от количества Ваших стилей)
За выбор номера папки будет отвечать переменная $selStyle, которую создали ранее

Структура вложенных папок должна быть примерно такой:
пример:
-style1
--css
--images
--js

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

Демо можно посмотреть тут

Удачи!!!
Голосовой поиск по сайту или распознавание речи
Комментарии (15)
WALTERZ 31 мая 2012 в 09:25 +1
Полезно, спасибо :)
+
CROSS ツ 31 мая 2012 в 10:37 0
Кнопки смены стилей можно вывести в отдельную вкладку в профиле! Но это пока ни к чему, вот если бы сделать к примеру как на Mail.RU, чтобы настройки сохранялись в БД, было бы замечательно!

P.S. Этим методом можно сделать смену макета сайта (grid сетки)
Mr.Andreius 31 мая 2012 в 10:40 0
да
убирать / добавлять сайдбар
менять расположение позиций
Mr.Andreius 31 мая 2012 в 10:38 0
<link id="dyncss" href="/templates/_ваш шаблон_/style<?php echo $selStyle;?>/css/main.css" rel="stylesheet" type="text/css" />

не проще в одной папке положить два разных стиля и менять их названия?

<link id="dyncss" href="/templates/_ваш шаблон_/css/styles-style<?php echo $selStyle;?>.css" rel="stylesheet" type="text/css" />
CROSS ツ 31 мая 2012 в 13:16 +1
Удобней когда каждый стиль, все графические элементы скрипты лежат в одной папке! для другого стиля всё в другой! Я считаю так проще и очень удобно для дальнейших изменений!

не проще в одной папке положить два разных стиля и менять их названия?
Тоже как вариант, но я не стал эксперементировать, времени нет диплом ща пишу!
CROSS ツ 31 мая 2012 в 13:22 0
Да и у себя второй стиль надо до ума довести! Времени нет(
Олег 31 мая 2012 в 11:21 0
Молодец!!!
Прикольно.
CyberMan 31 мая 2012 в 12:40 0
к сожалению для шаблона ic_socium 3.0 не подойдет
CROSS ツ 31 мая 2012 в 13:19 0
Почему не подойдёт?? Ещё как подойдет! hoho

Сделать по тому же принципу!
Я у себя это не сразу сделал! Стиль был один!
CyberMan 31 мая 2012 в 13:19 0
Там например шапка сделана не через Style а через картинку))
CROSS ツ 31 мая 2012 в 13:30 0
Ну так прописать её в стиле! На сколько я помню она фиксированная! ДА!?
Прописать путь к картинке в css, так сделано в дефолтном шаблоне инстанта))
Код PHP:
<?php if($templ['head']==1){ ?>
		<style rel="stylesheet" type="text/css">
			#header_box{
				position: fixed;
			}
			
			body, #wrap_100{
				background-attachment: fixed;
			}
		</style>
	<?php } ?>
Этот стиль прописать в css а не в шаблоне
CROSS ツ 31 мая 2012 в 15:08 0
В стиле color.css найти
Код PHP:
#header_box{
	background: url('../images/header_box.png') repeat-x top left;
}
И заменить на
Код PHP:
]#header_box{
	background: url('../images/header_box.png') repeat-x top left;
position: fixed;

}
body, #wrap_100{
				background-attachment: fixed;
			}

а из шаблона удалить переменную $templ['head'] = 1; и условие
Код PHP:
<?php if($templ['head']==1){ ?>
		<style rel="stylesheet" type="text/css">
			#header_box{
				position: fixed;
			}
			
			body, #wrap_100{
				background-attachment: fixed;
			}
		</style>
	<?php } ?>
теоретически должно работать
Dost 31 мая 2012 в 21:29 0
Спасибо +
Def 21 июля 2012 в 11:34 0
а где можно взять такой макет, как у вас на демке?)
CROSS ツ 19 января 2013 в 22:14 0
это дефолтный переделаный) или здесь. скачать 16 колончатый и заменить 960.css в шаблоне