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


Новая документация

Настройка платежных систем
Настройка способа оплаты КупиВкредит
Настройка способа оплаты Acquiro
Настройка способа оплаты AvisoSMS

Обновленная документация 

Разработчикам (API)
Руководство пользователя

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

Для начала настроим стили для элементов формы. Данные стили настраиваются в файле стилей 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 – 2011 © Amiro.CMS Все права защищены.