Як визначити стиль елемента на сайті і застосувати для нього свої настройки, inwebpress -

У цій статті я розповім про те, як швидко змінити стиль CSS для певного елемента на Вашому сайті.

Дуже часто така необхідність виникає у тих власників сайтів, які використовують готові шаблони на своєму сайті. Іноді треба змінити шрифт заголовка, його розмір, шрифт абзацу, або заголовок віджета і т.д. В принципі, змінити можна все що завгодно.

Для прикладу буду використовувати елементи на своєму сайті InwebPress.ru.

1 крок - Визначення стилю конкретного елемента

На моєму сайті мені не подобається розмір шрифту назв записів. Він великий і займає багато місця. Розмір потрібно зменшити.

Як визначити стиль елемента на сайті і застосувати для нього свої настройки, inwebpress -

У браузері внизу, в спеціальному фреймі відкриються Інструменти розробника - DevTools. Саме вікно буде розділено на дві частини: зліва - код HTML, праворуч - код CSS.

Наш заголовок в коді HTML зліва виділено кольором, а справа представлені всі стилі, які визначають характеристики зовнішнього вигляду елемента. Тут заданий колір заголовка, його шрифт, розмір, оформлення посилання за замовчуванням, при наведенні, відступи, насиченість шрифту, вид курсора і т.д.

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

DevTools браузера не тільки бачить всі стилі, але і показує в якому конкретному файлі цей стиль прописаний.

Отже, наше завдання знайти розмір шрифту.

Як бачимо, Назва записи має розмір 22 px.

Якщо ви сумніваєтеся в тому, чи той це стиль, то ви можете прямо в правій частині вікна змінити параметр стиль. Після зміни натисніть ENTER (або клікніть в ін. Місці) і подивіться на сайт.

Знайшли свій стиль? Ок! Тепер нам потрібно його застосувати для елемента, в моєму випадку це Назва записи.

2 крок - Застосування нашого стилю

Щоб це зробити існує кілька варіантів.

1) Виправлення файлу стилів - style.css

Наприклад, можна відкрити файл зі стилями, знайти наш стиль і внести зміни, потім зберегти і залити нову версію файлу на сайт. Але, після поновлення шаблону всі ці зміни доведеться вносити знову.

2) Виправлення файлу стилів в дочірньої темі

Щоб не змінювати основний файл стилів, розробники часто в архів з шаблоном додають папку з дочірньою темою. У цій папці є також файл зі стилями, в який можна вносити свої зміни без їх втрати після оновлення. Це хороший варіант.

3) Вставити код стилю CSS в адмінці

Отже, потрібний нам код виглядає так:

Де в адмінці потрібно вставити цей код?

а) Налаштування теми

Більшість сучасних шаблонів мають в настройках розділ - Custom CSS
У цьому розділі ми і вставляємо код стилю. якщо такого розділу немає, то Новомосковськ статтю далі.

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

Після того, як ви зберегли свої настройки - перейдіть на сайт і подивіться як виглядають ваші елементи.