Изменение фона в шаблоне Joomla

Опубликовано: 12.10.2016

видео Изменение фона в шаблоне Joomla

Joomla 3.0 Меняем стиль меню (Часть 3)

6. Сейчас колдуем с CSS так, чтоб было похоже на данный макет.

Поехали:

Я заключил меню в блочный элемент levoe-menu:


Изменение фона в шаблоне Joomla

Таким макаром, Joomla генерирует последующий код:

Применим к этому меню последующие css правила:

.levoe-menu { position: absolute; float: left; border: 0px dashed; width: 255px; margin-top: 0px; text-align: left; line-height: 1.5; /* Увеличиваем расстояние меж строчками меню */ font-family: verdana; font-size: 16px; }   .menuleft li { list-style-type: none; /* Убираем маркеры перечня */ }   .menuleft li a /* Стиль родительского меню */ { color: #000; display: block; background-image: url(../images/strelka-right.png); /* подкладываем фон со стрелкой на право */ background-repeat: no-repeat; background-position: left; padding-left: 15px; /* делаем отступ слева */ position: relative; left: -10px; /* делаем смещение на лево для места для стрелки */ text-decoration: none; }   ul li.active.parent a /* Стиль активного родительского меню */ { color: #0063FF; background-image: url(../images/strelka-down.png); /* подкладываем фон со стрелкой вниз */ background-repeat: no-repeat; background-position: left; }   #left ul li a /* Стиль подменю */ { background-image: url(../images/none); /* Убираем стрелки */ color: #0099FF; position: relative; left: -45px; /* Двигаем подменю на лево на необходимое расстояние */ }   #left ul /* Делаем отступ подменю снизу */ { padding-bottom: 20px; }

В конечном итоге получаем требуемый вариант. На момент написания статьи рабочий вариант находился по адресу: http://td-e.ru/chimiya.html Можно, естественно, еще выделить активное подменю, но в ТЗ этого не было, так что опустим ;)