Главная › Новости

Как добавить позиции модулей в шаблоне joomla.mp4

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

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

В этой статье разберём как поставить картину в пункт меню Joomla, и как совершенно поменять ссылку на картину.

Покажу на одном из реальных веб-сайтов, копия которого находится на локальном сервере.
Место расположения веб-сайта не имеет значения.

В Joomla 2.5 это сделать довольно легко, по последней мере по сопоставлению с предшествующей версией (J1.5).

Для примера поставим картину    для пт "Основная".

Перейдём в Меню -> Главное меню.
Откроем пункт "Основная".

Нам необходимы "Характеристики отображения ссылки". 

Малость объясню, что к чему.

Описание ссылки - это тег title для ссылки.
Да, в Joomla 2.5 есть возможность указывать title для пт меню, молвят это хорошо сказывается на SEO.

CSS класс ссылки - тут сможете подставить свой CSS класс, который вы придумаете для пт. Главное, чтоб он не совпадал ни с одним классом, который уже есть в шаблоне, т.е. он должен быть уникальным.
К примеру "home-button-menu" - уверен на 99,9% таковой класс не употребляется в шаблонах.

Изображение ссылки - тут фактически и выбирается изображение для пт меню (из папки images).

Сделать заголовок - эта настройка выводит надпись для пт меню, в нашем случае - это слово "Основная".

Избираем изображение для пт.
Сделать заголовок оставляем как есть - т.е. "Да".
Сохраняем!

У нас выходит так:

Картина малость прижата к тексту, но это можно просто поправить.

Для этого перебегаем назад в опции пт меню и придумываем CSS класс для этого пт.
Я его уже выдумал - это будет - home-button-menu
Дописываем его для пт и сохраняем.

Сейчас ссылка в пт меню "Основная" имеет собственный класс

Дальше открываем CSS-файл вашего шаблона, как правило это template.css либо style.css
И добавляем наш новый класс куда-нибудь в начало (либо в конец), чтоб вам по мере надобности, было легче его корректировать.

Приблизительно это будет смотреться так:

.home-button-menu img {
padding : 05px 0 ;
}

Мы задали стиль для изображения, на которое также действует класс home-button-menu и сделали отступ справа 5 пикселей.

В конечном итоге у нас вышло:

У рисунки появился отступ справа.