Из этого туториала Вы узнаете, как использовать изображения вместо текста для элементов меню в Joomla.
Существует несколько способов добавления значков в меню:
Добавление изображений в меню, используя Менеджер Меню
Стандартный модуль Joomla для работы с меню позволит Вам заменить названия пунктов меню на изображения:
Добавление изображений, используя код CSS
Второй способ основывается на добавлении класса css изображения в файл (где ### — это номер вашего шаблона). Некоторые модули меню для Joomla, такие как модуль IceMegaMenu, не позволят Вам добавить изображение для элемента меню в админ панели. Вы можете добавить изображение, используя код css:
Используя значки FontAwesome :
Исследуйте ваш сайт, используя Инструмент разработчика, для того чтобы найти пользовательский класс css.
Внесите изменения в файл templates/theme###/css/templates.css (где ### — это номер вашего шаблона).
Код CSS, который нужно добавить в файл, как правило, выглядит следующим образом:
#iceMenu_101 .iceMenuTitle:before { font-family: FontAwesome !important; content: "###" !important; font-size: 45px !important; top: 20px !important; position: relative !important; display: inline-block !important; line-height: 45px !important; height: 90px !important; } #iceMenu_101 .iceMenuTitle { font:0/0 a !important; }
Где ### — это класс значка FontAwesome . Список доступных значков можно найти на сайте FontAwesome .
Проверьте ваш сайт для просмотра изменений.
Используя фоновое изображение в коде css:
Теперь Вы знаете, как использовать изображения вместо текста в элементах меню в Joomla.
Изменение фавикона Вашего веб-сайта - это относительно легкая задача.
- Создайте изображение размером 16x16 пикселей. Вы можете для этого использовать какой-либо графический редактор, например, Photoshop , Gimp , Paint.net или Windows Paint . Альтернативно, Вы также можете использовать инструменты, находящиеся в интернете, такие как http://antifavicon.com .
- Конвертируйте [созданное Вами изображение] в формат ico , используя один из ниже приведенных бесплатных сайтов:
- Созданный Вами таким образом файл будет иметь расширение.ico. Скопируйте этот файл в директорию /joomla/templates/<Вашего шаблона> и назовите его favicon.ico .
- Откройте какой-либо браузер. Вы видите свою новую иконку? Если да, то поздравляем. Если нет, то это не обязательно значит что Вы сделали что-либо неправильно. Браузеры спроектированы сводить траффик данных до минимума, так что они не обновляют фавикон при каждом показе веб-страницы. Даже обновление веб-страницы (F5) не поможет. Так что Вам нужно освежить [веб-страницу] более тщательно:
- [Для браузеров] Mozilla / Firefox / Safari : нажмите и удерживайте внизу клавишу Shift, щелкая в то же самое время на "Освежить" или нажмите на Ctrl-Shift-R (Cmd-Shift-R для Apple Mac);
- IE : удерживайте [клавишу] Ctrl, одновременно щелкая на "Освежить", или нажмите Ctrl-F5;
- Konqueror : просто щелкните на кнопку "Освежить" или нажмите [на клавишу] F5;
- Opera : пользователям возможно придется [провести] полную очистку кэша в Инструменты→Предпочтения.
- Chrome : Shift-F5
- Если это не сработает, то Вам будет нужно удалить временные файлы интернета и историю, а затем снова открыть свою веб-страницу.
Мой фавикон хранится в другом месте
Некоторые шаблоны содержат код, который перенаправляет браузер на другую директорию или другой файл фавикона. Для того чтобы определить, где должен храниться Ваш новый фавикон, исследуйте http://yoursite.com/templates/Ваш_шаблон/index.php и поищите код, содержащий текст
< link rel = "shortcut icon" href = "http://Вашсайт.com/templates/Ваш_шаблон/icon/favicon.ico" />
Если Вы не желаете просто изменить файл favicon.ico в директории соответствующего шаблона, то Вы можете найти упоминание файла favicon.ico в документе html.php . Путь к нему: "........\libraries\joomla\document\html\html.php" . Это предотвратит переключение этой иконки [на другую] когда Вы будете использовать
< link rel = "shortcut icon" href = "http://Вашсайт.com/templates/Ваш_шаблон/icon/youricon.ico" />
в html коде шаблона и [если] Вы не удалили [старый] файл favicon.ico (зачем вызывать эту иконку дважды?).
// Try to find a favicon by checking the template and root folder $path = $directory . DS ; $dirs = array ( $path , JPATH_BASE . DS ); foreach ($dirs as $dir ) { $icon = $dir . "favicon.ico" ; if (file_exists ( $icon )) { $path = str_replace ( JPATH_BASE . DS , "" , $dir ); $path = str_replace ( "\\" , "/" , $path ); $this -> addFavicon ( JURI :: base (true ) . "/" . $path . "favicon.ico" ); break ; ""
В этой статье рассмотрим, как вставить иконки в пункты меню сайта 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.
Дополнительной идентификацией вашего сайта 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)
Пример вставленного кода для отображения иконки сайта:
