- Форум
- Уроки Joomla
- Настройка Joomla
- Изображения для пунктов меню
Изображения для пунктов меню
4 года 8 мес. назад #7727 от svetinet
Здравствуйте!
Подскажите пжл, как в джумле 3,5 вывести изображения для пунктов меню из спрайта?
Начал делать как в этой статье написано:
wedal.ru/uroki-joomla/dobavlenie-ikonok-punktam-menyu-joomla-prostoj-i-khoroshij-sposoby.html
Код CSS добавил в файл CSS шаблона.
Куда добавлять код HTML и в настройках пункта меню нужно ли потом указывать CSS-класс ссылки?
Подскажите и напрвьте на путь истенный.
Подскажите пжл, как в джумле 3,5 вывести изображения для пунктов меню из спрайта?
Начал делать как в этой статье написано:
wedal.ru/uroki-joomla/dobavlenie-ikonok-punktam-menyu-joomla-prostoj-i-khoroshij-sposoby.html
Код CSS добавил в файл CSS шаблона.
Куда добавлять код HTML и в настройках пункта меню нужно ли потом указывать CSS-класс ссылки?
Подскажите и напрвьте на путь истенный.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
Wedal

Администратор

2772
228
643
4 года 8 мес. назад #7730 от Wedal
svetinet, у вас должны быть сопоставлены CSS-классы пунктов меню и иконки спрайтов. Воспользуйтесь Firebug в FF или веб-инспектором в Chrome, чтобы посмотреть CSS-код спрайтов и отладить его. Подробнее о том, как это делается, можно почитать здесь:
wedal.ru/internet/rukovodstvo-po-firebug.html . Другой вариант - привести html-код пунктов меню к тому виду, который предлагается в скачанном архиве спрайта.
4 года 8 мес. назад - 4 года 8 мес. назад #7733 от svetinet
Спасибо за ваш ответ!
Если я всё правильно понял, чтоб реализовать изображения из спрайта - делать нужно модуль HTML, а не модуль меню?
Мне вот генератор такой код подкинул:
xtml - код (я его никуда не добавлял)
Код CSS - добавил в CSS файл шаблона (на основе Protostar)
Я пробую реализовать через пункт меню. В настройках Параметры ссылки (там где добавляется изображение для пункта) я выключаю свою иконку,
а в пункте CSS-класс ссылки указываю: sprite sprite-item-101
В итоге получается, что буквы налазят на изображение.... (
Начинаю отодвигать буквы - вылазят другие иконки из спрайта.
Меню использую горизонтальное под шапкой. Шаблон Protostar
Настройки модуля:
position-1
Суффикс класса меню: nav-pills
Суффикс CSS-класса модуля: _menu
Размер иконок из спрайта 40х40px
Есть мысля пробелов на 40px в названии поставить, но думаю это не совсем хорошо.
Может что подскажите?
Если я всё правильно понял, чтоб реализовать изображения из спрайта - делать нужно модуль 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 года 8 мес. назад от svetinet.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
Wedal

Администратор

2772
228
643
4 года 8 мес. назад #7737 от Wedal
svetinet, вот это уже подробный вопрос, теперь всё понятно.
В принципе, вы все сделали правильно. Как я понял, проблема лишь в том, что текст ссылок наезжает на иконку спрайта. Дело тут вот в чем. Иконка спрайта, это как бы кусочек картины, который показывается через "глазок". Глазком выступает блок с фиксированными размерами, фон которого мы делаем изображением спрайта и сдвигаем его так, чтобы была видна иконка. Когда вы добавляете CSS-класс спрайта ссылке меню, то этим "глазком" становиться вся ссылка.
Есть 2 варианта:
1) Создать спрайт в котором все иконки будут выстроены в одну вертикальную линию. Сервис, кстати, по-моему, позволяет так делать. Дальше добавить CSS-классы иконок пунктам меню Joomla, как вы и сделали, и отодвинуть текст вбок. Другие иконки спрайта появляться не будут, т.к. они или выше или ниже, но не сбоку.
2) Переделать макет модуля меню mod_menu таким образом, чтобы поле CSS-класса ссылки стало полем CSS-класса иконки.для ссылок не нужны отдельные CSS-классы, т.к. у каждого пункта меню есть уникальный класс, через который можно обратиться к ссылке, а вот для иконок они очень пригодятся. Проще говоря, каждый раз, когда CSS-класс у пункта меню заполнен, к пункту меню должна добавляться иконка с этим классом.
Кстати, такой подход очень хорошо работает и для иконочных шрифтов .
Но если вы не очень хорошо понимаете HTML и PHP, то лучше используйте первый способ.
Нет, именно через модуль меню Joomla!Если я всё правильно понял, чтоб реализовать изображения из спрайта - делать нужно модуль HTML, а не модуль меню?
В принципе, вы все сделали правильно. Как я понял, проблема лишь в том, что текст ссылок наезжает на иконку спрайта. Дело тут вот в чем. Иконка спрайта, это как бы кусочек картины, который показывается через "глазок". Глазком выступает блок с фиксированными размерами, фон которого мы делаем изображением спрайта и сдвигаем его так, чтобы была видна иконка. Когда вы добавляете CSS-класс спрайта ссылке меню, то этим "глазком" становиться вся ссылка.
Есть 2 варианта:
1) Создать спрайт в котором все иконки будут выстроены в одну вертикальную линию. Сервис, кстати, по-моему, позволяет так делать. Дальше добавить CSS-классы иконок пунктам меню Joomla, как вы и сделали, и отодвинуть текст вбок. Другие иконки спрайта появляться не будут, т.к. они или выше или ниже, но не сбоку.
2) Переделать макет модуля меню mod_menu таким образом, чтобы поле CSS-класса ссылки стало полем CSS-класса иконки.
<i class="sprite sprite-item-101"></i>
Кстати, такой подход очень хорошо работает и для иконочных шрифтов .
Но если вы не очень хорошо понимаете HTML и PHP, то лучше используйте первый способ.
4 года 8 мес. назад #7739 от svetinet
Мне вот этот бы способ подошел бы, но мне нужны подсказки чтоб это реализовать. Я не совсем понял, что означает:
Первый способ, что Вы указали думаю тоже может выдавать ошибку, так как меню в две строки (как на wedal.ru), я ещё не пробывал, но подозреваю, что будет в нижней строке видно другие части спрайта. К тому же спрайт из иконок 40х40 может получиться слишком большой. Вроде бы у некоторых браузеров есть ограничения в размерах
К тому же у меня меню потом дублируется в вертикальной позиции с небольшими изменениями (position-7 по протостару). Хотелось бы всё одним спрайтом сделать. Для этого нужно правильно освоить метод вывода средствами джумлы.
Может где то сгенерированный код неправильный, если видны другие участки спрайта? или я что то неправильно указал??
Может код правильнеее так исправить:
2) Переделать макет модуля меню mod_menu таким образом, чтобы поле CSS-класса ссылки стало полем CSS-класса иконки.
для ссылок не нужны отдельные CSS-классы, т.к. у каждого пункта меню есть уникальный класс, через который можно обратиться к ссылке, а вот для иконок они очень пригодятся. Проще говоря, каждый раз, когда CSS-класс у пункта меню заполнен, к пункту меню должна добавляться иконка с этим классом.<i class="sprite sprite-item-101"></i>
Мне вот этот бы способ подошел бы, но мне нужны подсказки чтоб это реализовать. Я не совсем понял, что означает:
Переделать макет модуля меню 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;
}
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
Wedal

Администратор

2772
228
643
4 года 8 мес. назад #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-классом иконки. Вот и всё.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
- Форум
- Уроки Joomla
- Настройка Joomla
- Изображения для пунктов меню