Изображения для пунктов меню

4 года 11 мес. назад #7727 от svetinet
Здравствуйте!
Подскажите пжл, как в джумле 3,5 вывести изображения для пунктов меню из спрайта?
Начал делать как в этой статье написано:
wedal.ru/uroki-joomla/dobavlenie-ikonok-punktam-menyu-joomla-prostoj-i-khoroshij-sposoby.html

Код CSS добавил в файл CSS шаблона.
Куда добавлять код HTML и в настройках пункта меню нужно ли потом указывать CSS-класс ссылки?

Подскажите и напрвьте на путь истенный.

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

4 года 11 мес. назад #7730 от Wedal
svetinet, у вас должны быть сопоставлены CSS-классы пунктов меню и иконки спрайтов. Воспользуйтесь Firebug в FF или веб-инспектором в Chrome, чтобы посмотреть CSS-код спрайтов и отладить его. Подробнее о том, как это делается, можно почитать здесь: wedal.ru/internet/rukovodstvo-po-firebug.html . Другой вариант - привести html-код пунктов меню к тому виду, который предлагается в скачанном архиве спрайта.
Спасибо сказали: svetinet

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

4 года 11 мес. назад - 4 года 11 мес. назад #7733 от svetinet
Спасибо за ваш ответ!
Если я всё правильно понял, чтоб реализовать изображения из спрайта - делать нужно модуль HTML, а не модуль меню?

Мне вот генератор такой код подкинул:
xtml - код (я его никуда не добавлял)
<i class="sprite sprite-item-101"></i>
и т.д. по пунктам иконок

Код CSS - добавил в CSS файл шаблона (на основе Protostar)
.sprite {
    background-image: url(../imiges/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}
 
.sprite-item-101 {
    width: 40px;
    height: 40px;
    background-position: -5px -5px;
}
и т.д. по пунктам иконок

Я пробую реализовать через пункт меню. В настройках Параметры ссылки (там где добавляется изображение для пункта) я выключаю свою иконку,
а в пункте CSS-класс ссылки указываю: sprite sprite-item-101

В итоге получается, что буквы налазят на изображение.... (
Начинаю отодвигать буквы - вылазят другие иконки из спрайта.

Меню использую горизонтальное под шапкой. Шаблон Protostar
Настройки модуля:
position-1
Суффикс класса меню: nav-pills
Суффикс CSS-класса модуля: _menu

Размер иконок из спрайта 40х40px

Есть мысля пробелов на 40px в названии поставить, но думаю это не совсем хорошо.

Может что подскажите?

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

4 года 11 мес. назад #7737 от Wedal
svetinet, вот это уже подробный вопрос, теперь всё понятно.

Если я всё правильно понял, чтоб реализовать изображения из спрайта - делать нужно модуль HTML, а не модуль меню?

Нет, именно через модуль меню Joomla!

В принципе, вы все сделали правильно. Как я понял, проблема лишь в том, что текст ссылок наезжает на иконку спрайта. Дело тут вот в чем. Иконка спрайта, это как бы кусочек картины, который показывается через "глазок". Глазком выступает блок с фиксированными размерами, фон которого мы делаем изображением спрайта и сдвигаем его так, чтобы была видна иконка. Когда вы добавляете CSS-класс спрайта ссылке меню, то этим "глазком" становиться вся ссылка.

Есть 2 варианта:

1) Создать спрайт в котором все иконки будут выстроены в одну вертикальную линию. Сервис, кстати, по-моему, позволяет так делать. Дальше добавить CSS-классы иконок пунктам меню Joomla, как вы и сделали, и отодвинуть текст вбок. Другие иконки спрайта появляться не будут, т.к. они или выше или ниже, но не сбоку.

2) Переделать макет модуля меню mod_menu таким образом, чтобы поле CSS-класса ссылки стало полем CSS-класса иконки.
<i class="sprite sprite-item-101"></i>
для ссылок не нужны отдельные CSS-классы, т.к. у каждого пункта меню есть уникальный класс, через который можно обратиться к ссылке, а вот для иконок они очень пригодятся. Проще говоря, каждый раз, когда CSS-класс у пункта меню заполнен, к пункту меню должна добавляться иконка с этим классом.

Кстати, такой подход очень хорошо работает и для иконочных шрифтов .

Но если вы не очень хорошо понимаете HTML и PHP, то лучше используйте первый способ.
Спасибо сказали: svetinet

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

4 года 11 мес. назад #7739 от svetinet

2) Переделать макет модуля меню mod_menu таким образом, чтобы поле CSS-класса ссылки стало полем CSS-класса иконки.

<i class="sprite sprite-item-101"></i>
для ссылок не нужны отдельные CSS-классы, т.к. у каждого пункта меню есть уникальный класс, через который можно обратиться к ссылке, а вот для иконок они очень пригодятся. Проще говоря, каждый раз, когда CSS-класс у пункта меню заполнен, к пункту меню должна добавляться иконка с этим классом.


Мне вот этот бы способ подошел бы, но мне нужны подсказки чтоб это реализовать. Я не совсем понял, что означает:

Переделать макет модуля меню mod_menu таким образом, чтобы поле CSS-класса ссылки стало полем CSS-класса иконки.


Первый способ, что Вы указали думаю тоже может выдавать ошибку, так как меню в две строки (как на wedal.ru), я ещё не пробывал, но подозреваю, что будет в нижней строке видно другие части спрайта. К тому же спрайт из иконок 40х40 может получиться слишком большой. Вроде бы у некоторых браузеров есть ограничения в размерах
К тому же у меня меню потом дублируется в вертикальной позиции с небольшими изменениями (position-7 по протостару). Хотелось бы всё одним спрайтом сделать. Для этого нужно правильно освоить метод вывода средствами джумлы.
Может где то сгенерированный код неправильный, если видны другие участки спрайта? или я что то неправильно указал??
Может код правильнеее так исправить:
.sprite {
    background-image: url(../imаges/spriteshееt.png);
    background-repeat: no-repeat;
    display: block;
   height: 40px;
   width: 40px;
}
 
.sprite-item-101 {
    background-position: -5px -5px;
}

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

4 года 11 мес. назад #7743 от Wedal
svetinet, если вы допускаете возможность возникновения меню в 2-й строки, то да, окно станет широким по высоте и вторая иконка также появится. Тогда только первый способ. Мне сложно объяснить вам его в рамках одного поста на форуме. Посмотрите вот эту статью: wedal.ru/uroki-joomla/joomla-17-layouts.html . Там описывается, что такое макеты и как их переопределять. Вам нужен макеты модуля меню mod_menu. Они находятся в директории: modules/mod_menu/tmpl/ Там несколько макетов. Вам нужны default.php и default_url.php. Переопределите их в используемый шаблон Joomla, отредактируйте код так, чтобы CSS-класс ссылки становился CSS-классом иконки. Вот и всё.

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.