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

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

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

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

Что делать?

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

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

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

editcss_elementsite

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

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

editcss_elementsite1

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

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

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

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

Вот он:

editcss_elementsite2

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

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

editcss_elementsite3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

editcss_elementsite4

Надеюсь вы осилили написанное и сможете теперь с легкостью применять на сайте свои стили CSS.

Рейтинг 0/5 (0 голосов)
 

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

avatar