Простой и хороший способы. Добавление иконок пунктам меню Joomla

Привет читателям)

В данной статье, мы рассмотрим вставку соц-иконок на Ваш Joomla-сайт .

Соц-иконки нужны для того, чтобы пользователь мог поделится вашей статьей или ссылкой на сайт через социальные сети.

Для начала давайте зайдем на сайт share42.com/ru .

Данный сайт позволяет сгенерировать скрипт и внешний вид иконок.

Шаг 1 - Выбрать размер и отметить нужные иконки:

Выбираем размер иконок (32x32, 24x24, 16x16 пикселя). По умолчанию стоит 32х32 px.

Выбираем нужные нам сети (просто кликаем по значкам, можно перетаскивать, чтобы выставить нужный порядок)

Шаг 2 - Настройка:

выбираем тип панели с иконками: горизонтальная, вертикальная(плавающая);
ограничиваем количество видимых иконок (доступно при выборе типа - вертикальная);
кодировка сайта, для joomlaэто UTF-8;
добавлять или не добавлять иконку сайта share42 (на Ваше усмотрение);
ссылка на RSS, доступно, если ранее была отмечена иконка RSS;
включение JQuery, ставится для счетчика публикаций;
после проделанных действий мы можем посмотреть на примере, как будет выглядеть наш блок иконок и скачать готовый скрипт.

Следующие - это установка скрипта на Ваш сайт.

После того, как скачали архив со скриптом, нужно разархивировать папку share42 в корень сайта.

В пункте №4 - "Выберите наиболее подходящий тип сайта" выбираем "Любой сайт".

Теперь копируем код:

Вместо site.name указываем домен вашего сайта. И вставляем его в исходный код шаблона или в модуль типа "HTML".

Для оформления панели иконок используем предложенный css-код:

#share42 {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}

#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}

#share42 a {opacity: 0.5}

#share42:hover a {opacity: 0.7}

#share42 a:hover {opacity: 1}

Его вставляем в любой css-файл Вашего сайта.

Дополнительные параметры для настройки:

Параметр	Описание	Пример использования

	заголовок страницы

data-description	описание к странице
	путь к папке с файлом иконок icons.png
Параметры для вертикальной панели
	расстояние от начала страницы до панели, в пикселях
	расстояние от верха видимой области страницы до панели, в пикселях
	смещение панели по горизонтали, в пикселях (отрицательно значение - влево, положительное значение - вправо)

Вот примерно так должно получится:

На этом все, Удачи)

P.S Если что-то не понятно, пишите комментарии.

/ 2008-09 Joomla! Community Magazine

В этой статье я покажу вам простой способ добавления нового параметра к Типу Меню (Menu Type), который позволит Вам добавлять кастомное изображение к названию статьи на вашем Joomla! сайте. Данный метод похож на использование «Суффикса Класса Страницы» и «Суффикса Класса Модуля» для индивидуального оформления контента связанного с определенным меню или модулем. Я же выбрал метод, описываемый ниже, вместо «Суффикса Класса Страницы», потому что суффикс оказывает влияние не на один определенный параметр, а на связанные элементы страницы. В этом простом примере я просто хочу добавить один параметр к одному элементу на странице — Названиe Статьи.

1. Для начала создадим данные для примера.

Давайте создадим типовые данные, для использования в процессе работы:

Создайте «Раздел» под названием «Статьи». Далее, создайте три Категории. Для этих категорий мы расширим юзабилити, добавляя соответствующее изображение к каждой статье в категории.

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

2. Добавим новый параметр к XML «Тип Меню»

Перейдите в корневую директорию вашего сайта на Joomla! и следуйте к папке «tmpl» согласно этого пути — components/com_content/views/category/tmpl.

Откройте blog.xml и добавьте параметр, приведенный ниже, сразу после строки обозначенной тегом . Сделайте то же самое для default.xml файла.

Важное примечание: В данном примере параметр «description» начинается с новой строки. При введении кода в xml-файл обязательно проследите, чтобы весь код был в одной строке без каких-либо переносов строк.

3. Создаем кастомный шаблон (Template Overrides)

В Joomla! 1.5, мы имеем замечательную возможность создавать собственные шаблоны для замены стандартных шаблонов вывода контента представленных в ядре по умолчанию. Кастомные шаблоны (Template Overrides) очень удобны и просты в использовании. Сначала, мы копируем файлы разметки из основных компонентов в папку «html» в папке нашего шаблона. Далее, мы делаем изменения. Когда Joomla! находит файлы пользовательской разметки в вашей папке templates/ваш_шаблон/html/, она использует ваши файлы, и «игнорирует» файлы разметки в ядре.

Чтобы это сделать войдите в /templates/ваш_шаблон/ паку. Создайте новую паку и назовите ее «html». В папке html, создайте новую директорию и назовите ее «com_content». Если в вашем шаблоне уже есть директории «html» или «com_content», то вам повезло и создавать их не надо.

В папке «com_content», создайте две папки; одну назовите «article», а другую назовите «category».

Например:

/templates/rhuk_milkyway/html/com_content/category /templates/rhuk_milkyway/html/com_content/article

Теперь скопируйте (не перемещать!!!) файлы разметки в ядре — components/com_content/views/category/tmpl/blog_item.php файл в /templates/ваш_шаблон/html/com_content/category

Примечание: если этот файл уже существует, лучше не переписывать это. Вы можете продолжить выполнять действия, приведенные в примере, используя имеющийся файл.

Опять скопируйте (не перемещать!!!) components/com_content/views/article/tmpl/default.php в /templates/ваш_шаблон/html/com_content/article

Добавляем элементы оформления для вывода иконок в файле разметки

Откройте /templates/ваш_шаблон/html/com_content/category/blog_item.php файл для редактирования.

item->params->get("pageclass_sfx"); ?>" width="100%">

class=»contentpagetitle»>

»>

Теперь откройте недавно скопированный /templates/ваш_шаблон/html/com_content/article/default.php файл.

Вы увидите код, приведенный ниже, кроме тех строк, которые выделены красным, они и являются теми элементами, которые мы добавим и затем сохраним этот файл.

params->get("pageclass_sfx"); ?>" width="100%">

class=»contentpagetitle»>

»>

4. Добавляем стили CSS и картинки

Хорошо, мы подготовили базовые элементы шаблона Joomla, а теперь перейдем к дизайнерской части данного урока.

Первое, что нам нужно сделать — это подобрать иконки для вышеупомянутых категорий (FAQ, Медиа, Книги). Для этого можно использовать иконки из набора silk icon set , они уже имеют желаемый размер (16px), файлы в PNG-32 с прозрачностью и, конечно же, бесплатны.

Я выбрал три приведенные ниже. Вы можете просто скопировать эти картинки и поместить в /templates/ваш_шаблон/images.

Теперь открывайте ваш основной CSS-файл шаблона (обычно template.css) /templates/ваш_шаблон/css/template.css и добавляйте следующий CSS код:

background: url(../images/info.png) no-repeat 0px 5px;

background: url(../images/photo.png) no-repeat 0px 5px;

background: url(../images/book_open.png) no-repeat 0px 5px;

Назначаем стили для пункта меню (Menu Item)

В коде, приведенном выше, мы можем увидеть названия нужных классов (то есть, faq, media, book). Это и есть те параметры, которые вы теперь сможете использовать, для ввода в менеджере меню.

Для того чтобы это сделать, сначала войдите в панель администрирования Joomla! и создайте новый Пункт Меню, используя «Блог — содержимое категории» в качестве вывода содержимого.

В параметрах пункта меню справа, вы увидите вкладку «Расширенные», где Вы увидите новый параметр, названный «Article Icon Class». Вы можете ввести в это поле одно из трех значений: faq, media, или book. После того как вы сохраните свой новый пункт меню, просмотрите Блог Категории фронтенда вашего Joomla! сайта и выберите новый пункт меню. Как только вы «доберетесь» к статье, вы увидите новый вариант вывода названия с иконкой.

Если Вы хотите изменить существующие параметры или добавить больше, все, что Вы должны сделать, добавить новый класс CSS, как показано в примере выше. Надеюсь, вы будете применять этот способ в своих шаблонах. Наслаждайтесь Joomla!

Из этого туториала Вы узнаете, как использовать изображения вместо текста для элементов меню в Joomla.

Существует несколько способов добавления значков в меню:

Добавление изображений в меню, используя Менеджер Меню

Стандартный модуль Joomla для работы с меню позволит Вам заменить названия пунктов меню на изображения:

Добавление изображений, используя код CSS

Второй способ основывается на добавлении класса css изображения в файл (где ### — это номер вашего шаблона). Некоторые модули меню для Joomla, такие как модуль IceMegaMenu, не позволят Вам добавить изображение для элемента меню в админ панели. Вы можете добавить изображение, используя код css:

Используя фоновое изображение в коде 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 .

Проверьте ваш сайт для просмотра изменений.

Теперь Вы знаете, как использовать изображения вместо текста в элементах меню в Joomla.

Этот туториал покажет Вам, как добавить недостающие иконки 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)

Пример вставленного кода для отображения иконки сайта: