Хаки и Скрипты Next Generation CMS : Время, дата, календарь, Интерфейс, CSS, html, TWIG : Смена оформления сайта или фона сайта по времени суток

irbees2008 Опубликовано - 13 - марта Время, дата, календарь

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css html

Продолжение темы смены оформления сайта,или фона сайта по времени.Ну сегодня я покажу как сменить фон в зависимости от времени суток. Я уже показывал вариант на твиге но он был большим, этот код поменьше и проще, и использует только дату на твиге. Ну шпаргалка по дате здесь, с её помощью можно еще кучу настроек с датой попробывать.

Итак приступим
Сперва добавляем блоку класс, вот так

Код:

class="time-{{ now|date("G") }}"

Теперь откроем файл style.css и добавим нужную нам шапку, например:

Код:

/* Ночь */
 .time-23 , .time-00 , .time-01, .time-02, .time-03, .time-04, .time-05
 {
 background:url (../images/night.jpg);
 }
 /* Утро */
.time-06 , .time-07 , .time-08, .time-09, .time-10, .time-11
 {
 background:url (../images/morning.jpg);
 }
 /* День */
 .time-12 , .time-13 , .time-14, .time-15, .time-16, .time-17, .time-18
 {
 background:url (../images/day.jpg);
 }
 /* Вечер */
.time-19 , .time-20 , .time-21, .time-22
 {
 background:url (../images/evening.jpg);
 }