Как Прикрутить Картинку К Рамке Товара?
#1
Отправлено 21 Ноябрь 2013 - 22:26
пример картинки
#2
Отправлено 22 Ноябрь 2013 - 02:26
<div class="goodsListItemBlock withBorder cornerAll">
и замените её на
<div class="goodsListItemBlock withBorder cornerAll{% IF goods.MAX_DISCOUNT %} discount{% ENDIF %}"> <div class="goodsListItemBlockIcon"></div>
далее в файле стилей main.css найдите
.goodsListItemBlock { height: 200px; margin: 5px; overflow: hidden; }
и замените на
.goodsListItemBlock { height: 200px; margin: 5px; overflow: hidden; position: relative; }
далее добавьте
.goodsListItemBlockIcon { background: #CFB902; height: 25px; position: absolute; right: 0; top: 0; width: 90px; } .goodsListItemBlockIcon:hover { background: #A7A7A7; } .goodsListItemBlockIcon.discount { background: #CB4242 !important; }
где вместо цветов #CFB902 (при обычном состоянии), #A7A7A7 (при наведении), #CB4242 (при акции) - вам необходимо будет задать изображения в виде адреса url('адрес изображения') (http://htmlbook.ru/css/background). Изображения вы можете загрузить в раздел редактора тем. Изменить положение изображения можно изменив значения метода top и right. Данные свойства можно переопределить например
.goodsListItemBlockIcon.discount { background: #CB4242 !important; top: -5px; }
#3
Отправлено 22 Ноябрь 2013 - 11:02
#4
Отправлено 22 Ноябрь 2013 - 11:25
background: url(images/http://n1046.storeland.net/hes.jpg?7636) #008080 !important;
}
я правильно пишу путь к изображению
#5
Отправлено 22 Ноябрь 2013 - 11:27
L.V (22 Ноябрь 2013 - 11:25) писал:
background: url(images/http://n1046.storeland.net/hes.jpg?7636) #008080 !important;
}
я правильно пишу путь к изображению
Здравствуйте, нужно прописывать следующим образом:
.goodsListItemBlockIcon:hover { background: url('{ASSETS_IMAGES_PATH}hes.jpg') #008080 !important; }
#6
Отправлено 22 Ноябрь 2013 - 14:19
Но что то я делаю не так
.goodsListItemBlockIcon { background: url({ASSETS_IMAGES_PATH}hes.jpg) #008080 !important; height: 25px; position: absolute; right: 0; top: 0; width: 90px; } .goodsListItemBlockIcon:hover { background: url({ASSETS_IMAGES_PATH}ado.jpg) #008080 !important; } .goodsListItemBlockIcon.discount { background: url({ASSETS_IMAGES_PATH}ACCI.jpg) #008080 !important; } }
#7
Отправлено 22 Ноябрь 2013 - 14:31
L.V (22 Ноябрь 2013 - 14:19) писал:
Но что то я делаю не так
.goodsListItemBlockIcon { background: url({ASSETS_IMAGES_PATH}hes.jpg) #008080 !important; height: 25px; position: absolute; right: 0; top: 0; width: 90px; } .goodsListItemBlockIcon:hover { background: url({ASSETS_IMAGES_PATH}ado.jpg) #008080 !important; } .goodsListItemBlockIcon.discount { background: url({ASSETS_IMAGES_PATH}ACCI.jpg) #008080 !important; } }
#8
Отправлено 22 Ноябрь 2013 - 15:17
так же 588 и 593 строка..........
#9
Отправлено 22 Ноябрь 2013 - 18:29
#10
Отправлено 23 Ноябрь 2013 - 00:58
#11
Отправлено 23 Ноябрь 2013 - 11:18
сейчас при движении картинки она встает только обрезается верх обводкой а хочется именно наложение на обводку.
------------------------------------
Появился новый вопрос о подвале
необходимо продлить боковой фон вставив полосу фона вниз +добавить в подвал 2 картинки .
см скрин
#12
Отправлено 26 Ноябрь 2013 - 06:42
На счет подвала в main.css в самом конце пропишите:
#ui-datepicker-div{ display:none !important; }
Картинки вставьте в шаблон HTML после:
Все права защищены <br /> {SETTINGS_STORE_REGION}<br /> {SETTINGS_STORE_HTML_CODE}<br /> {COPYRIGHT_FOR_DESIGN_MOKKO}
#13
Отправлено 28 Ноябрь 2013 - 19:27
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных