Быстросвязь, или Создаем модуль быстрого контакта Joomla — Simple Contact

Приветствую на блоге, друзья! Сегодня пост-урок для настоящих джумловодов, а также для тех, кто только собирается примерить на себя это звание (надеюсь, что и с моей скромной помощью).

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

Что это за зверь? Да просто форма в боковой панели сайта, которая выводится на всех его страницах и позволяет быстро отправить сообщение администрации сайта, вам то есть, без необходимости искать в меню страницу обратной связи.

В дефолтном шаблоне Beez_20 такая форма быстрой связи будет выглядеть вот так:

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

Модуль «Быстрый контакт» Joomla

Начнем с того, что в исходной комплектации Joomla этого модуля нет. Однако мы не отчаиваемся и скачиваем его либо на просторах интернета, поскольку, к моему удивлению, в официальном репозитории его не оказалось, либо у меня по прямой ссылке.

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

Об установке расширений Joomla я уже подробно писала, поэтому сейчас просто приведу вам конкретный алгоритм по установке и настройке модуля «Быстрый контакт»:

1. Идем в «Расширения» — «Менеджер расширений» в админке сайта, выбираем наш файл, кликнув по «Обзор», и соглашаемся с установкой, нажав «Загрузить и установить».  Модуль легкий, загрузка и установка занимает всего несколько секунд, по прошествии которых вы получите сообщение об удачной установке
2. Теперь отправляемся в «Расширения» — «Менеджер модулей» и видим в списке всех модулей наш Simple Contact:
3. Чтобы перейти к его настройкам, нажимаем на название и попадаем на страницу редактирования параметров этого модуля:
4. Изменяем название формы быстрой связи (1), которое, кстати, можно и скрыть (2), но делать этого я вам не советую, чтобы не заставлять пользователя угадывать, с какой целью он должен ввести в эту форму свое имя и почтовый адрес, выбираем позицию, в которой модуль будет располагаться на сайте (3) (напоминаю, что все доступные позиции шаблона вы можете посмотреть, набрав в адресной строке такую комбинацию: имя_сайта/?tp=1? предварительно, конечно, нужно разрешить это действо в общих настройках вашего шаблона) и не забываем выставить состояние «Опубликовано» (4)
5. Прокручиваем страницу настроек до конца и в поле «Привязка к пунктам меню» выбираем «На всех страницах»:  ну или можете выбрать страницы, на которых вы этот модуль хотите показывать, или с которых по каким-то причинам нужно его убрать
6. Обращаем взор в правую часть окна. Здесь нужно просто перевести текст разных служебных сообщений и надписей в форме быстрого контакта. Я сделала свой перевод, чтобы незнакомые с главным буржуинским языком мои читатели могли на него ориентироваться:
7. Сохраняем сделанные настройки и с удивлением обнаруживаем у себя на сайте форму быстрого контакта!

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

Настраиваем внешний вид модуля «Быстрый контакт»

Знание css — все-таки великая сила! Любой элемент на сайте можно преобразить как вашей душе заблагорассудится, дописав несколько простых строк кода. В самом ближайшем будущем я планирую опубликовать обзорный урок по CSS, изучив который, вы сможете управлять внешним видом своего сайта, так что если интересно, можете подписаться на обновления блога.

А пока я немножко поэкспериментировала с кодом модуля и стилями, и в итоге получила вот такой внешний вид:

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

Итак, прежде всего я немножко подредактировала файл mod_simplecontact.php, который расположен по адресу: имя_сайта\www\modules\mod_simplecontact, а именно строки с 51-ой по 66-ую:

Если на скрине непонятно, поясню: фразу «contactInput required validate-email» в 56 строке я заменила на «email» для краткости, а также в четырех строках заменила «class» на «id«:

• в 55 строке «class=»contactInput» изменился на «id=»contactInput«;
• в 56 строке «class=»email» — на «id=»email«;
• в 59 строке «class=»contactTextarea» на «id=»contactTextarea«;
• в 62 строке «class=»contactButton» на «id=»contactButton«

К сожалению, мой плагин для отображения кода отказался исправно работать с этим фрагментом, поэтому не могу оформить код по-человечески.

Теперь находим файл стилей вашего шаблона, обычно их бывает несколько, и все они хранятся в папке \templates\название_шаблона\css. Так вот из всех имеющихся там выбираем какой-нибудь вроде general.css или personal.css.

Открываем его на редактирование и после самого последнего знака } с новой строчки вставляем вот такой код:

#contactForm {
background-color: #098BDC /*цвет фона для формы*/
}
#contactInput, #email, #contactTextarea {
margin: 5px; /*отступы для полей ввода имени, email и текста сообщения от границ формы*/
background-color: #DBEAF9; /*цвет фона полей ввода*/
}
 #contactButton {
 margin: 10px; /*отступ для кнопки "Отправить"*/
 background-color: #98EAF9; /*цвет ее фона*/
 color: #114677; /*цвет самой надписи "Отправить"*/
 border: 1px solid #114677; /*толщина, вид (сплошная) и цвет рамки кнопки*/
 border-radius: 2px; /*радиус скругления углов кнопки*/
 }

Все стили, которые я использовала, имеют комментарии — какая строчка за что отвечает, так что вы можете изменить и цвета, и отступы, добавить свои стили — главное, принцип я показала. Надеюсь, кому-то пригодится!

Кстати, а вы знаете, как узнать код нужного цвета? Если у вас установлен Фотошоп, то все элементарно: открываете палитру и выбираете нужный цвет, а в окошечке внизу видите его код, который можно скопировать и использовать где угодно:

Есть и специальные утилиты, и расширения для браузеров, которые позволяют определить код цвета в любой точке экрана, но о них как-нибудь в другой раз, хорошо?

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

А в следующий раз, друзья, мы поговорим о том, какими способами можно вставить аудио и видео на страницы нашего Joomla-сайта! Так что дружно соглашаемся с моим настойчивым предложением подписаться на обновления блога, и я вам обязательно сообщу, когда придумаюнакорябаюопубликую эту статью на страницах моего любимого блога.

За сим смею попрощаться! С вами была всегда ваша пушистая Web-Кошка!