В этой статье рассмотрим, как вставить иконки в пункты меню сайта Joomla, чтобы отображалось не только название, но и рядом с ним была иконка, символизирующая данный пункт меню. Напомню, что работаю я с шаблоном Protostar. А материал данной статьи затрагивает стили именно этого шаблона. Но, если используется другой шаблон, то не факт, что приведённый ниже рецепт окажется бесполезным. ;)
Постановка задачи
Итак, у нас есть Главное меню сайта, которое мы уже передвинули в шапку сайта и даже придали ему горизонтальное расположение . Выглядит оно так:
В общем, стандартное меню. Но нет в нём индивидуальности, а очень хочется. =)
Поэтому, подглядев на других сайтах, что можно вставлять иконки в пункты меню рядом с их названиями, сделаем это и на нашем сайте.
Менеджер меню. Пункт меню. Вкладка «Параметры ссылки»
Для того, чтобы поменять внешний вид нашего пункта меню нам потребуется админка Joomla, а конкретно Вкладка «Параметры ссылки », которая доступна в «Менеджере меню » при редактировании или создании пункта меню . Работать будем с полем «» так, как показано на картинке:
- Вставим в поле название иконки, которую нам хочется видеть в пункте меню перед его названием, например, icon-users
- Сразу поставим пробел в поле «Заголовок меню » (чтобы иконка не сливалась с названием пункта меню)
- Сохраним внесённые изменения и посмотрим что получилось
Заголовок пункта меню уползает вниз (располагается не горизонтально, а вертикально)
При просмотре получившегося результата всё выглядит удручающе. Хотя иконка и появилась в пункте меню, на название пункта меню уползло вниз, вытянувшись в вертикальном расположении по одной букве:
Исправляем ситуацию. Приводим пункт меню в горизонтальный вид.
Пока не понимаю, чем руководствовались создатели шаблона Protostar и почему всплывает такой косяк. Ясно одно: свойству display пункта меню задано значение block , поэтому он поблочно и выводит каждый символ, складывая их один под другим. А нам нужно их вытянуть в строчку, значит значение свойства display должно быть inline .
Для этого нужно внести изменения в файл template.css , который находится в папке шаблона:
./templates/protostar/css/template.css
Этот туториал покажет Вам, как добавить недостающие иконки FontAwesome в шаблон Joomla 3.x.
На вашем сайте может не хватать каких-то иконок. Это вероятно, если была выпущена новая версия шрифта FontAwesome , или если дизайнер добавил только те иконки, которые используются в демонстрационной версии шаблона.
Подключитесь к серверу используя клиент FTP или откройте Файловый менеджер панели управления хостингом (cPanel file manager ) и найдите файл templates/themeXXX/css/template.css .
Найдите последний из кодов для иконок FontAwesome в template.css. После него нужно добавить новые иконки, например иконку fa-comments:
Теперь откройте файл templates/themeXXX/less /font-awesome/font-awesome.css , найдите последний элемент списка иконок из файла template.css в файле, который Вы открыли. Скопируйте весь код под этой иконкой (в нашем случае это fa-comments) и вставьте этот код в конец файла template.css.
Сохраните внесённые изменения. Теперь Вы можете видеть, что иконки отображаются на вашем сайте:
В случае, если по каким-то причинам файл font-awesome.css отсутствует в вашем шаблоне, откройте файл на Официальном сайте FontAwesome и скопируйте код из файла maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css в конец template.css.
От автора: приветствую Вас уважаемые читатели. В данной статье мы с Вами поговорим о маленькой, но в то же время полезной детали любого хорошего сайта, иконке для CMS Joomla – favicon. Вы узнаете как добавить faviconна сайте, а так же изменить уже существующий.
Для тех, кто не знает favicon – это маленький значок (иконка) сайта, который отображается веб-браузером во вкладке непосредственно перед заголовком сайта, или если быть более точным, перед содержимым тега title. То есть по большому счету это изображение определенного формата и размера с расширением ico.
При этом согласитесь, что правильно подобранный favicon, придает сайту уникальности и неповторимости, а так же быстро запоминается пользователями. Поисковые системы, формируя список поисковой выдачи (список с результатами поиска), так же отображают favicon, перед заголовком сайта.
А значит, первое, что бросится в глаза пользователю, это как раз иконка – значок сайта, соответственно, даже не стоит говорить о том, что если пользователь увидит среди них знакомую – это подтолкнёт его на посещение сайта. Поэтому вопрос, как поменять фавикон в joomla 3, достаточно популярен среди новичков и далее я постараюсь привести подробный ответ.
Для обеспечения кроссбраузерности, создавая favicon, как правило, выбирают формат изображения ico, потому как он поддерживается абсолютно всеми браузерами. Хотя сейчас современные браузеры поддерживают такие форматы как PNG и GIF, а Mozilla FireFox еще и JPEG, а также Анимированный GIF. Но, так или иначе, встречаются пользователи, которые используют устаревшие версии веб-браузеров, поэтому на мой взгляд, стоит все же использовать общепринятый формат ico.
Определившись с форматом, давайте выясним размер изображения, которое может использоваться в качестве значка сайта. Здесь все просто, размер favicon довольно “стандартен” и составляет 16х16 пикселей, если необходимо обеспечить максимальную кроссбраузерность. При этом для различных мобильных устройств и их специфических браузеров, можно использовать значки размером 32×32, 96×96 и даже 192×192 пикселей.
Теперь давайте поговорим о том, как установить фавикон на сайт Joomla. Но, так как иконки пока у нас нет, давайте ее создадим. Наиболее удобный способ создания — это использование on-line генераторов, так как тем самым Вы избавляете себя от установки дополнительного программного обеспечения, и как правило, данные сервисы вместе с созданными иконками предлагают скопировать код, который необходим для отображения значка.
Один из популярнейших сервисов по созданию иконок favicon, в данное время – это генератор favicon.ru, который мы с Вами и используем в данной статье. Так же довольно неплохой генератор favicon-generator (favicon-generator.org), который вместо одной иконки, создает целый архив в котором сгенерированы значки различных размеров. Соответственно для каждого размера, так же приводится код подключения.
Для создания favicon, выберем следующее изображение.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Теперь достаточно загрузить выбранное изображение, с помощью специальной формы и по большому счету генерация будет завершена.
После загрузки изображения, выбираем интересующую область, из которой будет сформирована иконка и нажимаем“Далее”.
После генерации, Вы можете увидеть пример отображения нового favicon в браузере и если вид Вас устраивает, кликаете по кнопке “Скачать favicon”, для скачивания файла. Таким образом, иконка готова.
Фавикон в джумле – располагается в корне каталога активного шаблона. К примеру, для шаблона Beez3, это папка — templates\beez3. А значит, скачанный файл достаточно поместить в указанную папку, тем самым заменив стандартный значок, и обновить информацию в браузере. Код, который отображает favicon в браузере, генерируется непосредственно движком Joomla, поэтому в ручную, его прописывать не нужно. Кому интересно уточню, что данный код формируется по адресу \libraries\joomla\document\html, в файле html.php. Для отображения иконки, в ядре Joomla предусмотрен специальный метод, под названием addFavicon(), который и вызывается в выше указанном файле.
Теперь, Вы знаете как поменять favicon в joomla 3, единственное хотел бы, так сказать для общего развития, привести код, для отображения иконки – дляслучая, если Вам нужно будет прописывать его вручную.
Дополнительной идентификацией вашего сайта Joomla, может стать уникальная иконка или favicon. Favicon на сайте Joomla будет отражаться в браузерах в названии вкладок и сделанных закладках вместе со всеми страницами вашего сайта. По умолчанию все сайты управляемые CMS Joomla имеют одинаковые стандартные иконки. Отличаются только иконка для видимой части сайта Joomla и для административной панели. Иконку для части сайта, которую видят посетители, можно легко поменять.
Нужно ли менять иконку (favicon ) сайта Joomla
Замена иконки своего сайта влияет только на субъективную составляющую оптимизации сайта. Посетитель, сделав закладку страницы сайта, может потом легко ее найти в списке всех своих закладок. Кроме этого иконка сайта отражается в поиске и в прикладных инструментах. например, в списке сайтов в Яндекс веб-мастер.
Кроме этого, заменив стандартную иконку Joomla, вы прекратите афишировать, что ваш сайт управляется Joomla, а это один из шагов повышающих безопасность сайта .
Требования к новой иконке Joomla
Слово Favicon это сокращение от двух английских слов, favorites и icon . Для иконок Joomla есть свой стандарт. Их размер должен быть 16×16 или 32×32 пикселей. Сделан favicon , должен быть в 256 цветовой гамме. И главное, формат иконки Joomla должен быть favicon .ico .
Шаги по замене иконки (favicon ) сайта Joomla
Замена иконки сайта Joomla осуществляется в несколько простых шагов:
- Сгенерировать уникальную иконку из любого фото формата PNG или JPEG . Или нарисовать иконку самостоятельно, использую online сервисы или фото программы;
- Сделать из картинки favicon формат ico, размер 16(32)×16(32) px;
- Закачать новую иконку, в каталог сайта, удалив при этом все старые favicon ;
- Вставить специальный код в шаблон главной страницы своего сайта.
Разберем каждый шаг подробно.
Шаг 1. Создание иконки для сайта Joomla
В интернет есть много online инструментов, для генерации иконки в формате favicon .ico из любой фотографии. Здесь обратить внимание нужно на следующее.
Если вы хотите, чтобы ваш favicon был без белого фона, то его источником должно быть с прозрачным фоном при создании и в формате PNG при сохранении . Используя фото форматов отличных от png вы получите Favicon с белым или черным фоном. Отличные хранилища иконок в интернете вы найдете в верхнем меню этого сайта в пункте: Инструменты веб-мастера.
Генераторы favicon вы также можете найти самостоятельно, вписав в окне поиска: генератор favicon .Здесь приведу адреса генераторов иконок.
- pr-cy.ru/favicon
- tools.dynamicdrive.com/favicon
- iconfinder.com
- freepik.com/free-icons
- genericons.com
- flaticons.net
- iconbird.com
- iconizer.net
- webhostinghub.com
- iconspedia.com
- iconsearch.ru
- icons8.com
- glyphicons.com
- findicons.com
- icomoon.io
- iconarchive.com
- themify.me
- thenounproject.com
- flaticon.com
Делаются иконки Favicon следующим образом
- Заранее находите оригинальную картинку для своей будущей иконки;
- Открываете генератор;
- В окне загрузчика генератора выбираете свою иконку на компьютере. Выбираете размеры будущей иконки, для Joomla 16×16 пикселей;
- Нажимаете кнопку, типа «Сделать».
- Favicon генерируется за считанные секунды. Далее остается только скачать ее на свой компьютер. Для этого есть своя кнопка «Download ».Иконка на компьютере, нужно закачать ее в каталог.
Шаг 2. Закачать новую иконку в каталог сайта
С местом в каталоге сайта, куда нужно закачать новую иконку (favicon ) сайта ситуация следующая.
Раньше обязательным местом для размещения favicon .ico был корневой каталог сайта. Сейчас ситуация немного смягчилась. Использование динамических шаблонов позволяет закачивать иконку в любой каталог своего сайта, только в коде (ниже) нужно четко прописывать путь до этого каталога. Но при этом нужно помнить, чем дальше иконка от корня сайта, тем дольше она будет загружаться в браузере. А за скорость загрузки сайта нужно бороться, даже в мелочах.
class="eliadunit">
Поэтому советую загрузить основной favicon в корень сайта Joomla . Для загрузки понадобиться FTP клиент или авторизация в административной панели на хостинге. Перед загрузкой новой иконки (favicon ) проверьте все папки сайта и удалите или переименуйте старые favicon , которые возможно были установлены в загруженных вами шаблонах. Отдельно проверьте папку с вашим шаблоном . Из подпапок шаблона уберите файл favicon.ico. После того, как удалили старые favicon загружайте новый в корень сайта. Favicon в каталоге сайта, остается вставить код в шаблон главной страницы сайта.
Примечание: На этом этапе иконка сайта может уже поменяться. В некоторых шаблонах код для показа иконки (о коде ниже) уже прописан в шаблоне сайта и поэтому при замене иконки в каталоге она может поменяться и в закладке браузера. Только чтобы это увидеть нужно очистить кэш сайта и, может быть, перегрузить браузер.
Шаг 3. Вставляем код в шаблон сайта для отображения иконки favicon
Примечание: Этот способ устарел, в основных браузерах новая иконка отображается без вставки этого кода. Достаточно удалить все старые фавиконы из корня сайта и из шаблона. а также очистить кэш браузера и сайта.
Код (ниже) вставляется в шаблон главной страницы сайта Joomla между тегами
(пример ниже). В интернет вы можете найти несколько вариантов кодов (favicon ),для сайтов Joomla . Приведу пример только тех кодов, которые работают на всех моих сайтах Joomla .Код первый . Иконка появляется практически моментально, после очистки кеша сайта.
Код второй . Из-за отсутствия показа браузеру типа элеммента формы (type) эта иконка появляется в браузере через 1-2 суток.
Код третий. Для иконки(favicon) размещенного не в корневом каталоге (patch-to это путь до папки с favicon).
- Работают коды и с таким написанием SHORTCUT ICON , и с такимshortcut icon
- Если код вашего сайта HTML ,а не XHTML ,то заканчивать код нужно " >" ,а не "/>"
Если вам нужно отображение иконки в браузере IE ,попробуйте добавить такой код:
После вставки кода в шаблон не забывайте сохраниться, также очистите кэш сайта.
- Административная панель >>>Сайт>>>Обслуживание>>>Очистить весь кэш (для версий Joomla 1.7-2.5-3.х)
- Административная панель>>>Инструменты >>>Очистить весь кэш (для версии 1.5)
Пример вставленного кода для отображения иконки сайта:
Одним из способов увеличения привлекательности сайта является добавление к пунктам меню иконок. Иконки – это маленькие картинки, которые ассоциируются с содержимым пункта меню. Польза от них заключается в том, что они привлекают внимание пользователей и делают их более лояльными по отношению к сайту. В этой статье я расскажу про два способа добавления иконок к пунктам меню: быстрый, легкий, но плохой, а также сложный, долгий, но хороший..
Joomla . Шаг 1. Выбор размера иконок.
Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:
- Иконка должна подходить по размерам к тексту.
- Иконка должна иметь прозрачный фон или фон, аналогичный тому, на котором расположено меню.
- Иконка должна иметь небольшой размер файла (не быть «тяжелой»).
Самый распространенный размер иконки в Интернете 16х16 пикселей, поскольку именно такого размера должны быть фавиконы сайтов (маленькая картинка, располагающаяся перед адресной строкой в браузере).
Вот пример такой иконки:
Для сайта сайт я выберу именно этот размер.
Добавление иконок пунктам меню Joomla . Шаг 2. Поиск подходящих иконок.
Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.
Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.
Для того чтобы в поиске отображались только иконки нужного размера, задаем настройки:
Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру:-) .
Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.
Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.
Добавление иконок пунктам меню Joomla . Шаг 3. Привязка иконок. Простой способ.
После того, как иконки подобраны, можно начинать привязывать их к пунктам меню на сайте. Я расскажу про два способа. Первым будет привязка через настройку пункта меню, опция «Изображение ссылки»:
Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:
Открытие главной страницы сайта просто насилует браузер и компьютер пользователя.
Добавление иконок пунктам меню Joomla . Шаг 3. Привязка иконок. Хороший способ.
Хороший способ заключается в использовании CSS-спрайтов. Их суть в том, что все иконки размещаются на одной картинке, а обращение к ним происходит с помощью CSS. Благодаря такому подходу браузер пользователя загружает только одну картинку и соответственно время загрузки страницы уменьшается. Плохая новость – добавление иконок пунктам меню с помощью CSS-спрайта – задача гораздо более сложная, чем способ, описанный выше. Хорошая новость – в настоящее время существуют сервисы, значительно упрощающие создание спрайтов.
Давайте разберемся, как создать спрайт.
Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug . Что получилось, можете посмотреть на этом сайте слева.
Главным недостатком спрайтов является сложность обновления оных. Так, например, если у вас появится даже один новый пункт меню, которому нужно добавить иконку, спрайт придется создавать заново.
Хоть я и назвал способы создания иконок для пунктов меню Joomla простым и хорошим, нельзя однозначно сказать, какой из них лучше. У каждого способа есть свои достоинства и недостатки. Если иконок немного или они часто меняются, то лучше использовать первый способ. Если же иконок много, и они остаются постоянными, как и пункты меню, к которым они привязаны, то однозначно, нужно использовать спрайты.
Вконтакте