Как самостоятельно изменить цветовую схему шаблона сайта

change-color_mini1

По мере обретения начинающими веб мастерами опыта и увеличения объёма знаний – появляется естественное желание сделать свой сайт лучше. Это относится в основном к функциональным качествам, но не в последнюю очередь и к дизайну сайта. Хочется, чтобы цветовая гамма сайта не раздражала посетителя и не побуждала его быстрее покинуть сайт, а наоборот – вызывала у него положительные эмоции и это непременно скажется на  поведенческом факторе.  Бывает, что  шаблон нас в принципе устраивает, но его цветовая схема слишком  мрачная или наоборот яркая.

change-color_title1

Как  изменить цветовую схему шаблона?

Это можно сделать обратившись к специалистам  за небольшую плату, но зачем кому-то платить, когда всё можно сделать самостоятельно,  бесплатно и за короткий срок. Несмотря на то, что  решаться эта задача будет внесением изменений в таблицы стилей, а именно в файл Style.css,  специальных знаний языков программирования  не требуется.

В этой статье я расскажу как быстро внести изменения в файл Style.css, используя подсказки приложений популярных браузеров. Проделав эту процедуру один раз, вы сможете менять цвет шаблона сайта на свой вкус, хоть каждый день.

Изменения проводимые в файле Style.css заключаются в замене  HTML-кода цвета на свой. Вопрос лишь в том, как найти в огромном файле необходимую строчку для редактирования?

В этом нам помогут приложения браузеров Firefox и Chrome.

Прежде чем приступить к предстоящим изменениям, должен сказать о необходимости использования очень удобной программы “HTML colors 2000″, без которой не может обойтись ни один веб мастер. Скачать программу можно здесь.

Описание программы HTML colors 2000.

Программа очень проста, но в тоже время наделена полным набором функций, предназначена для определения HTML-кода цвета в любой точке экрана, не требует инсталляции и запускается кликом по иконке.

Читать также:  Красиво вставляем HTML- код в текст статьи.

htmlcolor

После запуска программы откроется окно, в котором расположена панель инструментов.

  • Кнопка Screen – после нажатия на неё, наводите курсор на любую точку  монитора, нажимаете ЛКМ и получаете HTML-код выбранного цвета. В некоторых графических редакторах этот инструмент называется “пипетка”.
  • Кнопка Copy –  копирует HTML-код выбранного цвета в буфер обмена.
  • Кнопка More>> –  открывает дополнительную палитру.
  • Ползунки слева –  добавляют или уменьшают насыщенность цвета.

Кроме того возникают ситуации, когда в нашем распоряжении есть HTML-код цвета, но мы не знаем визуально какой это цвет. Надо скопировать имеющийся код и вставить в окно “HTML Code” и в демонстрационном окне появится соответствующий цвет.

Приступаем к редактированию файла стилей.

Здесь надо сразу сказать, что для определения необходимой записи в файле Style.css используются расширения  для браузеров.

Для Chrome – встроенное расширение PageSpeed Insights (by Google).

Для Firefox – приложение Firebug с расширением PageSpeed. Как быстро установить приложение Firebug узнайте здесь.

Последним необходимым условием будет текстовый редактор Notepad++. В данном редакторе происходит подсветка кода и много полезных удобств, но главное – кнопка возврата действий на шаг назад в случае ошибки.

Редактирование в браузере Google Chrome.

Первым делом, надо скачать файл Style.css  из папки с активированной на вашем сайте темой. Папка с темой находится в каталоге wp-content->themes на хостинге. Скачать его можно FTP-клиентом FileZilla, или скопировать из админки сайта и вставить в новый документ Notepad++.

После того, как всё установили и скачали, откройте в браузере свой сайт (напоминаю – мы сейчас работаем в Chrome).

Наведите курсор на элемент, цвет которого желаете изменить, нажмите правую кнопку мышки и в открывшемся меню выберите “Просмотр кода элемента”.

Читать также:  Как восстановить удаленные фотографии

В нижней части экрана откроется окно приложения “Page Speed”.  Я покажу на примере шаблона моего сайта, который автором изготовлен в чёрно-серой цветовой схеме.htmlcolor1-300x90

Как видно из рисунка:  в левой части отмечен выбранный на сайте элемент, а в правой – вся запись в файле Style.css с HTML-кодом цвета выбранного элемента и номером строки записи стиля.

Переходим к открытому в Notepad++ файлу и находим соответствующую запись.htmlcolor2-300x109

Найдите указанную приложением Page Speed строку стилей выбранного элемента и измените код цвета в строке background-color.

Точно так необходимо поступить со всеми элементами шаблона вашего сайта, которые вы хотели бы изменить. Сохраняете файл Style.css и “заливаете”  обратно на сервер.

Иногда HTML-код цвета может состоять из трёх знаков, так бывает в случаях, когда вторая тройка кода состоит из тех же значений. Чаще всего таким образом отмечают белый и чёрный цвета, но бывают и другие.

Редактирование в браузере Firefox.

Как описано в предыдущем разделе, приготовьте для редактирования файл Style.css, затем в браузере Firefox откройте сайт.

В верхнем правом углу нажмите на ярлык программы Firebug в виде жука.

htmlcolor3

Можно и не нажимать на ярлык, а навести курсор на интересующий вас элемент шаблона сайта, нажать правую кнопку мышки и в открывшемся меню выбрать “Инспектировать объект с помощью Firebug”.

htmlcolor4-250x240

В нижней части экрана откроется окно приложения.htmlcolor5-300x90

В левой части выделен выбранный для исследования элемент, а в правой – указана строка записи стиля в файле Style.css.

Firefox, а вернее Firebug предоставляет возможность изменить цвет прямо в браузере. Для этого в окне приложения Firebug надо выделить HTML-код, кликнуть правой кнопкой мышки и в открывшемся меню выбрать “Редактировать background color“. Цвет выбранной части шаблона сразу изменится. Таким образом вы можете поэкспериментировать с другим цветом. За сайт не волнуйтесь, цвет поменяется только в вашем браузере.

Читать также:  Создание сайта на WordPress.

Чтобы изменения цветовой схемы шаблона сайта вступили в силу, исправьте HTML-код цвета на свой, сохраните файл и загрузите на сервер. Затем обновите окно с сайтом в браузере и оцените свой выбор.

Этим способом можно изменить цвет и форму отображения любого элемента шаблона сайта,

А именно:

  • Шрифт: font- size  — размер, font-color –  цвет и font-family – семейство используемого на сайте шрифта;
  • Рамки элементов – border;
  • Изображения и иконки – img;
  • Внешние и внутренние отступы – margin,padding;
  • Свойства фона – background; и т.д.

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

Желаю вам всего хорошего, спасибо за социальную кнопку.

Закладка постоянная ссылка.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *