Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Как вставить иконки в пункты меню сайта в Joomla (Шаблон Protostar)

В этой статье рассмотрим, как вставить иконки в пункты меню сайта Joomla, чтобы отображалось не только название, но и рядом с ним была иконка, символизирующая данный пункт меню. Напомню, что работаю я с шаблоном Protostar. А материал данной статьи затрагивает стили именно этого шаблона. Но, если используется другой шаблон, то не факт, что приведённый ниже рецепт окажется бесполезным. ;)



Постановка задачи

Итак, у нас есть Главное меню сайта, которое мы уже передвинули в шапку сайта и даже придали ему горизонтальное расположение. Выглядит оно так:

Главное меню сайта

В общем, стандартное меню. Но нет в нём индивидуальности, а очень хочется. =)

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

Менеджер меню. Пункт меню. Вкладка «Параметры ссылки»

Для того, чтобы поменять внешний вид нашего пункта меню нам потребуется админка Joomla, а конкретно Вкладка «Параметры ссылки», которая доступна в «Менеджере меню» при редактировании или создании пункта меню. Работать будем с полем «CSS-класс ссылки» так, как показано на картинке:

CSS-класс ссылки

  1. Вставим в поле название иконки, которую нам хочется видеть в пункте меню перед его названием, например, icon-users
  2. Сразу поставим пробел в поле «Заголовок меню» (чтобы иконка не сливалась с названием пункта меню)
  3. Сохраним внесённые изменения и посмотрим что получилось

Заголовок пункта меню уползает вниз (располагается не горизонтально, а вертикально)

При просмотре получившегося результата всё выглядит удручающе. Хотя иконка и появилась в пункте меню, на название пункта меню уползло вниз, вытянувшись в вертикальном расположении по одной букве:

Заголовок пункта меню уползает вниз

Исправляем ситуацию. Приводим пункт меню в горизонтальный вид.

Пока не понимаю, чем руководствовались создатели шаблона Protostar и почему всплывает такой косяк. Ясно одно: свойству display пункта меню задано значение block, поэтому он поблочно и выводит каждый символ, складывая их один под другим. А нам нужно их вытянуть в строчку, значит значение свойства display должно быть inline.

Для этого нужно внести изменения в файл template.css, который находится в папке шаблона:

./templates/protostar/css/template.css

Править можно с помощью админки Joomla, можно сторонним редактором. Важно что править, а не чем ;)

А править нужно строчку со свойством display пункта меню .nav > li > a, которая у меня в этом файле находится в районе 2910- строки. Итак,

Было:

.nav > li > a {
	display: block;
}

Стало:

.nav > li > a {
	display: inline;
}

Новый вид пунктов меню

После внесения правок в файл template.css шаблона можно насладиться новым (модернизированным) видом Главного меню сайта! =)

Новый вид Главного меню сайта

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

P.S.

Как показала практика, меню, с подобными правками начинает хорошо выглядеть только в случае ширины экрана больше 979px. Таковы настройки шаблона Protostar. Если ширина экрана меньше (критично для планшетов и тем более мобильных телефонов), то Главное меню сайта сворачивается сворачивается в одну кнопку и потом разворачивается кликом по ней в виде вертикального списка. И в этом вертикальном списке пункты меню наползают друг на друга.

Можно ковырять шаблон дальше, дополнив нижний отступ каждому пункту меню типа так:

<li style="padding-bottom: 18px;">

Но это уже слишком большое вмешательство в задумку дизайнеров шаблона Protostar, и вместо иконок имеет смысл ставить картинки. Они нормально работают в пунктах меню при display: block; хотя, большое количество картинок увеличит время загрузки картинок (что снова критично для мобильных устройств из-за увеличения количества обращений к серверу).

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

Смотри статью «Как вставить картинки в пункты меню сайта в Joomla».

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Ника ответил в теме #2106 2 мес. 3 нед. назад
Спасибо! Мне тоже была интересна ваша публикация, но наверняка вопросы еще будут :) Джумла такая огромная.. и спасибо за советы и про меню..
admin аватар
admin ответил в теме #2102 2 мес. 3 нед. назад
Ника, иконка с домиком icon-home, с лупой icon-search.
Список иконок можно посмотреть здесь

Ника пишет: А какие должны быть расширения для работы с меню? У меня обычное стандартное джумловское.

У меня верхнее меню - тоже стандартный модуль Joomla.
Боковое - меню категорий Nextend Accordion Menu . Прикольный модуль (использую его и для проектов заказчиков - все довольны :) )

Ника пишет: Вообще, всякие навароты стараюсь не использовать, только все по делу.

Я тоже.

Ника пишет: Может надо подключать еще что нибудь? Может Бурстрап?

Бутстрап похоже есть в библиотеке фреймворка Joomla.
(См. \libraries\cms\html\bootstrap.php)

Ника пишет: А можно ли иконку оставить, а надпись рядом убрать? Пока в настройках ссылки не получается.

А просто пробел поставить или пробел и точку + прописать точке цвет фона?

P.S. Работы привалило, поэтому отвечать сразу не получается, но вопросы интересные - самому разобраться помогают с тем, как всё работает в Joomla, так что спасибо. :cheer:
Ника ответил в теме #2097 2 мес. 4 нед. назад
Посмотрела также ваши публикации по ссылкам из этой статьи, вы не затронули тему, откуда эти иконки берутся, только "из имеющихся в медиа-менеджере". Не могли бы вы подсказать, как прописать иконки: Главная (домик) и Поиск (лупа).
Кстати, у меня работает "icon-users" (я пробовала "home" - был пример на другом сайте, home не работает).

А можно ли иконку оставить, а надпись рядом убрать? Пока в настройках ссылки не получается.
Заранее благодарю.
Ника ответил в теме #2096 2 мес. 4 нед. назад
Здравствуйте!
Шаблон установочный Protostar (с ним работаю, разукрашиваю), джумла последней версии 3.8.12. Если просто css-прописать класс, то ничего не происходит. А какие должны быть расширения для работы с меню? У меня обычное стандартное джумловское. Вообще, всякие навароты стараюсь не использовать, только все по делу. Для практичного меню понадобилось заменить надписи на иконки.

Может надо подключать еще что нибудь? Может Бурстрап?

Спасибо заранее.
admin аватар
admin ответил в теме #2077 3 мес. 1 нед. назад
Ника, шаблон у вас какой?
И поставлены ли какие-нибудь расширения при работе с меню?
Ну и CSS-класс ссылки поставьте тот, что в статье указан (чтобы наверняка). Возможно вы прописываете несуществующий класс.
Ника ответил в теме #2076 3 мес. 1 нед. назад
Добрый день. Хорошая публикация. Подскажите, а у меня ничего не происходит при замене меню на иконку.Почему? Спасибо..

Обсудить эту статью

INFO: Вы отправляете сообщение как 'Гость'