5 Редагувань в css, які допоможуть новачкові поліпшити зовнішній вигляд свого блогу
У цьому практичному керівництві ми вивчимо швидке налаштування CSS для зміни зовнішнього вигляду власних тем оформлення WordPress. Пост стане в нагоді навіть тим, у кого немає навичок в правці таблиці стилів, і хто при цьому хоче отримати відмінний дизайн для свого веб-ресурсу.
Перед початком робіт знадобиться.
- тема з опціями для настройки CSS або плагін для настройки таблиці стилів
- доступ до редагування таблиці стилів style.css
- дочірня тема
Якщо ви самі не знаєте, що це таке інше і як його знайти, в цьому пості ми детально розберемо, як знайти і налаштувати всі необхідні нам компоненти для подальшої кастомізації. Якщо ваш сайт вже запущений і працює, непогано було б перевести його в режим тимчасових технічних робіт і поставити заглушку для користувачів до тих пір, поки ми все з вами не налаштуємо як треба.
Альтернативним рішенням може стати запуск віртуальної копії сайту на локальному сервері з подальшими роботами і правками на цій машині, а вже після настройки готову копію ви можете завантажити на свій основний сервер. Який з варіантів краще вибрати - вирішувати вам.
Виправлення стилів всередині налаштувань теми
У деяких тем є спільні опції для CSS, які можна активувати в режимі адміністрування сайту через панель адміністратора. Для цього треба перейти в підміню Зовнішній вигляд → Налаштувати.
Іноді такі настройки внесені окремим пунктом меню, а іноді - як заголовок "Edit CSS" в спеціальному розділі.
Плагін для налаштування CSS
Плагін зберігає різні версії правок, дозволяє "відкотитися" до попередньої версії і зберігати будь-які зроблені зміни.
Після установки і активації плагіна редагувати зовнішній вигляд можна в розділі Зовнішній вигляд → Edit CSS.
Створюємо дочірню тему
Якщо ви плануєте масштабні зміни в зовнішньому вигляді свого блогу, найкращим варіантом буде створення дочірньої теми. Так будь-які кастомізації можуть бути зроблені безболісно, і при цьому не доведеться руйнувати весь блог заради невеликої зміни в дизайні.
Також за допомогою дочірньої теми легше і зручніше відстежувати будь-які правки і коректність роботи створеного нового дизайну.
Можна також створити папку для дочірньої теми і назвати її ім'ям основної теми з приставкою дочірньої теми, помістити туди файл style.css і імпортувати код основної таблиці стилів:
Для робіт з нової дочірньої темою почитайте практичне керівництво. Після налаштування всіх параметрів перейдемо до виправлення коду.
1. Міняємо колір фону
Для зміни фонового зображення на вашому сайті спочатку вивчіть загальний стиль і параметри фону. Чи застосовується тут суцільний фоновий колір або картинка, вбудована в фрейм?
Не всі теми налаштовуються інтуїтивно, так що перед початком редагування обраної теми ретельно вивчіть структуру пов'язаних файлів і стилів у вашій темі.
Для тим без оформлення в повну ширину в тіло сторінок вбудовується простий колір фону:
Для визначення потрібного кольору використовуйте інструмент під назвою W3Schools HTML color picker або встановіть розширення для Chrome або Firefox.
Для свого прикладу я вибрав колір фону # 477C67:
Якщо цей сниппет не змінює фоновий колір, то швидше за все у вас використовується набір порожніх контейнерів для заповнення фону.
У результаті повинно вийти ось що:
Картинка залишається статичною навіть при прокручуванні.
2. Покращуємо Новомосковскемость тексту
Іноді вам попадається відмінна тема, але з нею є невелика проблема. Шрифт у неї занадто маленький. Але ми зараз це виправимо.
Використовуйте цей код в вашому файлі style.css і проблеми зі шрифтом вирішаться.
Відповідний розмір шрифту для вашого блогу - 14-16 пікселів. Уникайте 12 пікселів для шрифту. Великий шрифт зробить ваш контент більш Новомосковскемим і професійним. Поправити в коді треба ось що:
В результаті отримуємо такий код:
3. Міняємо зовнішній вигляд посилань
Зміна кольору посилань - наступний крок, і налаштувати це можна за допомогою наступних параметрів:
Беремо наприклад колір # BA2323 і ось що отримуємо:
Ось ще кілька опцій для стилістичного оформлення посилань. Наприклад, можна вибрати колірну підсвічування посилань при наведенні курсору. Зазвичай використовується підкреслення, але можливі і варіанти з колірною підсвічуванням:
4. Міняємо зовнішній вигляд заголовків
Тема типово ставиться h1. а підзаголовки - h2. Якщо вам треба поставити свій колір і параметр для заголовка, можна внести кілька правок для конкретного поста. Для цієї настройки треба вказати додатково параметр, і ось як.
Знаходимо стиль, що відповідає нашому заголовку "some-style". Редагувати треба наступну частину коду:
Міняємо на блакитний # 5CBDBD:
Для редагування стилів треба правити параметр замість some-style на h1<> або h2<> або h3<> .
5. Змінюємо колірну схему віджетів
Один з найпростіших способів редагувати віджет - додаток квітами. Правити треба секцію, що починається з widget-title. Тут можна встановити колір для віджета в дочірньої темі:
висновок
На перший погляд може здатися, що для редагування сайтів доведеться вивчити код CSS. Але цей пост показує, що досить використовувати базову функціональність - і можна домогтися дуже багато чого.
Джерело: code.tutsplus.com
