Установка модуля поиска в 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}

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий