Украшение формы подписки

Здравствуйте дорогие читатели. Сегодня речь пойдёт о том как немного облагородить блок с формой подписки на обновления сайта. Помню когда я только начал осваивать wordpress и азы блоговедения, я искал и не мог найти достаточно простого решения, подходящего для новичков для того чтобы красиво оформить форму подписки.
Все способы, описанные в интернете, подразумевали установку «километрового» кода css, который к тому же нужно настраивать под себя, что для новичка не всегда приемлемо.

В общем решил вот написать статью о том, как оформить форму подписки без углублённых знаний css и html. Чтобы было минимум кода и по возможности было понятно начинающему веб-мастеру.

Собрав информацию из разных источников, я создал очень простое и в тоже время достаточно симпатичное оформление с помощью фоновой картинки. Можете сразу посмотреть пример в конце статьи. Данный приём оформления можно применять не только для формы подписки feedburner в сайдбаре но и вообще для любого блока на сайте. Нужно только подобрать подходящую, желательно полупрозрачную фоновую картинку.

...

И так, приступим. Нам понадобится картинка и несколько строчек кода. Пару картинок фона для формы e-mail подписки можете скачать здесь для пробы. Нужное изображение залейте себе на сервер. Я лично фоновую картинку залил в папку images своей темы, но вы можете выбрать любую другую, удобную именно вам папку. Следующее что нужно сделать, это прописать в самом конце файла стилей вот этот коротенький css код:

1
2
3
4
#fon {
background: url(http://makingonline.ru/wp-content/themes/makingonline_v2/images/podpiska_e_mail.png) center center no-repeat;
background-size: contain;
}

Чтобы попасть в редактор файла стилей wordpress, зайдите в админку блога, в меню слева выберите внешний вид → редактор → style.css. Не забудьте в коде заменить путь до картинки на свой! Путь это то, что находится в скобках и начинается с http://. Если вы этого не сделаете, то изображение будет транслироваться с моего сайта.

Строка background-size: contain; говорит о том что изображение масштабируется с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. Если сказать проще, размер картинки будет автоматически подстраиваться под размер блока.  Вместо contain можно попробовать поставить cover или auto

Далее, в виджете где распологается стандартный код подписки feedburner нам нужно заключить всё содержимое между тегами < div > < /div > и определить стиль этого тега через Идентификатор fon который мы указали в css. Не пугайтесь! Это всего две строчки кода в самом начале и в конце блока. В данном случае это будет выглядеть так:

1
2
3
<div id="fon"><br>
Здесь должен быть ваш код подписки или просто текст.
<br></div>

Теги < br > в данном коде растягивают блок по вертикали.  В случае необходимости их можно либо убрать, либо добавить ещё.


blog comments powered by Disqus

Добавить комментарий



Последние товары