Смена дизайна по временам года

Смена дизайна по временам года через CSS

Наверное постоянные читатели заметили, что с приходом осени, в дизайне блога появились небольшие изменения — слегка поменялась цветовая гамма и фоновое изображение в футере.

Сделано это спомощью простого 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.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 8

  1. cross, 12.09.2008 в 10:28

    Можно согласиться что подобная смена дизайнов возможна на развлекательных сайтах :) Но вот крупным проектам — сложнее правильно использовать подобную идею

    Ответить

  2. Александр, 18.09.2008 в 20:09

    Здравствуйте!

    Спасибо за интересную информацию!

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

    Как по вашему стоит эту шапку поменять, подправить, изменить?

    Буду благодарен за любые конструктивные предложения.

    С уважением,

    Александр

    Ответить

  3. rotor, 19.09.2008 в 1:28

    Ну, Александр, вы сами напросились :)

    По дизайну и цветовой гамме ничего советовать не буду, хотя подход с травкой и небом что-то напоминает... Если пользователи сильно не ругаются на дизайнера значит сойдёт :) Давайте лучше разберёмся с компоновкой элементов и функционалом в шапке.

    Поехали:

    1. Нет ссылки под логотипом на главную страницу. Ещё логотип смотрится несколько неаккуратно, из-за того, что при сохранении в gif, на границе появились белые пиксели.

    Да, и может стоит сделать дополнительную чёрную обводку вокруг текста (stroke), чтобы буквы чётче читались?

    2. Нет слогана под логотипом.

    3. Светлую полосу с датой и временем следует вообще убрать. Вы удивитесь, но пользователи всегда в курсе, какое сегодня число и который сейчас час. Хотя бы из-за стандартных часов в Windows в правом нижнем углу.

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

    4. Звёздочка (справа от времени), которая открывает по клику форму для входа. Убрать.

    Конечно хорошо, когда войти на форум можно с любой страницы, но тогда вот это страница для входа с развёрнутой верхней звёздочкой смотрится странно.

    Причём формы, выполняющие одну и ту же функцию, выглядят по-разному.

    Открывающаяся вообще выглядит отвратительно (сорри): не подписаны текстовые поля, зачем-то над формой стоит ссылка на вход, и ещё ссылка на письмо активации. Каша какая-то. Доведите до ума. И определитесь, как всё-таки выводить форму для входа: можно открывать как сейчас или отдельной страницей. И то и другое можно сделать с помощью ссылки «вход» в меню.

    5. Блок «Аватары/Авторский/Дизайн/»: предложения для художников можно отправить в пункт меню, а ссылки на аватарщиков оформить, как рекламный блок и не прятать под кат.

    6. Поиск тоже прятать не нужно. Можно вставить туда, где сейчас расположены часы. Кнопка на расширенный поиск непонятна и не выровнена по ветикали. Лучше поставьте текстовую ссылку на расширенный поиск справа от формы.

    7. Меню. Почему такое маленькое? Вроде места хватает, а кнопки-ссылки совсем небольшие. Добавьте пункты с учётом пожеланий выше и увеличьте раза в полтора-два. Можно попробовать отцентрировать, ато у меня на 22" мониторе уезжает влево и теряется среди обилия ссылок в шапке.

    Хорошо, что можно увеличивать шрифты и меню не разваливается.

    8. Одна кнопка. Если честно то, не определился. По идее, закладки нужны в топиках, да и наверное не в шапке скорее, а где-то ближе к футеру.

    Есть ещё несколько замечаний, но думаю вам и так уже есть над чем задуматься и над чем поработать.

    Не сильно я вас огорчил?

    Если будут ещё вопросы после доработок, стучитесь в аську, отвечу по возможности.

    PS. Понимаю, что функционал стандартный для phpbb-движка, но если уж настраивать под себя, то нужно что-то менять.

    Ответить

  4. Infato, 21.06.2009 в 23:31

    Очень интересная идея мжно организовать например 3 дизайна блога утренний, дневной и вечерний...чтобы менялись в зависимости от местного времени) будет время надо будет реализовать...

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

    Буду очень услышать ваше мнение по этому поводу)

    Ответить

  5. @ Алексей, 18.01.2010 в 16:30

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

    Захожу в opere — летний стиль, а в IE 8 — тож летний, но основной текст не 11px а около 10 — 9px.

    Ответить

    • rotor, 18.01.2010 в 20:19

      Нет. Скрипт отключен.

      Я после небольшого редизайна поленился переверстывать остальные версии, поэтому пока у меня «вечное лето» :)

      А за IE8 спасибо. Нужно будет потестить, жаль что у меня сейчас нет его под руками.

      Ответить

  6. @ Алексей, 03.03.2010 в 16:30

    Был красивый приятный блок с отличным Header-ом, но пришел

    D: «rotaban» CLASS: «adblock» and ID: «rbz_188742» и всё испортил,

    я понимаю, что реклама приносит хорошие деньги, но не в ущерб же блогу

    Ответить

  7. Обмен опытом. . . - Найди все что нужно, 21.03.2013 в 2:46

    [...] celestat on Мар.21, 2013, under Без рубрики rotorweb.ru/dizajn/smena- ...emenam-goda.html — довольно простой и интересный способ реализации [...]

    Ответить

Есть что сказать?