Приветствую Вас друзья, знакомые и просто интересующиеся! Наверное многие, кто установил шаблон F2, пробовал изменить цвет шрифтов в сайдбарах, но при этом, одновременно менялся цвет шрифтов и в заголовках статей и посттекстовой информации. Заголовки виджетов не очень красиво прилипают к содержимому (тексту или картинкам). А ещё, многие блоггеры интересуются в комментариях и через контактную форму, как можно сделать градиентный фон в сайдбарах, а так же, сделать градиентный фон под заголовками виджетов. Обо всём этом поговорим прямо сейчас в данной статье.

Как сделать градиентный фон в сайдбарах

Прежде всего, необходимо создать градиент, в нашем случае, это полоска шириной равной ширине вашего сайдбара и с любой высотой от 1px и до бесконечности. Понятно что, чем меньше будет высота градиентной полоски, тем меньше будет её вес, а значит и открываемость сайта будет быстрей.

Градиент можно создать как в Фотошоп, так и в онлайн-сервисах. Перейти в один из таких сервисов можно, перейдя вот по этой ссылке: Gradient Maker. Если у вас не встроен или не установлен переводчик страниц в браузере, то вероятней всего вы увидите англо-язычную версию онлайн-сервиса.

 

В моём браузере SRWare Iron переводчик встроен, поэтому примеры создания градиента будут показаны на русском языке. При выборе типа градиента выбираем Вертикальный градиент.

 

Установите желаемые ширину и высоту будущего градиента (стрелки 1 и 2). Выберите желаемый цвет тёмной части градиента (стрелка 3).

 

Кликните левой клавишей мыши (стрелка 1) в строке: Левый цвет (курсор должен мигать), и более тонко подберите желаемый тон тёмной части градиента (стрелка 2).

 

Те же действия выполните по отношению к Правому цвету (стрелки 1 и 2). Укажите расширение будущей картинки JPEG или PNG (стрелка 3) и нажмите на кнопку: Получить полный размер(стрелка 4).

 

В открывшемся окне кликните правой клавишей мыши по готовому градиенту (стрелка 1) и в выпавшем контекстном меню выберите: Сохранить картинку как… В разных браузерах эта строчка может выглядеть по разному, но суть от этого не меняется, нам нужно скачать получившееся изображение (градиент) в папку компьютера.

 

В открывшемся окне загрузчика выберите диск, папку в которую нужно сохранить файл или создайте новую, в моём случае это диск D, папка ФОНЫ. Придумайте и впишите имя файла (стрелка 1) после чего нажмите кнопку: Сохранить (стрелка 2).

 

После сохранения файла откройте его в любом редакторе, в котором есть возможность сделать зеркалное отображение картинки. В моём случае это просмотрщик изображений FastStone Image Viewer, в котором есть подобный редактор, я воспользовался инструментом: Переворот Горизонтальный, в других редакторах возможно название этой операции будет называться: Отразить по горизонтали.

 

При сохранении нового файла присвойте ему другое имя и сохраните в той же папке, где находится файл оригинал. Не забудьте нажать кнопку: Сохранить. В итоге мы получили две разные картинки, одну для левого, другую для правого сайдбаров (снимок ниже).

 

Далее, эти картинки нужно загрузить в папку изображений нашей темы. Откройте FTP-клиент FileZilla или любой другой клиент, работающий с файлами. Откройте в левом окне папку: images в теме F2 (стрелка 1). В левой половине окна клиента найдите созданные файлы и поочерёдно или сразу оба, выделите их, кликните по ним правой клавишей мыши и в выпавшем контекстном меню выберите: Закачать на сервер (стрелка 2).

 

Если изначально ваши картинки имеют окончательное название и расширение, то следующий шаг вам не нужен. А так как у меня несколько сайтов и при сохранении файлов в папке компьютера приходится присваивать файлам совсем не те имена, которыми будет назван файл в редакторе блога, да ещё и расширение файла у меня JPEG, потому что такой файл легче чем с расширением PNG. то мне приходится переименовывать файлы и расширения прямо в FTP-клиенте.

В правом нижнем окошке клиента выделите файл, кликните по нему правой клавишей мыши (стрелка 1) и в выпадающем контекстном меню выберите: Переименовать (стрелка 2).

 

Если у вас один сайдбар, можете присвоить файлу имя: sidebarfon.png – имя очень понятно и в будущем не придётся вспоминать и разбираться что за изображение и для чего было установлено. Если два сайдбара, можно указать левый, правый или 1-2, например: fonsideleft.png (левый), fonsideright.png (правый), fonsidebar1.png и fonsidebar2.png

 

Затем, зайдите в админ-панель, откройте: Внешний вид/ Редактор/ Таблица стилей. Найдите: #sidebar_left  и впишите: background:url(“images/leftsidebarfon.png”) repeat-y; (стрелка 1).

background – фон

url(“images/…….”) – адрес расположения картинки

repeat-y;   -  повторение картинки по вертикали

Так как в этой теме повторение картинки осуществляется лишь до конца последнего установленного виджета, то впишите в стили высоту фона: height:70em; (стрелка 2).

Значение удобнее будет указать в em , в пикселах значение будет выглядеть громоздким. Это как метры и сантиметры – 70em = 700px. Изменяя числовое значение добейтесь полного закрывания сайдбаров фоном, хотя бы на главной странице. Аналогичные действия выполните по отношению к правому сайдбару. Числовые значения можно ставить любые, и 732em и 1238em, т.е. такие, какие будут необходимы.

Чтобы слишком не загружать вас , на этом, пожалуй, и остановимся пока. Информацию о том, как управлять шрифтами в сайдбарах, а так же, создать фон под заголовками виджетов, я расскажу в следующей статье.

 

Удачи Вам!

 

© Михаил Ковеньков