Хаки и Скрипты Next Generation CMS

Меняем фон или шапку сайта по времени года

irbees2008 irbees2008 Опубликовано - 12 - марта Время, дата, календарь
1404 - 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.
Все пользуемся ,если что не понятно ,задаем вопросы.

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

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [6]
  • Гости: [5]
  • Админы: [1] irbees2008
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 30
  • Генерация страницы: 0.106сек
  • Потребление памяти: 4.931 Mb 
  •   яндекс.ћетрика