Изменение стилей в меню

 Этой статьёй начинаю раздел об изменении внешнего вида меню. Здесь мы разберём как с помощью CSS изменить вид меню в Joomla. Для примера я взял стандартный шаблон Joomla – Protostar. Всё, нижеописанное, можно использовать для любого шаблона любой CMS. Стили CSS одинаковы для всех.
 Шаблон Protostar имеет меню такого вида. Меню очень простое, можно сказать скромное. Давайте его изменим.
 Для просмотра стилей CSS, для нашего меню, пользуемся стандартными возможностями браузера. Наводим курсор на пункт меню, нажимаем правую клавишу мыши, выбираем инспектировать элемент. Как пользоваться этим инструментом я писал здесь. В открывшемся окне, справа, мы видим, что за меню отвечает раздел .nav > li > a. Он практически пуст. По этой причине наше меню имеет такой простой вид. Начнём изменение.
Шрифт. Изменим размер шрифта меню. Для этого внесём такую запись: font-size: 20px; Я ставлю размер в 20 пикселей, вы выбирайте под свой дизайн. Далее, при желании, изменяем сам шрифт. Делаем такую запись: font-family: monotype corsiva;. Вы выбираете шрифт под свой дизайн.
Отступ. Изменим расстояние отступа текста от края блока пункта меню. Для этого вносим такую запись: padding: 0.3em 30px; Где первым идёт верх и низ, вторым право и лево. Вы измените под свой стиль.
Фон. Изменим фон поля пункта меню. Для этого сделаем такую запись: background: #F4E0CC; Вы выбираете свой цвет.
Углы. Мы получили блоки пунктов меню с углами 90гр. Мы придадим некоторую округлость углам. Для этого внесём такие изменения: border-radius: 8px;
Увеличивая или уменьшая количество пикселей, мы изменяем сглаживание угла.
Расстояние между блоками. На данном этапе у нас блоки пунктов меню слиты. Давайте их разорвём. Вносим такую запись: margin: 1px; Теперь меню приняло совершенно другой вид.


Рамка. Желающие могут взять блоки пунктов меню в рамки. Рамки могут быть разными. За выведение рамки отвечает свойство - border:. Теперь посмотрим какие рамки бывают.
solid –  сплошная рамка;
dashed – пунктирная рамка;
dotted – точечная рамка;
double – рамка двойной линией;
groove – рамка с тенью;
ridge —  с рельефом;
Запись будет выглядеть так: border: groove; Мы можем задать толщину и цвет рамки. В таком случае запись будет такой:
border: groove #C4C8DB 2px;
 Теперь собьём всё вместе.
.nav > li > a {
    display: block;
    font-size: 20px;
    font-family: monotype corsiva;
    padding: 5px 30px;
    background: #F4E0CC;
    border-radius: 8px;
    margin: 1px;
    border: groove #C4C8DB 2px;
}
 Для проверки отражения меню на сайте, в консоли элементов, справа над правилом для меню, нажимаем на адрес. В моём случае это template.css:2839. Слева откроется код с данным файлом. Здесь мы вносим изменения и наблюдаем как изменится сайт. При необходимости вносим правки в нужный элемент. После всего - код копируем, идём по адресу, вносим правку в файл.
 Как работать с консолью и находить нужные файлы, адреса к ним и места коррекции я писал здесь.