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

В данной статье, мы рассмотрим вставку соц-иконок на Ваш 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 Если что-то не понятно, пишите комментарии.

Из этого туториала Вы узнаете, как использовать изображения вместо текста для элементов меню в 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.

Favicon это некий значок сайта. Его можно увидеть во вкладках браузера, вот пример четырёх популярных сайтов. У каждого из них имеется своя картинка фавикон.

Так же поисковая система Яндекс, выводит фавикон рядом, с заголовком страницы.

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

Создание favicon с помощью онлайн генератора

Для начала необходимо подготовить картинку, размером 16 на 16 пикселей. Это стандартный размер favicon. Для этого можно использовать логотип сайта или понравившееся изображение. Чтобы подогнать необходимый размер, можно воспользоваться программой "Paint", или какой то другой сторонней программой.

Обратите внимание, при сжатии картинки в 16 на 16 пикселей. Размеры сторон оригинала должны быть одинаковы. Допустим 243 на 243 пикселя. Иначе при сжатии, получится размытость и без того маленькой картинки.

Далее воспользуемся онлайн генератором создания favicon. Пройдя по этой ссылке favicon.ru На главной странице, в пункте "Сделать favicon из изображения". Выберите на компьютере, заранее подготовленную картинку размером 16 на 16 пикселей.

Следующий шаг "редактировать картинку". Здесь жмём "Сохранить пропорции" и "далее".

Теперь наш favicon готов. Остаётся посмотреть как он выглядит в браузере и скачать его. Так же при желании, можно подредактировать изображение. Или создать его с нуля.

Скачанный favicon, имеет нужный формат (.ico) и название favicon. Менять ни чего не надо. Остаётся только установить его на сайт.

Установка favicon на joomla 3

Первый и более простой способ установки, это замена родного фавикона. В большинстве шаблонов joomla, уже имеется favicon, его просто надо поменять на подготовленный нами фавикон.

Для этого нужно зайти в корень сайта. Далее в папку "templates", найти папку с шаблоном который стоит по умолчанию. У меня это родной шаблон "Beez3", и поменять имеющийся там favicon, на созданный нами.

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

Но сразу ждать favicon в выдаче Яндекса, не стоит. Она появится после того как специальный бот проиндексирует вашу картинку и переведёт в формат jpg. На это может потребоваться более месяца.

Проверить проиндексировал Яндекс ваш фавикон или нет, можно набрав в браузере: http://favicon.yandex..ru", впишите доменное имя вашего сайта.

Для гугла: http:// www.google.com/s2/favicons?domain=сайт

Если первый способ установки не помог и favicon не отобразился на вашем сайте, то можно установить его, прописав необходимый код в файле index.php.

Второй способ установки favicon на joomla 3

Для того чтобы установить картинку, необходимо поместить подготовленный нами favicon, в корень сайта.

Далее, зайти в папку с шаблоном, который стоит по умолчанию: templates / шаблон по умолчанию . Найти и открыть файл index.php, с помощью блокнота notepad++. В этом документе, между открывающим тегом , и закрывающим тегом ввести вот такой код:

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

От автора: приветствую Вас уважаемые читатели. В данной статье мы с Вами поговорим о маленькой, но в то же время полезной детали любого хорошего сайта, иконке для 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, единственное хотел бы, так сказать для общего развития, привести код, для отображения иконки – дляслучая, если Вам нужно будет прописывать его вручную.