Как в списках меню Joomla вместо текста вставить картинку и убрать текст

Категория: HTML-верстка, Joomla, Мой опыт

27 Июнь, 2011

Давно я не писал в блог, да и не работал давненько тоже! Писал диплом. Слава Богу написал и защитил на 5 и закончил университет! Можете меня поздравить! =)

Сегодня работал над очередным сайтом на CMS Joomla. Одна из задач была вместо обычного текстового меню поставить картинки соответствующие этим разделам.Я пишу этот пост, потому что я столкнулся с этой проблемой и в Интернете не смог найти на нее ответа. Возможно плохо искал. Но у меня такая натура, я лучше покопаюсь сам, чем буду искать решение в Интернете. Больше знать буду. Немного почитав форумы я пришел к выводу, что через админку этого не решить. Пришлось лезть в код. Сначало поговорим о теоретической стороне вопроса.

Вот пример картинки:

Итак. У нас есть уже реализованное меню стандартными модулями joomla. Каждый из пунктов меню отдельный элемент, который имеет свой класс. Обычно этот класс называется itemN, где N – порядковое число нашего меню. Теперь необходимо каждый пункт меню описать в файле стилей и для каждого стиля задать ширину, высоту, позицию и, конечно, картинку, которая будет фоном. Конечно есть очень много расширений joomla, но они здесь не подходят. Нужно Теперь что делать с текстом? Обычно текст заключается в тег span, которому так же присуждается какой-то класс. Обычно для всех пунктов меню этот класс один. Теперь просто в этом классе делаем текст невидемым.

Теперь рассмотрим практически.
У нас есть вот такая структура уже реализованного меню:

1
2
3
4
5
6
7
8

<ul class="art-menu">
<li id="current" class="active item1">
<a href="#" class="active">Главная</a></li>
<li class="item53"><a href="/kypit-igry.html">Купить игру</a></li>
<li class="item54"><a href="/kontakti.html">Контакты</a></li>
<li class="item62"><a href="/chavo.html">Чаво</a></li>
<li class="item63"><a href="/akciya.html">Акция</a></li>
</ul>

Стили для каждого пункта меня, которые нам понадобятся следующие:

.item1
.item53
.item54
.item62
.item63

Теперь для каждого стиля пишем отдельный код в файле стилей. Для примера я выберу только первый стиль .item1. Описание стиля будет таким:

1
2
3
4
5
6
7

li.item1{
position:relative;
width:85px;
height:25px;
background:url(../images/glavnaya.png) no-repeat 0px 5px;
margin:0 7px 0 7px;
}

Из структуры меню мы видим, что стиль для каждого пункта меню, текст которого заключен в тег span является .t. Следовательно для этого стиля, только для тех случаем где он используется в теге span делаем текст не видимым:

1
2
3
4

span.t {
position:relative;
visibility:hidden;
}

Вот и все. Теперь можно спокойно обойтись без всяких дополнительных модулей и плагинов Joomla, а просто покопаться в коде и настроить свой сайт как Вам угодно!

Отличный сайт – cifra.ua где вы можете приобрести газонокосилки! Продажа газонокосилок ограничена! Спешите не пропустить!

Теги: Joomla, вместо текста, картинки, список меню, убрать текст

На тему «Как в списках меню Joomla вместо текста вставить картинку и убрать текст» 12 комментариев:

Александр, подскажите, где находятся эти файлы???
Ни в одном из файлов шаблона не могу найти

Главная
Купить игру
Контакты
Чаво
Акция

Спасибо

Дмитрий | 28 Июль 2011 в 11:58

Ответить

Эти страницы вы создаете в админке, а потом в таблице стилей указываете все правила для полученых классов .item1 .item2 .item3 .item[N]

Masterix | 28 Июль 2011 в 12:09

Ответить

Вот я интересуюсь, где находится таблица стилей??? поиском прошелся по всем файлам шаблона: нет нигде ничего похожего на это:
1
2
3
4
5
6
7 li.item1{
position:relative;
width:85px;
height:25px;
background:url(../images/glavnaya.png) no-repeat 0px 5px;
margin:0 7px 0 7px;
}

Дмитрий | 28 Июль 2011 в 16:34

Ответить

Ну таблицы стилей))) CSS файлы) И Вам не нужно искать. Это надо описать для каждого пункта. Создаете страницу и ей присваевается item[N]. Потом открываете код HTML страницы и смотрите какой итем присвоин. И потом описываете его.

Masterix | 28 Июль 2011 в 23:10

Ответить

А если нету в списке класса “t”

тоесть у меня код такой, где прописать чтоб этот класс присваивался.

1
2
3

<a href="http://localhost/auto-expert-/index.php?option=com_content&view=article&id=2&Itemid=2" rel="nofollow">
Эвакуация
</a>

Денис | 15 Сентябрь 2011 в 12:25

Ответить

Вам нужно изменить код вывода меню в шаблоне.
Зайдите в саму тему и в файле php, в котором отображается данное меню, вставте нужные Вам теги и классы.

Masterix | 15 Сентябрь 2011 в 16:46

Ответить