как сделать из обычного mainmenu-меню с картинками?

мне необходимо вместо mainmenu сделать логотипы и ссылки.как быть? скачала компонент thumbnailspro.zip для создания графического меню,подскажите смогу я в нём заменить картинки на свой логотип? и если нет то как мне это сделать?

 

Mod_AndyR_Button v.1.0
В Joomla! 1.0.15 Lavra Edition 2008 от Nestora входит как стандартный модуль.

 

Вариант сделать их css буквально 5 минут назад описывал - http://joomla-support.ru/nextnewesttothread7898.html

То есть каждому элементу меню по item№ прописать background:= логотип - а надпись убрать line-heating
Пример подмены ссылок иконками: http://westele.com.ua/
Код css:

div#top_menu { margin-left:250px; padding-top:15px;}
#top_menu li {display:block; float:left; background:url(../images/bg/bg_blue_separator.gif) right no-repeat; height:16px; width:35px; margin-right:15px;}
#top_menu a {display:block; height:16px; width:35px; overflow: hidden; line-height:999px;}
#top_menu .item1 a {background:url(../images/ico/ico_home.gif) no-repeat; width:25px;}
#top_menu li.item1 {width:25px;}
#top_menu .item2 a {background:url(../images/ico/ico_map.gif) no-repeat;}
#top_menu .item3 a {background:url(../images/ico/ico_login.gif) no-repeat;}
#top_menu .item4 a {background:url(../images/ico/ico_contact.gif) no-repeat;}
#top_menu li.item4 {background:none;}

Итогом мы получаем 4 замечательные иконки вместо текстовой ссылки

 

у меня joomla 1.0.15 RE
дело в том,что мне нужен логотип и рядом ссылка. а возможно раздвинуть пункты меню так чтобы вставить туда картинку? по ширене получается а по высоте не могу найти где поменять нужно.
вот шаблон www.nkp.ru (в нем вместо меню слева нужно лого+ссылка)

 

Я специалист по верстке вообще - а не по джумле в частонсти - и обычно css, да и весь шаблон, пишу сам почти с 0.
Итак - задача - есть н ссылок слева от которых должен быть логотип 20х20 пикселей
Кладем фоном логотип - а padding-left:20px сдвигаем с него ссылку
Ничего сложного не вижу ... Для примера -
http://savrox-models.art-od.com/
Угу - это джумловое меню. Только привязка изображения девушки (160х60) спозиционировано под ссылку а не слева - и выбиарется случайно)
Обрати внимание на ссылку - подробнее - в начале стоит указатель. на само деле это картинка описана вот таким стилем:
a.readon {font-size:0.8em; background:url(../images/bg/bg_arrow_readmore.gif) left no-repeat; padding-left:10px; color:#FFFF00; text-decoration:none;}
То есть - элементу а даем фон, жмем его влево - а саму ссылку отодвигаем на 10 пикслелей от левого края.
P.S. Вот токи я не работал с версией 15РЕ - не знаю как она размечает элементы меню - если не сложно - дайте ка линк на какой то сайт (или даже пару сайтов) под ее управлением - сразу станет все понятно

 

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

 

логотипы появились,только они заходят лруг на друга вот css
/* ################### MAIN AND SUB MENU SYSTEM ################### */

.modules {
background : #FFFFFF;
border : 1px solid #C0C0C0;
}

.mainlevel {
letter-spacing : 2px;
padding-left : 25px;
width : 90%;
}

a.mainlevel:link, a.mainlevel:visited {
color : #285078;
background : url("../images/icon01.gif");
background-repeat: no-repeat;
}

a.mainlevel:hover {
color : #06b45c;
background : url("../images/icon02.gif");
background-repeat: no-repeat;
}

.sublevel {
letter-spacing : 2px;
padding-left : 7px;
}

table.moduletable {
padding: 5px 0px 5px 8px;
margin-bottom: 15px;
width: 100%;
background: url(../images/bgr.png);
}

table.moduletable th {
font-size : 11px;
font-weight : bold;
color : #000000;
text-align : center;
letter-spacing : 2px;
border-bottom : 1px solid #AFD1F4;
}

table.moduletable td {
font-size : 10px;
font-weight : normal;

 

То есть заходят друг на друга - можно URL?
Енто - если скажем иконка icon01.gif имеет 25х25 пикселей - то получится бяда - не будут помещаться иконки в размер...
Тогда поступим так:

.mainlevel {

display:block; /*Изменим тип отображения на блочный*/
heading:25px; /* зададим высоту*/
marging:5px 0px; /* здадим отсуп сверху и снизу*/
padding-left : 25px; /* отступим внутри 25 в лево*/

letter-spacing : 2px;
width : 90%;
}

 

heading:25px; /* зададим высоту*/
Сорри - очепятка вышла
height - вот правильно

 

http://www.ncpbroker.ru/index.php?option=com_content&task=view&id=24&Itemid=41

 

получилось!!!!! огромнейшее спасибо!

 

a:link, a:visited {template_css.css (line 224)
color:#0B7FC8;
font-family:Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;
font-size:11px;

padding-top:15px; /* Добавь отсуп сверху что бы текстовка стала по центру от логотипа*/

text-decoration:none;
}

css как таковой сложно работает с позиционированием по центру по высоте - я до сих пор избегаю как могу такие приемы верстки

Почитай про favicon - полезная штука - поставь на сайте
А так - вроде ничего так - аккуратненько ...
А ка кначинающей - могет лучше на клоне Joomla 1.5.7 всетаки работать - в ней я уже вижу возможностей стало нааамного больше

 

не получилосб выровнять(

/* ###################### LINKS ###################### */
a:link, a:visited {
font-size : 11px;
color : #0b7fc8;
text-decoration : none;
font-family : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
padding-top : 15px;


}

a:hover {
color : #06b45c;
text-decoration : none;
}

a.category:link, a.category:visited {
color : #285078;
font-weight : bold;
letter-spacing : 1px;
}

a.category:hover {
color : #CC6600;
}

 

Не там ты его (отступ) прописала - нужно в тот который у тебя за ссылки меню отвечает
https://addons.mozilla.org/ru/firefox/addon/1843 - вот полезное дополнение к ФФ - сможешь видетьс разу где какой элемент и какой стиль используешь

 

спасибо за помощь!

 

у меня появился ещё вопрос.
Подскажите,что мне нужно добавить в css теперь чтобы в mainmenu логотипы сделать разные(одного размера,только немного видоизменённые)?
само меню здесь http://www.ncpbroker.ru/
а вот сss:
/* ################### MAIN AND SUB MENU SYSTEM ################### */
.modules {
background : #FFFFFF;
text-decoration : none;
}
.mainlevel {

display:block;
height:80px;
marging:20px 10px;
padding-left : 90px;

letter-spacing : 1px;
width : 40%;
}
a.mainlevel:link, a.mainlevel:visited {
color : #285078;
background : url("../images/icon01.gif");
background-repeat: no-repeat;
padding-top : 20px;
text-decoration : none;
}
a.mainlevel:hover {
color : #06b45c;
background : url("../images/icon02.gif");
background-repeat: no-repeat;
.sublevel {
letter-spacing : 2px;
padding-left : 90px;
}
table.moduletable {
padding: 5px 0px 5px 8px;
margin-bottom: 50px;
width: 100%;
background: url(../images/bgr.png);
}
table.moduletable th {
font-size : 11px;
font-weight : bold;
color : #000000;
text-align : center;
letter-spacing : 2px;
border-bottom : 1px solid #AFD1F4;
}
table.moduletable td {
font-size : 10px;
font-weight : normal;
}

 

Sofia, можно вообще css не трогать, а задать иконки через админку в редактировании этих пунктов меню. Можно и через css, нужно использовать меню, где можно присваивать каждому пункту меню свой ID

 

Fanamura, а как присвоить каждому пункту меню свой ID? извини,если вопрос нелепый

 

Sofia, использовать это: http://joomlaforum.ru/index.php/topic,20351.0.html

 

Наконец-то нашел! То, что нужно.