Перейти к содержимому


Вопрос По Переделу Дизайна


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 76

#1 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 18 Ноябрь 2013 - 14:02

Здравствуйте!

Есть ряд вопросов.

1. Переместить корзину см. рис.1
2. переместить строку поиска см. рис.2, а так же сделать значок поиска меньше.
3. переместить блок ПРЕДЛОЖЕНИЯ И АКЦИИ - после блока ИГРУШКИ
4. Убрать белую полоску
5. Поднять каталог товаров до уровня зеленой полосы
6. Поднять слайдер , банеры, строка просмтора выше до уровня каталога товаров

Прикрепленные изображения

  • вопрос.jpg


#2 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 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 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 22 Ноябрь 2013 - 10:06

Спасибо изменения произвели.

Как поднять слайдер и банеры к каталогу?

#4 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 22 Ноябрь 2013 - 13:54

Находим
#mainindex {
float: left;
width: 512px;
}

Заменяем на

#mainindex {
float: left;
width: 512px;
margin-top: -12px;
}


#5 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 29 Ноябрь 2013 - 15:23

Добрый день, есть вопрос касаемо дизайна.

См. приложение

Так же по этому дополнительный вопрос.

Чтобы была возможность для клиента указать вид мероприятия указано во вкладке).
Так же по времени прибытия (см. картинку).
и по дате так же необходимо вставить календарь (см. картинку)

Прикрепленные изображения

  • pr1.jpg
  • pr2.jpg
  • pr3.jpg
  • pr4.jpg
  • pr5.jpg


#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 234 сообщений

Отправлено 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%;
}

Проверьте ее только обязательно,в  плане, что в письме будет приходить

#7 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 06 Декабрь 2013 - 12:23

Спасибо, все получилось.

Но необходимо подкорректировать. Спасибо

Прикрепленные изображения

  • проблема.jpg


#8 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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>


#9 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 06 Декабрь 2013 - 13:03

Спасибо за оперативность.

Есть еще вопрос. Необходимо добавить банер, как показано на картинке.

Прикрепленные изображения

  • проблема.jpg


#10 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 06 Декабрь 2013 - 13:46

Остановился на этапе Связь с администрацией.

Не могу найти строчку - <divid="feedbackForm"class="zakaz"> ...

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 234 сообщений

Отправлено 07 Декабрь 2013 - 01:03

Немного перепутали, данная строка находится в файле Страница

#13 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 09 Декабрь 2013 - 09:37

Спасибо все сделал.


Теперь собственно необходимо банер ЦЕНА сделать активным. То есть что бы по нему кликали и переходили на другую страничку с ценами. Страничку создал.

Прикрепленные изображения

  • 900.png


#14 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 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 ne_yana

ne_yana

    Активный участник

  • Модератоpы
  • 1 190 сообщений

Отправлено 09 Декабрь 2013 - 12:02

Просмотр сообщенияDr.Nemo (09 Декабрь 2013 - 09:37) писал:

Спасибо все сделал.


Теперь собственно необходимо банер ЦЕНА сделать активным. То есть что бы по нему кликали и переходили на другую страничку с ценами. Страничку создал.
Здравствуйте, в файле main.css замените
.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 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 09 Декабрь 2013 - 12:11

Спасибо!!!

#17 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 10 Декабрь 2013 - 09:28

Добрый день.

Существует проблема.


При выборе товаров в частности Карнавальные костюмы есть проблема в отображении повторных значков Корзины.

Вместо фразы Купить сейчас - нужно оставить только значок корзины.

Прикрепленные изображения

  • 11.jpg
  • 22.jpg


#18 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 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}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">Купить сейчас</a>
				 <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</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}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">nbsp;</a>
				 <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>
				 </div>

данная манипуляция уберет надпись "купить сейчас"

#19 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 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}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">Купить сейчас</a>
					<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</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}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">&nbsp;</a>
					<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">&nbsp;</a>
строки 93 и 94

Затем найдите код -
{% IF goods.MAX_REST_VALUE=0 %}
				<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>
			  {% ENDIF %}
и замените на -
{% IF goods.MAX_REST_VALUE=0 %}
				<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">&nbsp;</a>
			  {% ENDIF %}
строки 98 и 100

#20 Dr.Nemo

Dr.Nemo

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 440 сообщений

Отправлено 10 Декабрь 2013 - 12:48

Сделал как написали. Но проблема осталась.

Два значка корзины.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных