Центр документации
Карта сайта

Создай визитку сам!


Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »


Настройка модуля Обратная связь

Для начала настроим стили для элементов формы. Данные стили настраиваются в файле стилей common.css в блоке /* FORM */.

По дизайну текстовые поля имеют рамку шириной 1 px оранжевого цвета (FF4800). Кнопки формы без рамки и без фона. Стиль текста на кнопках: цвет - оранжевый (FF4800), с подчеркиванием, размер шрифта - 12 px, не жирный.

 

Следовательно, в файл стилей common.css изменяем стили следующим образом:

 

/* FORM */

FORM { margin: 0px; }

INPUT { FONT-SIZE:11; BORDER: #FF4800}

INPUT.txt, INPUT.field { BORDER: #FF4800 1px solid; }

INPUT.txt_noborder { BORDER: #FF4800 0px solid; }

INPUT.check { BORDER: 0px; }

INPUT.btn { FONT-SIZE:11px; BACKGROUND: #ffffff; COLOR: #FF4800; FONT-WEIGHT: normal;text-decoration:underline; BORDER: 0px solid; }

SELECT.sel { FONT-SIZE:11; BORDER: #FF4800 1px solid; }

SELECT { FONT-SIZE:11; BORDER: #FF4800 1px solid; }

CHECKBOX.chb{ FONT-SIZE:11; BORDER: #FF4800 1px solid; }

CHECKBOX { FONT-SIZE:11; BORDER: #FF4800 1px solid; }

TEXTAREA.ta { FONT-SIZE:11; BORDER: #FF4800 1px solid; }

/* END FORMS */

 

На сайте получаем следующий результат:

 

Рисунок 50

 

Необходимо сместить кнопки отправки сообщений вправо, это делается в шаблоне

feedback.tpl. Сет, который отвечает за этот блок

 

<!--#set var="form" value="

<script language="javascript">

<!--

function validate_form(cform)

{

##required_script##

var form = cform;

##captcha_script##

return true;

}

//-->

</script>

##--<h2 align="center">%%moreinfo%%</h2>--##

##--<div align="center">%%help%%</div>--##

##--<h3>%%personal%%</h3>--##

<form name = "contact" action="##submitter_link##" method="post" onSubmit="javascript:return validate_form(this);">

<input type=hidden name=modlink value="##script_link##">

<input type="hidden" name="action" value="add">

<table border="0">

##form_fields##

##if(EXTENSION_TWIST_PREVENTION_FEEDBACK)##

<tr>

<td colSpan="4">##captcha_row##</td>

</tr>

##endif##

</table>

##--<h3>%%contact%%</h3>--##

<input type="submit" class=btn value="%%submit_btn%%">

<input type="reset" class=btn value="%%reset_btn%%">

##required_field_legend##

</form>

"-->

<input type="submit" class=btn value="%%submit_btn%%"> - кнопка «отправить»

<input type="reset" class=btn value="%%reset_btn%%"> - кнопка «Очистить»

 

Необходимо заключить эти кнопки в таблицу и задать выравнивание по правому краю

 

<!--#set var="form" value="

<script language="javascript">

<!--

function validate_form(cform)

{

##required_script##

var form = cform;

##captcha_script##

return true;

}

//-->

</script>

##--<h2 align="center">%%moreinfo%%</h2>--##

##--<div align="center">%%help%%</div>--##

##--<h3>%%personal%%</h3>--##

<form name = "contact" action="##submitter_link##" method="post" onSubmit="javascript:return validate_form(this);">

<input type=hidden name=modlink value="##script_link##">

<input type="hidden" name="action" value="add">

<table border="0">

##form_fields##

##if(EXTENSION_TWIST_PREVENTION_FEEDBACK)##

<tr>

<td colSpan="4">##captcha_row##</td>

</tr>

##endif##

</table>

##--<h3>%%contact%%</h3>--##

<table width=60%>

<tr>

<td width=100% align=right>

<input type="submit" class=btn value="%%submit_btn%%"></td>

<td >

<input type="reset" class=btn value="%%reset_btn%%"></td></tr></table>

##required_field_legend##

</form>

"-->

 

На сайте видим результат:

 

Рисунок 51

Версия для печати

Установка и настройка Руководство пользователя Интеграция дизайна Разработчикам (API)
 2000 – 2019 © Amiro.CMS Все права защищены.