Css wordpress
Привіт Новомосковсктелі. Нещодавно мене попросили пояснити як його власні налаштування на WordPress. І я вирішив описати ключові навички. Що таке таблиця стилів я пояснювати не буду напевно все знаєте. Якщо не знаєте то вам для початку потрібно відвідати «Яшу» або «Гошу».
Будь-який сучасний сайт не може працювати без цієї таблиці. Якщо може то він прийме убогий вигляд. Як наприклад перші сайти які писалися на .html.
Для WordPress повно готових шаблонів сотні варіантів. Вибирай і роби тільки. Однак у всіх веб майстрів існує проблема його змінити. Робити доопрацювання видаляти непотрібні поля, зменшити шрифт, відстань між рядків, відступи і тд. Всі ці численні операції можна зробити редагуючи один лише файл. Ну на різних шаблонах їх може бути більше.
І так приступимо.
Знаходимо файл стилів.
Файл стилів ви можете зайти двома способами або безпосередньо через сервер, або через консоль. Я зазвичай користуюся консолі, зручно і швидко.
Тут ви побачите список всіх фалів сайту. Потрібно вибрати самому внизу потрібний файл для настройки і редагування style.css WordPress
На другому малюнку показано сама таблиця стилів в форматі .css зазвичай прийнято називати цей файл style.css
І так ми визначилися з файлом. І ми будемо редагувати його. Перед тим як почнете редагувати щось, змінювати раджу скопіювати цей файл в оригіналі на свій комп'ютер.
Налаштування, редагування css
Для настройки таблицю стилів застосовують спеціальні програми щоб полегшити своє життя. Але в моєму випадку все простіше і нічого не потрібно.
Я юзаю Google Chrome. Мабуть на мене найкращий браузер. І я при редагуванні таблицю стилів користуюся саме з ним. Але можна користуватися і з Opera.
При цьому елемент виділяється і знизу з'являється його код. А з права з'являється то що нам потрібно. Значення з таблиці стилів які відносяться до виділеного елементу.
Тут ми бачимо все елементи виділені пункти. Сіре виділення це відступи. З значень видно що padding становить 15px з верху і 14px з боку.
Якщо нам потрібно змінити це значення ми можемо їх змінити прямо на місці. і подивитися як буде виглядає вже зараз. Якщо ви підібрали потрібний розмір зараз вам потрібно це значення знайти і змінити на самому таблиці стилів.
Як ми це робимо? НА малюнку я підкреслив червоними лініями. nav> li> a це саме той елемент в якому знаходитися padding. 15px 14px; Нам потрібно цю рядок знайти в таблиці стилів. Вам навіть є підказка style.css: 520 це значить вона знаходитися в файлі style.css і рядок номер 520.
Ви можете відрахувати ці рядки або просто зробити пошук на сторінці натиснувши на клавішу Ctrl + F і ввести .nav> li> a
Наведу ще приклад:
Будемо міняти колір.
Натискаємо правою кнопкою миші в потрібну нам область і дивимося код.
Ми бачимо що цей одяг пофарбований в синій колір. background. # 3b8dbd; Ми для тесту прямо на місці можемо змінити колір. Після чого як підібрали потрібний колір шукаємо .s1 .sidebar-toggle в таблиці стилів і знаходимо.
Тут видно background. # 3b8dbd; це і є наш колір в вигляді коду. нам потрібно буде просто змінити його на наш колір і зберегти зміни.
На цьому поки все. Тепер ви можете змінювати будь-які елементи. Якщо у вас виникне складності я можу продемонструвати і редагування інших областей. Дивіться продовження статті.