Редактирование шаблона Bootstrap: Цвет навбара и блоков

Автор: Антон Матвейчук


navbar_1


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


Про настройку самого меню я расскажу попозже, здесь же покажу самое сложное — как изменить дизайн навбара, — и раскрою все нюансы настройки внешнего вида навбара под общий стиль сайта.

 

Настраиваем внешний вид навбара


navbar_2


Для начала идём в панели сайта на хостинге в «style.css». По скрину выше, я думаю, понятно, где можно изменить отображение отдельных элементов навбара, а именно: заголовка-названия сайта (шрифт, отступы, цвет шрифта), выделения пунктов верхнего меню при наведении курсора (цвет фона), ссылок-пунктов верхнего меню (отступы, закругление углов, цвет).


navbar_3


Ищем и копируем из «bootstrap.min.css» код цвета навбара. На скрине выше показано, какие коды выводят основной цвет навбара и создают его градиент. Вставляем скопированный код в «style.css» в самом низу.

 

navbar_4


Также ищем и копируем из «bootstrap.min.css» код цвета неактивных кнопок верхнего меню, заодно копируем и вставляем в «style.css» код выделения бокового меню. На скринах выше показано, какие коды искать и какие цифры изменять.


navbar_5


Красота! Из прежнего простого чёрного навбар приобрёл изящную объёмную окраску. То, что нужно!


navbar_6


Но пока его портит чёрная вертикальная полоска, отделяющая меню от вызова профиля пользователя. Изменим и эту полоску тоже.


navbar_7


Ищем и копируем из «bootstrap.min.css» код полоски (показан на скрине выше), и вставляем свои цвета полоски, подобно тому, как показано на верхнем скрине. Здесь два цвета, так как полоска состоит из двух половинок, что создаёт эффект объёмности.


navbar_8


Вот теперь, если вы грамотно подобрали цвета, и всё гармонирует с общим стилем сайта, всё смотрится суперски! С оформлением навбара закончили! ;-) От верхов можно переходить к низам, а именно — к футеру.

 

Дополнение от 23.10.2014:


Как верно заметил sinabs на форуме LinkorCMS, белый фон контентного блока при долгом нахождении на сайте сливается с основным цветным фоном, поэтому хорошо бы обозначить рамкой блоки контента. Сделаем это.


Задаём рамку блокам


navbar_9


Найдём через инспектор кода в браузере элемент блока и вставим, как показано на скрине выше, код рамки: «border:1px solid #A3A3A3;». 1px здесь задаёт толщину рамки, solid — вид рамки, #A3A3A3 — цвет рамки. Вы можете задать свои параметры. Копируем получившийся код из инспектора и вставляем в «style.css» в панели сайта на хостинге.


navbar_10


Также через инспектор кода браузера находим код боковых блоков и вставляем код рамки. Соответственно правим сам «style.css».


navbar_11


Придирчиво осматриваем весь сайт и видим, что нет рамки у блока «хлебных крошек». Также ищем его в инспекторе кода, вставляем код рамки и сохраняем в «style.css».

 

 


В предыдущей статье: Редактирование шаблона Bootstrap: Шапки и тексты в них.


В следующей статье: Редактирование шаблона Bootstrap: Футер.

 


Вы можете отблагодарить меня за эту статью, положив денюжку на Яндекс.Деньги — 41001946245208; Webmoney — RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).


Также я буду благодарен вам, если вы зарегистрируетесь в хостинге по ссылкам в моей статье — вам ничего не убудет, а я получу хоть какое, но вознаграждение ;-)

Опубликована: 11.10.2014
Просмотров 14558



Комментарии

Гости не могут добавлять комментарии, войдите или зарегистрируйтесь.
Просто Царь  22.03.2016 11:06  
а зачем устанавливать на странице отдельный блок с формой входа, если для этого есть специальная кнопка сверху?
Антонъ  22.03.2016 15:19  
Если вам мешает этот блок, можете отключить его в Админ-панели сайта.