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

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

2012-10-29 / Вр:20:11 / просмотров: 8471

Вот этот эффект для сайта действительно нужная вещь, особенно для тех веб-мастеров, которые любят менять шапки сайта по временам года в ручном режиме. При установки этого готового кода, шапка сайта будет меняется автоматически, зимой, весной, летом, осенью. Веб-мастеру только нужно один раз установить готовый код и четыре рисунка шапки и все, это весь процесс :).
Объясняю принцип работы этого эффекта:
к шапке блога или сайта нужно прописать класс «month-» (в переводе с анг. month означает месяц),
функция date() выводит нынешний месяц, вот что получается: month-01 или month-12 ,
в файле CSS к каждому сезону указываем шапку сайта или фоновую картинку.

Итак, приступим.

Пример я буду показывать для сайтов CMS WordPress, для сайтов созданных на php можно проделать то же самое в своих файлах.
В Wordpress откройте файл header.php
(Внешний вид > Редактор > header.php) и ищем место где выводится шапка вашего сайта или блога, например:

<div id="header"></div>

или

<div id="head"></div>

Далее, добавляем к этому блоку класс «month-»:

class="month-<?php echo date('m'); ?>"

Это будет выглядит вот так:

<div id="header"class="month-<?php echo date('m'); ?>"</div>

или вот так

<div id="head" class="month-<?php echo date('m'); ?>"</div>

все зависит как вы назвали блок, header или head, возможно вы назвали этот блок по другому.

Сохраните файл.

В файле 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.

Вот и все. Теперь ваша шапка сайта или фон будет меняться от времени года ;). Если вам понравился эффект для сайта и вы хотите быть проинформированы о новых эффектах на блоге, подписывайтесь на RSS-ленту новостей блога и вы будете в центре всех новостей.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274711
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222615
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187976
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569

4 Ответов на комментарий - Меняется шапка сайта от времени года

олег

20.09.2014 в 17:19

А у меня в хедере вот так
```
‘top_menu’ )); ?>
</header
```
Степан => автор блога

21.09.2014 в 15:35

И что, больше никакого кода?

олег

22.09.2014 в 10:47

не всё вставилось.

 <html>
***********
     <header>
	    <nav>
		<?php wp_nav_menu( array( 'theme_location' => 'top_menu' )); ?>
	    </nav>
     </header>
************

Степан => автор блога

22.09.2014 в 21:42

Олег, в Вашем случае это будет так:

<header class="month-<?php echo date('m'); ?>"

В CSS

header 
{
position: relative;
display: block;
width: 1000px;
height: 270px;
margin: 0 auto;
}

/* Весна */
 .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.
Будете пробовать с кодом, обязательно сделайте резервную копию файлов.