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

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

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

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

Код:

<div id="header" class="month-{{ now|date('m') }}"></div>

В исходном коде это выглядит так

Код:

<div id="header" class="month-03"></ div>

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

Код:

/* Весна */
 .month-03, .month-04, .month-05
 {
 background:url(../img/vesna.jpg );
 }
 /* Лето*/
 .month-06, .month-07, .month-08
 {
 background:url(../img/leto.jpg) ;
 }
 /* Осень*/
 .month-09, .month-10, .month-11
 {
 background:url (../img/osen.jpg) ;
 }
 /* Зима */
 .month-12, .month-01, .month-02
 {
 background:url (../img/zima.jpg) ;
 }

Сохраняем , и заливаем в папку img, картинки vesna.jpg, leto.jpg, osen.jpg и zima.jpg.
Все пользуемся ,если что не понятно ,задаем вопросы.

Можешь почитать и вот эту статейку "Стильные,аннимированные чекбоксы на CSS3"

Это тоже интересно

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