Меняем фон нашего сайта

Очень просто. Если вы не владеете программой Photoshop, а таких — большинство, изменить фон нашего сайта кажется очень сложной задачей. Моя статья как раз для тех, кто хочет поменять фон, но не знает как, и никогда это не делал. С чего начинать? Как сделать красивый рисунок, например, вот такой:

Возможно, он и не самый красивый, но я его сделал буквально за 5 минут с помощью онлайн-ресурса по адресу —  gpatterns.com.

Там вы найдете много вариантов рисунков для вашего бэкграунда. Но! Прежде чем менять фон на своем сайте и делать новый, советую сделать последовательные шаги. А именно:

1. Сначала откройте папку вашего шаблона и найдите картинку, которая сейчас является вашим фоном. Чаще всего, это изображение в формате JPG, но может быть PNG или GIF. Размер ее — прямоугольный, от небольшого, 40 на 40 пикселей, до достаточно крупного, как картинка выше, 127 на 127 пикселей. Чаще всего, этот файл лежит в подпапке /image вашего шаблона. Сегодня я выложил шаблон Svartura, и у него есть свой бэкграунд, называется файл body-bg.jpg. Можно перевести как «тело-бэкграунд». Ваш фон наверняка называется похожим именем. А вот фон из шаблона Svartura:

Если вы перейдете в статью, описывающую шаблон Svartura и нажмете на слове — Демонстрация, вы увидите, как выглядит фон в этом шаблоне.

2. Итак, мы нашли наш фон. Теперь нам надо определить, каким образом он добавляется в нашем шаблоне. Есть два основных способа, которыми прописывается наш файл фона: через свойства стилей в файле style.css, или прямой ссылкой в файле header.php. Наиболее часто авторы используют первый вариант. Поэтому, открываем файл style.css и ищем свойство, описывающее наш файл фона. В каком месте обычно написано? Часто. в самом начале файла. И действительно, на 17 строке файла видим вот такой код:

[cc]
body{
font-family:»Segoe UI»,Calibri,»Myriad Pro»,Myriad,»Trebuchet MS»,Helvetica,Arial,sans-serif;
font-size:13px;color: #3e3e3e;
background: #000 url(images/body-bg.jpg) repeat ;
}
[/cc]
Вот наше свойство, определяющее вывод картинки фона:
[cc]
background: #000 url(images/body-bg.jpg) repeat ;
[/cc]
Давайте быстренько его разберем:
Background — фон по-русски.
#000 цвет основы (подложки), означает «черный».
url — ссылка на наш файл фона, путь и имя файла.
repeat — свойство фона, означает «повтор», если нет через дефис буквы x или y, значит, условие повтора — замостить этой картинкой всю страницу, слева направо и сверху вниз. Изучать здесь свойства стилей не будем. Просто коротко поясняю условия вывода в нашем шаблоне — примере. Например: если бы было написано — repeat-x — значит, картинка была бы размножена в один ряд справа налево. Без буквы — значит, картинка замостила всю страницу.

3. Теперь, зная, какая у нас есть картинка фона, зная, где она описана и какие у нее свойства (формат файла, размер), мы можем перейти на сайт  gpatterns.com и создать свой фон. Совет: пройдите регистрацию. Моментально на почту получите ссылку для активации своей учетной записи. Вы получите доступ к созданию своего фона.

На главной странице gpatterns.com вы видите варианты, созданные посетителями, самые популярные по скачиванию и голосованию:

Это внизу. А вверху — можете сразу приступать к созданию своего фона :)

Как? Рассказываю по шагам.

1. Переходим на вкладку Color. Выбираем режим Background Color Change. В соседнем окне (справа) можем выбрать цветовую зону, или вверху — назначить цвет с помощью числового 6-значного кода:

2. Затем переходим на вкладку Canvas и выбираем подложку (градиент) для нашей картинки.

3. Затем переходим на вкладку Image и выбираем понравившуюся нам картинку для нашего сайта. Их — чуть меньше 100 штук :)

4. На вкладке Rotate мы можем выбрать разворот нашей картинке по оси.

5. Все. Теперь справа ищем — Download image — и сохраняем наш фон в компьютере.

А теперь переходим к замене нашего фона в шаблоне. Созданный файл переносим в папку шаблона /image и сохраняем под тем именем, под которым был наш первый фон (предварительно, старый фон можно переименовать, зачем его удалять?).

Ничего нигде больше менять не надо. В файле стилей наш фон имел ссылку, под которой мы сохранили новый файл. Так что, произойдет автоматическая замена старого фона на новый. Активируем шаблон и смотрим, что получилось:

Вам нравится новый фон? Мне — не очень, если честно :)

Но. Я вам показал способ, как можно быстро и без особых хлопот сменить фон вашей темы. А вам самим решать, пробовать, экспериментировать…

Удачи!

Если вам понравилась моя статья, и вы считаете, что такие статьи вам нужны, голосуйте ниже. Спасибо.

[ratings]

Информационный партнер:  www.intime.ua — служба доставки. Быстрая и удобная доставка грузов во все доступные и недоступные точки Украины. «Интайм» — это профессиональные отношения с каждым клиентом.

Мой блог находят по следующим фразам

Похожие записи:

Комментарий через Facebook


Комментарий через В Контакте


11 коммент. на сайте.

Вы можете поучаствовать в обсуждении.

  1. Замечательно, надо попробовать !

  2. Нужно переходить по: http://bgpatterns.com/
    Ваша информация мне была интересна.

  3. Здравствуйте! Получил вашу ссылочку от очень мне дорогого человека. помогает мне чайнику как может. спасибо ей и вам огромное. Но то что вы пишите как это сделать по шагам…. думаю что я не справлюсь.
    хотя очень нужно изменить свой фон на моём сайте — направление сайта обязывает.
    чувствуется что вы профессионал в своём деле. спасибо за помощь новичкам.

  4. Владислав:

    Странно,но плагин wp-notcaptcha не ставится.Настроек вроде ни каких,код ID); ?> в config.php присутствует.

    • admin:

      Есть вариант, почему не встал. Возможно. что в вашем шаблоне нет одной функции в файле comments.php —
      [cc]
      < ?php do_action('comment_form', $post->ID); ? >
      [/cc]
      Должна стоять рядом с выводом textarea

      • Владислав:

        В том то и дело , что есть.И не ставится, что интересно на рабочем блоге и на локальном. Коды есть на обоих. Вот загадка!!

        • admin:

          Тогда, возможно, что-то мешает, плагин, например. У меня это сплошь и рядом. Все никак не могу найти плагин контактной формы для сайта. Теперь решил сам шаблон поменять, в нем уже есть встроенная контактная форма :)

  5. Владислав:

    Добрый день. Вообще мне вот эти обучающие статьи нравятся.У каждого наверное есть какие-нибудь проблемы по дизайну своего блога.У меня не получается вместо ссылки на скачивание поставить кнопку.А нельзя ли получить следующий урок по этой теме? P.S Отличная капча внизу.

    • admin:

      Спасибо, Влад, за комментарий, и за предложенную тему — рассказать как вместо ссылки поставить картинку. Сделаю, буквально завтра. А что касается каптчи — это новый плагин, посоветовали, называется wp-notcaptcha, говорят, абсолютно непроходимый для ботов :) Посмотрю, как дальше будет.

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


Перед отправкой формы:
Извините. проверка на спам.

Голосование

Как вам мой сайт

Просмотреть результаты

Loading ... Loading ...

Статистика загрузок файлов

Реклама:

Пресс-релизы. Перечень услуг.
zayavka24.ru
Прайс-лист. Статьи по стоматологии.
moyzubnoy.ru
replicashop.com.ua

Стиль шаблонов:

и еще 40 разделов для других разных стилей шаблонов Wordpress

Как со мной связаться:

Email: skininforu@gmail.com
Skype: chillpepper1959
ICQ: 361-406-311
Написать мне письмо
Все новости на почтовый ящик