Gerti (09 Декабрь 2015 - 08:51) писал:
Спасибо, все получилось
только как бы сократить форму до представьтесь, телефон и комментарий ? и переставить кнопку под "поиск "
А саму кнопку сделать овальную как и остальные кнопки на сайте и в цвет сайта сине-голубой .
и еще в самой форме кнопку отправить как можно сделать так же в цвет остальных кнопок сине-голубой?
Здравствуйте! Перед внесением изменений, создайте бэкап.
В редакторе шаблонов, найдите шаблон
"Обратный звонок"
Удалите блок кода
<tr>
<td><label for="callback_region">Область</label></td>
<td><input id="callback_region" type="text" name="form[callback_region]" value="{FORM_CALLBACK_REGION}" maxlength="255" class="inputText"/></td>
</tr>
<tr>
<td><label for="callback_address">Адрес</label></td>
<td><input id="callback_address" type="text" name="form[callback_address]" value="{FORM_CALLBACK_ADDRESS}" maxlength="255" class="inputText"/></td>
</tr>
<tr>
<td><label for="callback_city">Город</label></td>
<td><input id="callback_city" type="text" name="form[callback_city]" value="{FORM_CALLBACK_CITY}" maxlength="255" class="inputText"/></td>
</tr>
<tr>
<td><label for="callback_zip_code">Почтовый индекс</label></td>
<td><input id="callback_zip_code" type="text" name="form[callback_zip_code]" value="{FORM_CALLBACK_ZIP_CODE}" maxlength="255" class="inputText"/></td>
</tr>
<tr>
<td><label for="callback_country">Страна</label></td>
<td><input id="callback_country" type="text" name="form[callback_country]" value="{FORM_callback_country}" maxlength="255" class="inputText"/></td>
</tr>
<tr style="display:none;">
<td><label for="callback_convenient_date">Удобная дата доставки dd.mm.yyyy</label></td>
<td><input id="callback_convenient_date" type="text" name="form[callback_convenient_date]" value="{FORM_CALLBACK_CONVENIENT_DATE}" maxlength="255" class="inputText"/></td>
</tr>
<tr style="display:none;">
<td><label for="callback_convenient_hour_from">Удобное время доставки</label></td>
<td>
С: <input id="callback_convenient_hour_from" type="text" name="form[callback_convenient_hour_from]" value="{FORM_CALLBACK_CONVENIENT_HOUR_FROM}" maxlength="255" class="inputText"/>
По: <input id="callback_convenient_hour_to" type="text" name="form[callback_convenient_hour_to]" value="{FORM_CALLBACK_CONVENIENT_HOUR_TO}" maxlength="255" class="inputText"/>
</td>
</tr>
<tr>
<td><label for="callback_email">Email</label></td>
<td><input id="callback_email" type="text" name="form[callback_email]" value="{FORM_CALLBACK_EMAIL}" maxlength="255" class="inputText"/></td>
</tr>
<tr>
<td><label for="coupon_code">Код купона на скидку</label></td>
<td><input id="coupon_code" type="text" name="form[coupon_code]" value="{FORM_COUPON_CODE}" maxlength="255" class="inputText"/></td>
</tr>
<tr>
<td><label for="callback_floor">Этаж</label></td>
<td><input id="callback_floor" type="text" name="form[этаж]" value="{FORM_ЭТАЖ}" maxlength="255" class="inputText"/></td>
</tr>
Затем в этом же шаблоне найдите строку
{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
замените на
{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button" style="background: #3cabda;">Отправить</button>{% ENDIF %}
Далее в шаблоне
html удалите строки (это уберет полосы прокрутки у формы обратного звонка и изменит оформление самой кнопки)
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать обратный звонок</a>
<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
затем перед строками
</div>
</div>
</div>
</div>
<!-- /END Основная часть Шапки -->
вставьте
<div class="obratni-zvonok"> <a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать обратный звонок</a>
<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script></div>
Затем, в самый конец шаблона
main.css добавьте код:
.obratni-zvonok {
float: right;
background: #3cabda;
border-radius: 24px;
color: #FFF;
padding: 12px 30px 12px 30px;
margin-top: -45px;
}
.obratni-zvonok a {
color: #FFF;
font-size: 116.7%;
}
Кнопка сейчас корректно отображается на компьютерах. Уточните, пожалуйста, как она должна выглядеть с планшета, и в мобильной версии.
0
