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


Банер С Рамкой


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

#1 L.V

L.V

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

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

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

Добрый день! Уважаемые модераторы Обращаюсь к вас с просьбой помочь в моем не легком деле .Нужно установить банеры и сделать единую рамку для раздела новинки на главной (у меня переименован в скидки недели)
Все это должно выглядеть как  монолитная композиция
Банеры (их три по правой части) должны отправлять на нужную страницу .

Большое вам спасибо за внимание к  моему вопросу.

не обязательно делать все точно как на скрине  это просто пример(если есть темы реализации буду в двойне признательна)



                                                                     Безымянный.png

#2 miyako

miyako

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

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

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

Просмотр сообщенияL.V (08 Декабрь 2013 - 11:59) писал:

Добрый день! Уважаемые модераторы Обращаюсь к вас с просьбой помочь в моем не легком деле .Нужно установить банеры и сделать единую рамку для раздела новинки на главной (у меня переименован в скидки недели)
Все это должно выглядеть как  монолитная композиция
Банеры (их три по правой части) должны отправлять на нужную страницу .

Большое вам спасибо за внимание к  моему вопросу.

не обязательно делать все точно как на скрине  это просто пример(если есть темы реализации буду в двойне признательна)



Прикрепленный файл Безымянный.png

Найдите код в шаблоне HTML -

<!-- Всевозможные списки товаров -->
		 {% IF index_page %}
			 <!-- Список новинок на главной -->
			 {% IFNOT index_page_new_goods_empty %}
			
			 <h3><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3>
			 <table >
				 <tr>
				 {% FOR index_page_new_goods %}
				 <td class="goodsListItem">
					 <div class="goodsListItemBlock withBorder cornerAll">
					 <div class="goodsListItemImage"><a href="{index_page_new_goods.URL}"><img class="goods-image-small" src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a></div>
					 <h3 class="goodsListItemName"><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h3>
					 <a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a>
					 {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %}
						 <br /><a href="{index_page_new_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
						 {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
						 <br /><a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
						 {% ENDIF %}
					 </div>
								
					 </td>
				 {% IFNOT index_page_new_goods.last %}{index_page_new_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
				 {% ENDFOR index_page_new_goods %}
				 </tr>
			 </table>	
			
			 {% ENDIF %}	
			 <!-- end Список новинок на главной -->
и замените на -
<!-- Всевозможные списки товаров -->
		 {% IF index_page %}
			 <!-- Список новинок на главной -->
			 {% IFNOT index_page_new_goods_empty %}
			
			 <h3><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3>
			 <table id="borderBanner">
				 <tr>
				 {% FOR index_page_new_goods %}
				 <td class="goodsListItem">
					 <div class="goodsListItemBlock withBorder cornerAll">
					 <div class="goodsListItemImage"><a href="{index_page_new_goods.URL}"><img class="goods-image-small" src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a></div>
					 <h3 class="goodsListItemName"><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h3>
					 <a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a>
					 {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %}
						 <br /><a href="{index_page_new_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
						 {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
						 <br /><a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
						 {% ENDIF %}
					 </div>
					 {% IF index_page_new_goods.last %}
					 <div id="blockBanner">
					
					 <div class="blockBanid"><a href="адрес ссылки 1">Скидка!</a></div>
						 <div class="blockBanid"><a href="адрес ссылки 2">Доставка!</a></div>
						 <div class="blockBanid"><a href="адрес ссылки 3">Выгодно!</a></div>
				 </div>
				 {% ENDIF %}				
					 </td>
				 {% IFNOT index_page_new_goods.last %}{index_page_new_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
				 {% ENDFOR index_page_new_goods %}
				 </tr>
			 </table>	
			
			 {% ENDIF %}	
			 <!-- end Список новинок на главной -->

В конец main.css добавьте -
#borderBanner {background:#BE9E4C;z-index:1;}
#borderBanner .goodsListItem div{background:#fff;}
#blockBanner {position:absolute;top:50px;right:-300px;z-index:999;}
#borderBanner .goodsListItem {position:relative;overflow: inherit !important;}
.blockBanid{height:30px;width:300px;text-align:center;margin:0 auto;vertical-align:middle;border: 1px solid #BE9E4C;}
.blockBanid a{color: #BE9E4C;font-size:20px;}

Результат на скриншоте

Не забудьте в коде указать ссылки на страницы.

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

  • банеры и новинки.png


#3 L.V

L.V

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

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

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

Огромное спасибо!
я немного изменила как нужно теперь нужно добавить еще один банер и небольшое описание только в этот товар как сделать?  и с обводкой беда ни как не могу сделать тоньше в товаре и проявить в банерах

                                    Безымянный.png

#4 Vaccina

Vaccina

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

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

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

Изменений на данный момент у вас не увидела.
На счет добавления баннера, как вариант после:
<div id="blockBanner">
									   
										 <div class="blockBanid"><a href="адрес ссылки 1">Скидка!</a></div>
												 <div class="blockBanid"><a href="адрес ссылки 2">Доставка!</a></div>
												 <div class="blockBanid"><a href="адрес ссылки 3">Выгодно!</a></div>
								 </div>
Вставить:

<div id="blockBanner2">
										<div class="blockBanid"><a href="адрес ссылки 1">Скидка!</a></div>
								 </div>
и простилизовать также как описано выше, только изменить значение стиля right:-300px




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

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