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

Смена оформления сайта или фона сайта по времени суток

irbees2008 irbees2008 Опубликовано - 13 - марта Время, дата, календарь
3283 - 0
  • Адаптировал: 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);
}

Картинки night.jpg, morning.jpg, day.jpg, evening.jpg разместите в папке images, в вашей теме

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

Комментирование данной новости запрещено.

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Теги

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

Статистика

  • Caйт cущecтвуeт: 4631 день
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 619
  • Неопубликованных новостей: 8
  • Комментариев: 257
  • Зарегестрированных пользователей: 779
  • Онлайн всего: [3]
  • Гости: [2]
  • Поисковые роботы: [1] Google
  • Сегодня нас посетили: [8] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke, Google
  • SQL запросов: 37
  • Генерация страницы: 0.14сек
  • Потребление памяти: 4.152 Mb 
  •   Яндекс.Метрика