Вопрос По Переделу Дизайна
#1
Отправлено 18 Ноябрь 2013 - 14:02
Есть ряд вопросов.
1. Переместить корзину см. рис.1
2. переместить строку поиска см. рис.2, а так же сделать значок поиска меньше.
3. переместить блок ПРЕДЛОЖЕНИЯ И АКЦИИ - после блока ИГРУШКИ
4. Убрать белую полоску
5. Поднять каталог товаров до уровня зеленой полосы
6. Поднять слайдер , банеры, строка просмтора выше до уровня каталога товаров
#2
Отправлено 21 Ноябрь 2013 - 16:21
Dr.Nemo (18 Ноябрь 2013 - 14:02) писал:
Есть ряд вопросов.
1. Переместить корзину см. рис.1
2. переместить строку поиска см. рис.2, а так же сделать значок поиска меньше.
3. переместить блок ПРЕДЛОЖЕНИЯ И АКЦИИ - после блока ИГРУШКИ
4. Убрать белую полоску
Решение 1,2,3,4 вопроса
Редактируем main.css
Находим
.cartInfo { width: 188px; position: relative; float: right; top: 40px; height: 58px; margin-bottom: -90px; left: -0px; }
.share42init { display: block; margin-left: 165px; position: absolute; top:144px; }
span.my4 { color: #00A3FF; display: block; float: left; font-size: 18px; margin-left: 161px; margin-top: -31px; text-align: center; }
.search { background: none repeat scroll 0 0 white; border: 1px solid #8A8686; border-radius: 50px 50px 50px 50px; float: left; height: 27px; left: 40%; margin: 48px 0 12px; padding: 8px 0 8px 7px; width: 273px; }
#bottobj { background:url(http://design.malyshland.ru/conteiner-bg.png) 0 -11px no-repeat; width:1000px; height:11px; margin:0 auto; }
#topobj { background:url(http://design.malyshland.ru/conteiner-bg.png) no-repeat; width:1000px; height:11px; margin:10px 0 0 0; }
Заменяем на
.cartInfo { width: 188px; position: relative; float: right; top: -80px; height: 58px; margin-bottom: -90px; left: 270px; }
.share42init { display: block; margin-left: 165px; position: absolute; top: 250px; }
span.my4 { color: #00A3FF; display: block; float: left; font-size: 26px; margin-left: 161px; margin-top: 80px; text-align: center; }
.search { background: none repeat scroll 0 0 white; border: 1px solid #8A8686; border-radius: 50px 50px 50px 50px; float: right; height: 27px; left: 40%; padding: 8px 0 8px 7px; width: 273px; }
#topobj { width: 1000px; height: 11px; margin: 10px 0 0 0; }
#bottobj { width: 1000px; height: 11px; margin: 0 auto; }
Белая полоса в лого убирается путем редактирования логотипа (Эта полоса в самой картинке)
Для того чтобы меню было в одну строку, придется уменьшит размер шрифтов, т.к. у вас большое количество пунктов меню (Можно сделать в одинаковые две строчки все меню)
Меню в одну строку с уменьшением шрифта
Находим
#panelsite { width: 105%; height: 45px; clear: both; padding-top: 27px; }
#panelsite div.centercol .menuheader ul li a { color: #FFFFFF; display: block; font: 12px Verdana,Geneva,sans-serif; padding: 10px 8px; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 6px; background: #3F99EC; color: #FFF; border-bottom: 1px solid #186584;
Заменяем на
#panelsite { width: 110%; height: 45px; clear: both; padding-top: 27px; }
#panelsite div.centercol .menuheader ul li a { color: #FFFFFF; display: block; font: 10px Verdana,Geneva,sans-serif; padding: 10px 4px; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 0px; background: #3F99EC; color: #FFF; border-bottom: 1px solid #186584; }
Меню в две строки
Находим
#panelsite { width: 105%; height: 45px; clear: both; padding-top: 27px; }
#panelsite div.centercol .menuheader ul li a { color: #FFFFFF; display: block; font: 12px Verdana,Geneva,sans-serif; padding: 10px 8px; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 6px; background: #3F99EC; color: #FFF; border-bottom: 1px solid #186584;
Заменяем на
#panelsite { margin: 0; width: 70%; height: 45px; clear: both; padding-top: 27px; }
#panelsite div.centercol .menuheader ul li a { color: #FFFFFF; display: block; font: 12px Verdana,Geneva,sans-serif; padding: 10px 10px; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 0px; background: #3F99EC; color: #FFF; border-bottom: 1px solid #186584; }
#3
Отправлено 22 Ноябрь 2013 - 10:06
Как поднять слайдер и банеры к каталогу?
#4
Отправлено 22 Ноябрь 2013 - 13:54
#mainindex { float: left; width: 512px; }
Заменяем на
#mainindex { float: left; width: 512px; margin-top: -12px; }
#5
Отправлено 29 Ноябрь 2013 - 15:23
См. приложение
Так же по этому дополнительный вопрос.
Чтобы была возможность для клиента указать вид мероприятия указано во вкладке).
Так же по времени прибытия (см. картинку).
и по дате так же необходимо вставить календарь (см. картинку)
#6
Отправлено 06 Декабрь 2013 - 04:37
Далее в разделе Сайт - Редактор шаблонов - Страница - найдите:
<!-- Спидбар сайта-Конец --> <div class="htmlDataBlock"> <div class="article padd"> <div class="text fnt12n"> {PAGE_CONTENT} </div> </div> </div>Вставьте:
{% IF PAGE_NAME=ЗАКАЗ ДЕДА МОРОЗА %} <div id="feedbackForm" class="zakaz"> <form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data"> <input type="hidden" name="hash" value="{HASH}" /> {% IF FORM_SEND_OK %} <h3 class="green">Спасибо за Ваше сообщение! В скором времени мы свяжемся с Вами.</h3> <a href="http://{NET_DOMAIN}/">Перейти на главную</a> {% ELSE %} {% IF FORM_NOTICE %}<h3 class="red">{FORM_NOTICE | nl2br}</h3><br />{% ENDIF %} <label for="feedback_name">ФИО</label> <input id="feedback_name" name="form[feedback_name]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="input required" /><br /><br /> <label for="feedback_phone">Ваш телефон</label> <input id="feedback_phone" name="form[feedback_phone]" class="required"><br /><br /> <label for="feedback_еmail">Email</label> <input id="feedback_еmail" name="form[feedback_email]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="input required email" /><br /><br /> <label for="feedback_date">Дата заказа Деда Мороза</label> <input id="feedback_date" type="date" name="feedback_date" value="" /><br /><br /> <label for="feedback_time">Время прибытия Деда Мороза</label> <input id="feedback_time" type="time" name="feedback_time" value="17:00" /><br /><br /> <label for="feedback_select">Вид мероприятия</label> <select name="feedback_select" id="feedback_select"> <option disabled>Выберите вид мероприятия</option> <option value="t1" selected>Детский праздниу в школе</option> <option value="t2">Детский праздник в садике</option> <option value="t3">Детский праздник ДОМА</option> <option value="t4">Детский праздник</option> <option value="t5">Корпоратив</option> <option value="t6">Другое мероприятие</option> </select><br /><br /> <label for="feedback_adres">Адрес</label> <input id="feedback_adres" name="form[feedback_adres]" class="required"><br /><br /> <label for="feedback_message">Дополнительные пожелания</label> <input id="feedback_message" name="form[feedback_message]" value="{FORM_FEEDBACK_MESSAGE}"><br /><br /> <script> $('#feedbackForm').submit(function() { $(this).find('#feedback_message').val( ' Ваш телефон: ' + $(this).find('#feedback_phone').val() + ' Дата заказа Деда Мороза: ' + $(this).find('#feedback_date').val() + ' Время прибытия Деда Мороза: ' + $(this).find('#feedback_time').val() + ' Вид мероприятия: ' + $(this).find('#feedback_select').val() + ' Адрес: ' + $(this).find('#feedback_adres').val() + ' Дополнительные пожелания: ' + $(this).find('#feedback_message').val() ); return(true); }); </script> <input type="submit" class="button_med" value="Отправить"/> {% ENDIF %} </form> </div> {% ENDIF %}Далее зайдите в шаблон main.css и в самом низу вставьте:
.zakaz input{ background: #FFFFFF; border: 1px solid #ABADB3; color: #9E9E9E; padding: 3px; width: 100%; }
Проверьте ее только обязательно,в плане, что в письме будет приходить
#8
Отправлено 06 Декабрь 2013 - 13:02
Dr.Nemo (06 Декабрь 2013 - 12:23) писал:
Но необходимо подкорректировать. Спасибо
В файле "main.css".
Найти код:
.zakaz input{ background: #FFFFFF; border: 1px solid #ABADB3; color: #9E9E9E; padding: 3px; width: 100%; }Заменить:
.zakaz input{ background: #FFFFFF; border: 1px solid #ABADB3; color: #9E9E9E; padding: 3px; width: 80%; float: left; }
В конец файла "main.css".
Добавить код:
.zakaz label { float: left; width: 100%; padding: 4px 10px; } .zakaz { max-width: 57%; padding-left: 12px; } .zakaz #feedback_select { height: 26px; } .zakaz input[type="submit"] { margin-top: 10px; margin-bottom: 10px; color: red; font-weight: bold; width: 82%; }
И для удаления желтого фона.
В файле "HTML".
Удалить код:
<style> #content { background: #eedd82; } </style>
#10
Отправлено 06 Декабрь 2013 - 13:11
Dr.Nemo (06 Декабрь 2013 - 13:03) писал:
Есть еще вопрос. Необходимо добавить банер, как показано на картинке.
Панель администратора, "Сайт"->"Редактор Шаблонов".
В конец файла "main.css".
Добавить код:
.baner-feedback { display: block; position: relative; height: 30px; top: -50px; margin-bottom: -30px; left: 272px; } .baner-feedback img { max-width: 100%; max-height: 100%; }В файле "Связь с администрацией".
После кода:
<div id="feedbackForm" class="zakaz">Добавить:
<div class="baner-feedback"> <img src="адрес банера"> </div>Вам нужно будет поменять ссылку на банер. Максимальный размер банера по высоте это 30px.
#11
Отправлено 06 Декабрь 2013 - 13:46
Не могу найти строчку - <divid="feedbackForm"class="zakaz"> ...
#12
Отправлено 07 Декабрь 2013 - 01:03
#14
Отправлено 09 Декабрь 2013 - 10:44
Dr.Nemo (09 Декабрь 2013 - 09:37) писал:
Теперь собственно необходимо банер ЦЕНА сделать активным. То есть что бы по нему кликали и переходили на другую страничку с ценами. Страничку создал.
Код -
<div class="baner-feedback"> <img src="адрес банера"> </div>замените на -
<div class="baner-feedback"> <a href="адрес страницы"><img src="адрес банера"></a> </div>
Не забудьте указать адрес нужной страницы
#15
Отправлено 09 Декабрь 2013 - 12:02
Dr.Nemo (09 Декабрь 2013 - 09:37) писал:
Теперь собственно необходимо банер ЦЕНА сделать активным. То есть что бы по нему кликали и переходили на другую страничку с ценами. Страничку создал.
.baner-feedback { display: block; position: relative; height: 30px; top: -50px; margin-bottom: -30px; left: 272px; }на
.baner-feedback { display: block; position: relative; height: 30px; left: 272px; }Если нужно сдвинуть ее правее, то увеличьте значение параметра left.
#16
Отправлено 09 Декабрь 2013 - 12:11
#18
Отправлено 10 Декабрь 2013 - 10:00
<div class="buttons"> {% IF goods.MAX_REST_VALUE>0 %} <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <div> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> <a class="whtgray" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить «{goods.NAME}» в корзину">Купить сейчас</a> <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре «{goods.NAME}»">Подробнее</a> </div>и замените его на
<div class="buttons"> {% IF goods.MAX_REST_VALUE>0 %} <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <div> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> <a class="whtgray" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить «{goods.NAME}» в корзину">nbsp;</a> <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре «{goods.NAME}»">Подробнее</a> </div>
данная манипуляция уберет надпись "купить сейчас"
#19
Отправлено 10 Декабрь 2013 - 10:01
Dr.Nemo (10 Декабрь 2013 - 09:28) писал:
Существует проблема.
При выборе товаров в частности Карнавальные костюмы есть проблема в отображении повторных значков Корзины.
Вместо фразы Купить сейчас - нужно оставить только значок корзины.
Найдите код в шаблоне Поиск -
<a class="whtgray" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить «{goods.NAME}» в корзину">Купить сейчас</a> <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре «{goods.NAME}»">Подробнее</a>и замените на -
<a class="whtgray" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить «{goods.NAME}» в корзину"> </a> <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре «{goods.NAME}»"> </a>строки 93 и 94
Затем найдите код -
{% IF goods.MAX_REST_VALUE=0 %} <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре «{goods.NAME}»">Подробнее</a> {% ENDIF %}и замените на -
{% IF goods.MAX_REST_VALUE=0 %} <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре «{goods.NAME}»"> </a> {% ENDIF %}строки 98 и 100
#20
Отправлено 10 Декабрь 2013 - 12:48
Два значка корзины.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных