Редагування шаблону Bootstrap: Колір навбара і блоків
У минулій статті ми з вами дізналися, як міняти шапки і тексти в них. У цій я розповім, як змінити навбар - верхню навігаційну смужку, в якій знаходиться горизонтальне меню.
Про настройку самого меню я розповім пізніше, тут же покажу найскладніше - як змінити дизайн навбара, - і розкрию всі нюанси настройки зовнішнього вигляду навбара під загальний стиль сайту.
Налаштовуємо зовнішній вигляд навбара
Для початку йдемо в панелі сайту на хостингу в «style.css». За скрін вище, я думаю, зрозуміло, де можна змінити відображення окремих елементів навбара, а саме: заголовка-назви сайту (шрифт, відступи, колір шрифту), виділення пунктів верхнього меню при наведенні курсору (колір фону), посилань-пунктів верхнього меню (відступи, закруглення кутів, колір).
Шукаємо і копіюємо з «bootstrap.min.css» код кольору навбара. На скрині вище показано, які коди виводять основний колір навбара і створюють його градієнт. Вставляємо скопійований код в «style.css» в самому низу.
Також шукаємо і копіюємо з «bootstrap.min.css» код кольору неактивних кнопок верхнього меню, заодно копіюємо і вставляємо в «style.css» код виділення бічного меню. На скронях вище показано, які коди шукати і які цифри змінювати.
Краса! З колишнього простого чорного навбар придбав витончену об'ємну забарвлення. Те що потрібно!
Але поки його псує чорна вертикальна смужка, яка відокремлює меню від виклику профілю користувача. Змінимо і цю смужку теж.
Шукаємо і копіюємо з «bootstrap.min.css» код смужки (показаний на скрині вище), і вставляємо свої кольори смужки, подібно до того, як показано на верхньому скрині. Тут два кольори, так як смужка складається з двох половинок, що створює ефект об'ємності.
Ось тепер, якщо ви грамотно підібрали кольори, і все гармонує із загальним стилем сайту, все виглядає суперски! З оформленням навбара закінчили! ;-) Від верхів можна переходити до низів, а саме - до футера.
Як вірно зауважив sinabs на форумі LinkorCMS. білий фон контентного блоку при довгому знаходженні на сайті зливається з основним кольоровим фоном, тому добре б позначити рамкою блоки контенту. Зробимо це.
Задаємо рамку блокам
Знайдемо через інспектор коду в браузері елемент блоку і вставимо, як показано на скрині вище, код рамки: «border: 1px solid # A3A3A3;». 1px тут задає товщину рамки, solid - вид рамки, # A3A3A3 - колір рамки. Ви можете задати свої параметри. Копіюємо код, що вийшов з інспектора і вставляємо в «style.css» в панелі сайту на хостингу.
Також через інспектор коду браузера знаходимо код бічних блоків і вставляємо код рамки. Відповідно правимо сам «style.css».
Прискіпливо оглядаємо весь сайт і бачимо, що немає межі у блоку «хлібних крихт». Також шукаємо його в інспектора коду, вставляємо код рамки і зберігаємо в «style.css».
Ви можете віддячити мене за цю статтю, поклавши денюжку на Яндекс.Деньги - 41001946245208; Webmoney - RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).