Модуль Simple Contact для контактов Joomla - добавляем удобства пользователям

Опубликовано: 01.09.2018

видео Модуль Simple Contact для контактов Joomla - добавляем удобства пользователям

Плагин календарь для wordpress

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



В прошлый раз, если помните, мы с вами создали страницу контактов 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-Кошка!

rss