Тест S5 Box

Вот примерно так работает модуль в реале...

Установка модуля поиска в header сайта Jomla

Header logo

Всем привет! Сегодня хотел бы по рассуждать немного на тему установки модулей Joomla в позиции отличающиеся от стандартных.

При создании сайтов в Joomla захотелось не выбирать готовые позиции для модулей, а взять и например "засунуть" модуль поиска на шапку сайта (так собственно и реализовано на данном сайте). Пока место для строки поиска по сайту я выбрал именно в шапке сайта, так как есть свободное место и это окно обязательно должно бросаться в глаза, ведь посещая страницы интернета очень не удобно если найти поиск на сайте долго не удается.

Нам для этого потребуется:

1. Плагин для Firefox - Firebug 1.5, скачать его можно свободно в интернете, либо открыв терминал и выполнив команду(для меня предпочтительней):

# sudo apt-get install firebug

Firebug позволяет просматривать код страницы интернет, что нам будет необходимо в дальнейшем. На других браузерах я не искал подобного плагина, так как Mazilla Firefox мой выбор еще с "давних времен", так что все что будет описано ниже, все делалось в этом браузере.

2. Html редактор - в ОС Windows пользуюсь notepad++ в Ubuntu выбор пал на Bluefish 1.0.7(Устанавливается в Центре плиложений Ubuntu). Специальный редактор необходим для подсветки кода, что для нас очень важно.

3. Ну и конечно же готовый шаблон, с которым мы будем работать. То что мы сделаем будет работать исключительно с данным шаблоном, так что Вы должны быть уверены в том, что данный шаблон Вы менять не будете.

Добавляем позицию

Основные элементы шаблона(позиции, файлы, изображения и т.д.) описываются в файле /Ваш сайт/www/templates/Ваш шаблон/templateDetails.xml. Открываем его редактором, находим <positions> и чуть ниже добавляем позицию <position>searchinheader</position>. Сохраняем.

Добавляем модуль Поиска

В Панели администрирования Joomla находим вкладку "Расширения" -> "Менеджер модулей". Выбираем модуль поиска -> нажимаем далее. В появившемся меню указываем заголовок и выбираем созданную позицию searchinheader. Больше я не стал ничего трогать. Далее расскажу почему...

Ставим галочку Включен. Пока еще ничего на сайте мы не увидим, так как позицию то мы с модулем создали, но не указали, где эта самая позицыя будет выводиться.

Указываем где будет отображаться наш модуль

Для этого нам и нужен плагин Firebug. Подробно об использовании Firebug рассказывать не имеет смысла, так как это тема отдельной статьи, скажу лишь, что с этим плагином установив курсор на любом месте страницы сайта, нажав ПКМ и выбрав анализировать элемент, вам откроется html код страницы, а справа покажет стили. Программистам разобраться с этим не будет ни какого труда.

Итак с помощью Firebug выесняем, что шапка сайта закодированна как <div class="art-header">. Идем в /Ваш сайт/www/templates/Ваш шаблон/index.php открываем и ищем строчку где указывается вывод шапки сайта. У меня это строчка <div class="art-header"> и вставляем после нее контейнер div который будет вызывать позицию прямо на шапку сайта:

<div class="search" align="right">

<jdoc:include type="modules" name="searchinheader" />

</div>

Клас search - так в Joomla запрограммирован по умолчанию модуль поиска.

Параметр align - задает выравнивание по правому краю(мне захотелось, чтобы окно поиска было справа).

jdoc:include - вызывает модуль и позицию.  

Сохранив мы, наконец, можем увидеть, что окошко поиска находится на шапке, однако оно располагается не там где бы мы хотели. Для этого существуют файлы со стилями (*.css) в которых содержится описание всего, что мы видим на страницах интернета.

Установка Поиска в нужном месте Шапки сайта 

Находим файлы со стилями /Ваш сайт/www/templates/Ваш шаблон/css/template.css. Добавить хочется вот что, template.css используют браузеры firefox, opera, chrome и др. Template.ie6.css и Template.ie7.css соответственно internet explorer 6 и internet explorer 7. Изменения мы делаем в template.css, это значит что для всех браузеров кроме internet explorer 6 и 7.

Открываем в редакторе template.css, находим div.search input и в конец ' модуля' добавляем 3 параметра:

  • position: relative; - положение элемента устанавливается относительно его исходного места ;
  • top: -10px; - отступ от верхнего края шапки;
  • right: 30px; - отступ от правого края шапки.
В вашем случае позиция будет описана не так как у меня. Поэксперементировав со значениями Вы обязательно найдете нужную позицию для Вас.

Лично у меня получилось так, как на скриншоте:

Окно поиска в шапке сайта

Если вы захотите включить у модуля кнопку поиска, то нужно будет в template.css добавить и позицию для кнопки.

Но как это сделать уже ваша задача скажу только что аналогично тому что мы сделали выше.

УДАЧИ !{odnaknopka}

Последние комментарии

Теги ...

Опрос: iOS или Android ?

Какой ОС вы чаще пользуетесь?

iOS - 0%
Android - 60%
Windows Mobile - 20%
Tizen - 0%
Другая. - 20%

Всего голосов: 5
Голосование в этом опросе закончено в: 01 Янв 2017 - 00:00
Яндекс.Метрика Анализ сайта Рейтинг@Mail.ru