Найти на сайте

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

+47
4.83K
  2. Блоги
  3. Смена цветовой схемы сайта
Всем доброго времени суток!
В одном из шаблонов от Dezerit Web Group, мне понравилась реализация смены стилей CSS в шаблоне сайта.
Т.К. Я не нашел этой реализации в блогах и форуме, в своём первом посте хочу рассказать о том, как это можно реализовать!
Иллюстрация

1. В файле template.php добавить переменные
После
  1. if(!defined('VALID_CMS')) { die('ACCESS DENIED'); }
  2.     $inUser = cmsUser::getInstance();
  3.     $inCore = cmsCore::getInstance();
  4.  
  5.     $mod_count['top']   = cmsCountModules('top');
  6.     $mod_count['sidebar']  = cmsCountModules('sidebar');
Добавить ниже
  1. /*Стиль шаблона*/
  2. 	$selStyle="1"; 	/*Введите между кавычек номер стиля загружаемого по умолчанию*/
2. Изменить строку в которой прописан путь к файлу стилей шаблона (добавляется только id)
Это
  1. <link href="/templates/_ваш шаблон_/css/style.css" rel="stylesheet" type="text/css" />
Заменить на это и добавить ниже скрипт
  1. <link id="dyncss" href="/templates/_ваш шаблон_/style<?php echo $selStyle;?>/css/main.css" rel="stylesheet" type="text/css" />
  1. <script type="text/javascript">   
  2. 	function selStyle(url) {   
  3. 		if (!arguments.length) {   
  4. 			url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];   
  5. 			if (!url) return '';
  6. 		}   
  7. 		document.getElementById('dyncss').href = url;   
  8. 		var d = new Date();   
  9. 		d.setFullYear(d.getFullYear() + 1);   
  10. 		document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');   
  11. 		return url;
  12. 		}   
  13. 	selStyle();   
  14. 	</script>
style — это название папки со стилем, а <?php echo $selStyle;?> — та переменная, которая будет выступать ввиде номера папки

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

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

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

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

Удачи!!!
Голосовой поиск по сайту или распознавание речи
смена стиляцветовая схема
+1
WALTERZ WALTERZ 11 лет назад #
Полезно, спасибо :)
+
0
CROSS &#12484; CROSS ツ 11 лет назад #
Кнопки смены стилей можно вывести в отдельную вкладку в профиле! Но это пока ни к чему, вот если бы сделать к примеру как на Mail.RU, чтобы настройки сохранялись в БД, было бы замечательно!

P.S. Этим методом можно сделать смену макета сайта (grid сетки)
0
Mr.Andreius Mr.Andreius 11 лет назад #
да
убирать / добавлять сайдбар
менять расположение позиций
0
Mr.Andreius Mr.Andreius 11 лет назад #
<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" />
+1
CROSS &#12484; CROSS ツ 11 лет назад #
Удобней когда каждый стиль, все графические элементы скрипты лежат в одной папке! для другого стиля всё в другой! Я считаю так проще и очень удобно для дальнейших изменений!

не проще в одной папке положить два разных стиля и менять их названия?
Тоже как вариант, но я не стал эксперементировать, времени нет диплом ща пишу!
0
CROSS &#12484; CROSS ツ 11 лет назад #
Да и у себя второй стиль надо до ума довести! Времени нет(
0
Олег Олег 11 лет назад #
Молодец!!!
Прикольно.
0
CyberMan CyberMan 11 лет назад #
к сожалению для шаблона ic_socium 3.0 не подойдет
0
CROSS &#12484; CROSS ツ 11 лет назад #
Почему не подойдёт?? Ещё как подойдет! hoho

Сделать по тому же принципу!
Я у себя это не сразу сделал! Стиль был один!
0
CyberMan CyberMan 11 лет назад #
Там например шапка сделана не через Style а через картинку))
0
CROSS &#12484; CROSS ツ 11 лет назад #
Ну так прописать её в стиле! На сколько я помню она фиксированная! ДА!?
Прописать путь к картинке в 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 а не в шаблоне
0
CROSS &#12484; CROSS ツ 11 лет назад #
В стиле 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 } ?>
теоретически должно работать
0
Dost Dost 11 лет назад #
Спасибо +
0
Def Def 11 лет назад #
а где можно взять такой макет, как у вас на демке?)
0
CROSS &#12484; CROSS ツ 11 лет назад #
это дефолтный переделаный) или здесь. скачать 16 колончатый и заменить 960.css в шаблоне

Еще от автора

Голосовой поиск по сайту или распознавание речи

Голосовой поиск по сайту или распознавание речи

На сегодняшний день очень популярны планшеты и мобильные устройства!
27

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.