CSS WordPress. Настройка, редактирование css

CSS WordPress. Настройка, редактирование css

Здравствуйте читатели. Недавно меня попросили объяснить как настроить таблицу стилей на WordPress. И я решил описать ключевые навыки. Что такое таблица стилей я объяснять не буду наверно все знаете. Если не знаете то вам для начало нужно посетить “Яшу” или “Гошу”.

Любой современный сайт не может работать без этой таблицы. Если может то он примет убогий вид. Как например первые сайты которые писались на .html.

Для WordPress полно готовых шаблонов сотни вариантов. Выбирай и делай только. Однако у всех веб мастеров существует проблема его изменить. Делать доработки удалять ненужные поля, уменьшить шрифт, расстояние между строк, отступы и тд. Все эти многочисленные операции можно сделать редактируя один лишь файл. Ну на разных шаблонах их может быть больше.

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

Находим файл стилей.

Файл стилей вы можете зайти двумя способами либо напрямую через сервер, либо через консоль. Я обычно пользуюсь консоли, удобно и быстро.

Внешний видредактор

Здесь вы увидите список всех фалов сайта. Нужно выбрать самом внизу нужный файл для настройки и редактирования style.css WordPress

wordpress_csscss_001

На втором рисунке показано сама таблица стилей в формате .css обычно принято называть этот файл style.css

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

Настройка, редактирование css

Для настройки таблицу стилей применяют специальные программы чтобы облегчить свою жизнь. Но в моем случае все проще и нечего не нужно.

Я юзаю Google Chrome. Пожалуй по мне самый лучший браузер. И я при редактировании таблицу стилей пользуюсь именно с ним. Но можно пользоваться и с Opera.

Для чего я все это говорю? НАс интересует функция правой кнопкой мыши по сайту. Точнее в нужную нам область. Щелкая правой кнопкой выходит функция “Просмотр кода элемента”

0001

При этом элемент выделяется и снизу появляется его код. А с права появляется то что нам нужно. Значения из таблицы стилей которые относятся к выделенному элементу.0002

 

Здесь мы видим все элементы выделенного элемента. Серое выделение это отступы. Из значений видно что padding составляет 15px с верху и 14px с боку.

0003

 

Если нам нужно изменить это значение мы можем их изменить прямо на месте. и посмотреть как будет выглядит уже сейчас. Если вы подобрали нужный размер сейчас вам нужно это значение найти и изменить на самом таблице стилей.

Как мы это делаем? НА рисунке я подчеркнул красными линиями. .nav > li > a -это именно тот элемент в котором находиться padding: 15px 14px; Нам нужно эту строку найти в таблице стилей. Вам даже есть подсказка style.css:520 это значит она находиться в файле style.css и строка номер 520.

Вы можете отсчитать эти строки либо просто сделать поиск на странице нажав на клавишу Ctrl+F и ввести  .nav > li > a

0004_css

 

 

Приведу еще пример:

Будем менять цвет.

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

0005_CSS

Мы видим что этот одел покрашен в синий цвет. background: #3b8dbd; Мы для теста прямо на месте можем изменить цвет. После чего как подобрали нужный цвет ищем .s1 .sidebar-toggle в таблице стилей и находим.
0006_CSS

 

Здесь видно background: #3b8dbd; это и есть наш цвет в ввиде кода. нам нужно будет просто изменить его на наш цвет и сохранить изменения.

На этом пока все. Теперь вы можете изменять любые элементы. Если у вас возникнет сложности я могу продемонстрировать и редактирование других областей. Смотрите продолжение статьи.

Поделиться:

Просмотров: 3 158