Как определить стиль элемента на сайте и применить для него свои настройки?

В этой статье я расскажу о том, как быстро изменить стиль CSS для определенного элемента на Вашем сайте.

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

Что делать?

Для примера буду использовать элементы на своем сайте InwebPress.ru.

1 шаг — Определение стиля конкретного элемента

На моем сайте мне не нравится размер шрифта названий записей. Он большой и занимает много места. Размер нужно уменьшить.

Определяем его стиль. Для этого правой кнопкой мыши я кликаю по названию записи и в контекстном меню выбираю пункт «Просмотреть код». Это в браузере Google Chrome. А в браузере Mozilla Firefox это «Исследовать элемент».

В браузере внизу, в специальном фрейме откроются Инструменты разработчика — DevTools. Само окно будет разделено на две части: слева — код HTML, справа — код CSS.

Наш заголовок в коде HTML слева выделен цветом, а справа представлены все стили, которые определяют характеристики внешнего вида элемента. Здесь задан цвет заголовка, его шрифт, размер, оформление ссылки по умолчанию, при наведении, отступы, насыщенность шрифта, вид курсора и т.д.

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

DevTools браузера не только видит все стили, но и показывает в каком конкретном файле этот стиль прописан.

Итак, наша задача найти размер шрифта.

Вот он:

Как видим, Название записи имеет размер 22 px.

Если вы сомневаетесь в том, тот ли это стиль, то вы можете прямо в правой части окна изменить параметр стиль. После изменения нажмите ENTER (или кликните в др. месте) и посмотрите на сайт.

Читайте: Как обновить премиум плагины, которые идут в комплекте с темой WordPress?

Нашли свой стиль? Ок! Теперь нам нужно его применить для элемента, в моем случае это Название записи.

2 шаг — Применение нашего стиля

Чтобы это сделать существует несколько вариантов.

1) Правка файла стилей — style.css

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

2) Правка файла стилей в дочерней теме

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

3) Вставить код стиля CSS в админке

Это вариант мне очень нравится. Вам не надо открывать редактор файлов в админке, или пользоваться FTP, а потом еще искать нужный стиль среди сотни, а то и тысячи строк кода.

Итак, нужный нам код выглядит так:

.content-box h2 a {
    font-size: 22px;
}

А нужно вставить так:

.content-box h2 a {
    font-size: 18px;
}

Где в админке нужно вставить этот код?

а) Настройки темы

Большинство современных шаблонов имеют в настройках раздел — Custom CSS
В этом разделе мы и вставляем код стиля. если такого раздела нет, то читаем статью дальше.

б) Через плагин

Я рекомендую использовать плагин WP Add Custom CSS. Он без настроек и всего с одним полем для вставки стилей CSS.
В это поле можно вставлять все наши стили для шаблона и для плагинов. Очень удобно и всегда под рукой.

После того, как вы сохранили свои настройки — перейдите на сайт и посмотрите как выглядят ваши элементы.

Мой результат: