2661
- 0
- Адаптировал: 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.
Все пользуемся ,если что не понятно ,задаем вопросы.
Можешь почитать и вот эту статейку "Будем фиксировать менюшку "
Это тоже интересно
08.05.16Выводим блок по времени на TWIG
03.08.17Дата на русском часть вторая
