Модуль Simple Contact для контактов Joomla - добавляем удобства пользователям
Опубликовано: 01.09.2018
Приветствую на блоге, друзья! Сегодня пост-урок для настоящих джумловодов, а также для тех, кто только собирается примерить на себя это звание (надеюсь, что и с моей скромной помощью).
В прошлый раз, если помните, мы с вами создали страницу контактов Joomla , сегодня же продолжим тему осуществления обратной связи с нашими пользователями и создадим модуль быстрого контакта.
Что это за зверь? Да просто форма в боковой панели сайта, которая выводится на всех его страницах и позволяет быстро отправить сообщение администрации сайта, вам то есть, без необходимости искать в меню страницу обратной связи.
Устанавливаем Skype статус на сайт Joomla CMS
В дефолтном шаблоне Beez_20 такая форма быстрой связи будет выглядеть вот так: 
Впрочем, при легком вмешательстве в код модуля можно получить совсем другой, куда более приятный глазу результат. Однако вначале мы научимся устанавливать и настраивать модуль быстрого контакта, а про изменение его внешнего вида поговорим во второй части урока.
Comfortable Reading Premium - Плагин WordPress для слабовидящих пользователей
Модуль «Быстрый контакт» Joomla
Начнем с того, что в исходной комплектации Joomla этого модуля нет. Однако мы не отчаиваемся и скачиваем его либо на просторах интернета, поскольку, к моему удивлению, в официальном репозитории его не оказалось, либо у меня по прямой ссылке .
Раздобытый вами архив разархивировать не нужно, просто сохраните его куда-нибудь в удобное место, чтобы потом быстро указать к нему путь при установке. Я обычно такие файлы кидаю в специальную папочку прямо в корне диска.
Об установке расширений Joomla я уже подробно писала, поэтому сейчас просто приведу вам конкретный алгоритм по установке и настройке модуля «Быстрый контакт»:
Идем в «Расширения» — «Менеджер расширений» в админке сайта, выбираем наш файл, кликнув по «Обзор», и соглашаемся с установкой, нажав «Загрузить и установить».
Модуль легкий, загрузка и установка занимает всего несколько секунд, по прошествии которых вы получите сообщение об удачной установке
Теперь отправляемся в «Расширения» — «Менеджер модулей» и видим в списке всех модулей наш Simple Contact: 
Чтобы перейти к его настройкам, нажимаем на название и попадаем на страницу редактирования параметров этого модуля: 
Изменяем название формы быстрой связи (1), которое, кстати, можно и скрыть (2), но делать этого я вам не советую, чтобы не заставлять пользователя угадывать, с какой целью он должен ввести в эту форму свое имя и почтовый адрес, выбираем позицию, в которой модуль будет располагаться на сайте (3) (напоминаю, что все доступные позиции шаблона вы можете посмотреть, набрав в адресной строке такую комбинацию: имя_сайта/?tp=1 ? предварительно, конечно, нужно разрешить это действо в общих настройках вашего шаблона) и не забываем выставить состояние «Опубликовано» (4)
Прокручиваем страницу настроек до конца и в поле «Привязка к пунктам меню» выбираем «На всех страницах»: 
ну или можете выбрать страницы, на которых вы этот модуль хотите показывать, или с которых по каким-то причинам нужно его убрать
Обращаем взор в правую часть окна. Здесь нужно просто перевести текст разных служебных сообщений и надписей в форме быстрого контакта. Я сделала свой перевод, чтобы незнакомые с главным буржуинским языком мои читатели могли на него ориентироваться:
Сохраняем сделанные настройки и с удивлением обнаруживаем у себя на сайте форму быстрого контакта!
Выглядит, конечно, неказисто, поэтому сейчас мы с вами попробуем придать ей более пристойный внешний вид.
Настраиваем внешний вид модуля «Быстрый контакт»
Знание 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-Кошка!