Смена дизайна по временам года
Четверг, 4 сентября 2008
Наверное постоянные читатели заметили, что с приходом осени, в дизайне блога появились небольшие изменения — слегка поменялась цветовая гамма и фоновое изображение в футере.
Сделано это спомощью простого PHP-скрипта, который меняет стилевые листы по сезонам года. Кто не догадался — их, соответственно четыре (весна, лето, осень, зима). Два варианта вы уже могли увидеть, на очереди ещё пара.
Такой переключатель можно добавить в любой блог или сайт на PHP (для примера я возьму WordPress).
Предыстория
Давно хотелось сделать что-то подобное, но не было повода, подходящего проекта и времени. Идея, прямо скажу, не новая и была по-разному реализована на многих сайтах. Эксперименты с переключателями стилей были популярны четыре-пять лет назад и было множество примеров их использования.
Я встречал различные реализации: смена времени суток, часов, шапки сайта в зависимости от погоды, просто замена цветовой гаммы или всего дизайна сразу. Случайно или по желанию/клику пользователя.
Кстати, несколько месяцев назад на хабре была ссылка на подобный интересный пример (возможно, он и послужил некоторым прототипом). Единственное, что мне не очень понравилась реализация. Всё-таки, JavaScript должен отвечать за поведение страницы, а не за формирование её структуры и внешнего вида. Всегда есть вероятность, что поддержка скриптов выключена и пользователь не оценит всех ваших страданий стараний :)
Пусть лучше этим займётся PHP.
Реализация
Для начала, сделайте бэкап вашей темы, чтобы была возможность всё исправить, если что-то не получилось. Защита от дурака — дело рук самого дурака ©
Затем подготовьте и протестируйте четыре стилевых листа, соответсвенно по одному для каждой поры года (winterStyle.css, springStyle.css, summerStyle.css, autumnStyle.css).
Если это небольшие изменения, то написание стилей не займёт много времени. Я нарисовал всего лишь по две картинки и заменил цвета ссылок.
По возможности, протестируйте сайт локально, поочерёдно подключая стилевые листы. Затем залейте их в ту же директорию, где находится ваша WordPress-тема.
Дальше, если бы я был true-программистом, я бы посоветовал использовать такую функцию (PHP):
function seasonStyle() {
$seasons = array(0 => 'winter', 1 => 'spring', 2 => 'summer', 3 => 'autumn');
return $seasons[ floor(date('n') / 3) % 4 ];
}
Но так, как я всё-таки считаю себя дизайнером, то и буду объяснять обычным языком для дизайнеров, а не для киборгов последней модели гуру PHP. Поэтому забудьте про предыдущий пример (хотя он вполне рабочий и аналогичен примеру ниже), напишем функцию попроще (PHP):
function seasonStyle() {
$date_time_array = getdate(time());
$month = $date_time_array['mon'];
switch($month) {
case 1: case 2: case 12:
$thisMonth = 'winter';
break;
case 3: case 4: case 5:
$thisMonth = 'spring';
break;
case 6: case 7: case 8:
$thisMonth = 'summer';
break;
case 9: case 10: case 11:
$thisMonth = 'autumn';
break;
default:
$thisMonth = 'summer';
}
return $thisMonth;
}
Затем нужно скопировать эту функцию в файл functions.php мeжду <?php . . . ?>, который находится в вашей теме.
И последнее, что нужно сделать — вызвать функцию в файле header.php в строке подключения стилевого листа (XHTML):
<link rel="stylesheet" href="<?php echo seasonStyle()?>Style.css" type="text/css" media="screen" />
Чтобы проверить, всё ли работает, конечно, глупо ждать пока придёт следующий сезон года. Поэтому, временно закомментируйте две первые строки в функции seasonStyle () таким образом /* . . . */ и для проверки впишите вместо них (PHP):
$month = rand(1,12); //случайное значение переменной для проверки работы скрипта
Сохраните все изменения и перезагрузите сайт несколько раз. Стили должны меняться. После этого удалите код из последнего примера и верните закомментированные строки. Всё.
Важно: если что-то не работает, проверьте правильность указания пути к CSS-файлам!
После небольшой доработки скрипта, можете менять дизайн не только по временам года, но, при желании, и каждый месяц :)
Лучшие примеры того, что можно сделать с сайтом с помощью замены стилевого листа, смотрите на csszengarden.com.
Если реализуете что-нибудь интересное на этом или похожем скрипте, киньте ссылку в комментарий. Всегда интересно смотреть нескучные сайты.
* * *
Сканируем веб:
Подробное тестирование браузера Google Chrome.
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Можно согласиться что подобная смена дизайнов возможна на развлекательных сайтах :) Но вот крупным проектам — сложнее правильно использовать подобную идею
Здравствуйте!
Спасибо за интересную информацию!
Если у вас есть время и возможность посмотрите пожалуйста на дизайн верхней шапки форума который я оставил в пункте сайт.
Как по вашему стоит эту шапку поменять, подправить, изменить?
Буду благодарен за любые конструктивные предложения.
С уважением,
Александр
Ну, Александр, вы сами напросились :)
По дизайну и цветовой гамме ничего советовать не буду, хотя подход с травкой и небом что-то напоминает... Если пользователи сильно не ругаются на дизайнера значит сойдёт :) Давайте лучше разберёмся с компоновкой элементов и функционалом в шапке.
Поехали:
1. Нет ссылки под логотипом на главную страницу. Ещё логотип смотрится несколько неаккуратно, из-за того, что при сохранении в gif, на границе появились белые пиксели.
Да, и может стоит сделать дополнительную чёрную обводку вокруг текста (stroke), чтобы буквы чётче читались?
2. Нет слогана под логотипом.
3. Светлую полосу с датой и временем следует вообще убрать. Вы удивитесь, но пользователи всегда в курсе, какое сегодня число и который сейчас час. Хотя бы из-за стандартных часов в Windows в правом нижнем углу.
Если без времени уж совсем никак, то вынесите его хотя бы в правый верхний угол, там где небо. Его много и оно пустое.
4. Звёздочка (справа от времени), которая открывает по клику форму для входа. Убрать.
Конечно хорошо, когда войти на форум можно с любой страницы, но тогда вот это страница для входа с развёрнутой верхней звёздочкой смотрится странно.
Причём формы, выполняющие одну и ту же функцию, выглядят по-разному.
Открывающаяся вообще выглядит отвратительно (сорри): не подписаны текстовые поля, зачем-то над формой стоит ссылка на вход, и ещё ссылка на письмо активации. Каша какая-то. Доведите до ума. И определитесь, как всё-таки выводить форму для входа: можно открывать как сейчас или отдельной страницей. И то и другое можно сделать с помощью ссылки «вход» в меню.
5. Блок «Аватары/Авторский/Дизайн/»: предложения для художников можно отправить в пункт меню, а ссылки на аватарщиков оформить, как рекламный блок и не прятать под кат.
6. Поиск тоже прятать не нужно. Можно вставить туда, где сейчас расположены часы. Кнопка на расширенный поиск непонятна и не выровнена по ветикали. Лучше поставьте текстовую ссылку на расширенный поиск справа от формы.
7. Меню. Почему такое маленькое? Вроде места хватает, а кнопки-ссылки совсем небольшие. Добавьте пункты с учётом пожеланий выше и увеличьте раза в полтора-два. Можно попробовать отцентрировать, ато у меня на 22" мониторе уезжает влево и теряется среди обилия ссылок в шапке.
Хорошо, что можно увеличивать шрифты и меню не разваливается.
8. Одна кнопка. Если честно то, не определился. По идее, закладки нужны в топиках, да и наверное не в шапке скорее, а где-то ближе к футеру.
Есть ещё несколько замечаний, но думаю вам и так уже есть над чем задуматься и над чем поработать.
Не сильно я вас огорчил?
Если будут ещё вопросы после доработок, стучитесь в аську, отвечу по возможности.
PS. Понимаю, что функционал стандартный для phpbb-движка, но если уж настраивать под себя, то нужно что-то менять.
Очень интересная идея мжно организовать например 3 дизайна блога утренний, дневной и вечерний...чтобы менялись в зависимости от местного времени) будет время надо будет реализовать...
не могли бы вы сказать конструктивные мнения по дизайну/врестке что лучше убрать, что поменять в моем блоге...
Буду очень услышать ваше мнение по этому поводу)
Rotor, можно узнать, работает ли в данный момент на вашем сайте смена стиля по временам года? Если да, то к сожалению стиль до сих пор летний...
Захожу в opere — летний стиль, а в IE 8 — тож летний, но основной текст не 11px а около 10 — 9px.
Нет. Скрипт отключен.
Я после небольшого редизайна поленился переверстывать остальные версии, поэтому пока у меня «вечное лето» :)
А за IE8 спасибо. Нужно будет потестить, жаль что у меня сейчас нет его под руками.
Был красивый приятный блок с отличным Header-ом, но пришел
D: «rotaban» CLASS: «adblock» and ID: «rbz_188742» и всё испортил,
я понимаю, что реклама приносит хорошие деньги, но не в ущерб же блогу