Как Сделать Фиксированные Фотографии Товара В Каталоге?
#1
Отправлено 21 Март 2014 - 13:56
Подскажите, пожалуйста, как сделать так, чтобы фото всех товаров в каталоге, отображении на главной в "популярных" и т.п. было фиксированным и не зависело от фактического размера загруженной картинки (то есть показывалась, к примеру всегда центральная область главного изображения товара, а размер был стандартный - 200х200 пикселей или около того). Таким образом хочу упорядочить дизайн и одновременно не зависеть от того, какую картинку залили с новым товаром.
Спасибо!
З.Ы.: поиск по форуму ответов не дал
#2
Отправлено 22 Март 2014 - 03:50
#category_view_type.grid_view #product_list .product_image_wrapper { background: none repeat scroll 0 0 #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1); padding: 8px; position: relative; }измените на:
#category_view_type.grid_view #product_list .product_image_wrapper { background: none repeat scroll 0 0 #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1); height: 200px; padding: 8px; position: relative; width: 200px; }далее найдите:
#category_view_type.grid_view #product_list a.product_img_link { border: 0 none; float: none; margin: 0; }замените на:
#category_view_type.grid_view #product_list a.product_img_link { border: 0 none; display: table-cell; float: none; height: 200px; margin: 0; position: relative; vertical-align: middle; width: 200px; }
#3
Отправлено 22 Март 2014 - 10:21
1) если фото вертикальная была, не обрезает (см. скрин 1);
2) На главной в каруселях товаров по-прежнему не равняет (см. скрин 2)
(сайт http://led-vologda.ru/)
#4
Отправлено 22 Март 2014 - 15:23
ganser-id (22 Март 2014 - 10:21) писал:
1) если фото вертикальная была, не обрезает (см. скрин 1);
2) На главной в каруселях товаров по-прежнему не равняет (см. скрин 2)
(сайт http://led-vologda.ru/)
1) В шаблоне style.css найдите код:
#category_view_type.grid_view #product_list .product_image_wrapper { background: none repeat scroll 0 0 #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1); height: 200px; padding: 8px; position: relative; width: 200px; }
и замените его на:
#category_view_type.grid_view #product_list .product_image_wrapper { background: none repeat scroll 0 0 #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1); height: 200px; padding: 8px; position: relative; width: 200px; overflow:hidden; }
2) В этом же шаблоне допишите строки:
.autumnshowcase_block li { height: 150px; overflow:hidden; }
#5
Отправлено 22 Март 2014 - 16:44
#6
Отправлено 22 Март 2014 - 16:48
ganser-id (22 Март 2014 - 16:44) писал:
Тогда код из второго пункта удалите и попробуйте этот:
.autumnshowcase_block .image_link { height: 150px; overflow:hidden; display:block; }
#7
Отправлено 22 Март 2014 - 19:09
Всегда считал, что у нас лучшая поддержка!
#8
Отправлено 23 Март 2014 - 18:30
С удовольствием тоже воспользовался этой инструкцией, сайт стал в разы аккуратнее выглядеть.
Прошу и мне помочь со следующими вещами:
(Мой аккаунт SL-8589)
1. Из-за того, что название товара часто не помещается в одну строчку кнопка "быстрый заказ" тоже немного пляшет.
Для аккуратности хотелось бы их выравнять. (скрин прикрепил)
2. В связи с моими многочисленными переделками и опытами, сайт на андройд-смартфоне стал открываться некорректно. Найти причину сам не смогу.
3. Не могу нажать на красную кнопку "оформить заказ" - окошко исчезает. (скрин прикрепил)
#9
Отправлено 23 Март 2014 - 20:42
LordDiatez (23 Март 2014 - 18:30) писал:
С удовольствием тоже воспользовался этой инструкцией, сайт стал в разы аккуратнее выглядеть.
Прошу и мне помочь со следующими вещами:
(Мой аккаунт SL-8589)
1. Из-за того, что название товара часто не помещается в одну строчку кнопка "быстрый заказ" тоже немного пляшет.
Для аккуратности хотелось бы их выравнять. (скрин прикрепил)
2. В связи с моими многочисленными переделками и опытами, сайт на андройд-смартфоне стал открываться некорректно. Найти причину сам не смогу.
3. Не могу нажать на красную кнопку "оформить заказ" - окошко исчезает. (скрин прикрепил)
1. в файле style.css найдите строчку
#category_view_type.grid_view #product_list .product_list_details_left h5{padding:12px 0 5px 0;font-size:14px;font-weight:400;}замените на
#category_view_type.grid_view #product_list .product_list_details_left h5{padding:12px 0 5px 0;font-size:14px;font-weight:400;height: 40px;}
2. уточните какие элементы на телефоне смотрятся некореектно
3. найдите строчку
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:86px;замените на
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:68px;
#10
Отправлено 25 Март 2014 - 01:00
support 2.0 (23 Март 2014 - 20:42) писал:
При просмотре через андройд-телефон: Появилась ненужная прокрутка "вправо-влево" часы работы, которые я указал лучше бы под логотипом показывались. Также контактные телефоны хочу вернуть под логотип.
Я так понимаю, это из-за того, что я "контакты" перенес в шапку, по какой-то прочитанной на форуме инструкции.
Еще задачки:
4. Не всегда есть возможность загрузить изображение товара в большом разрешении, из-за этого лупа (увеличение, при наводке на изображение) дублирует маленькое изображение. Поэтому лупу хочу оставить только для изображений, которые имеют от 600px по горизонтали или от 600px по вертикали.
5. "ctrl-a" и выделение строчек мышкой хочется сделать классическим цветом - синим, а не красным.
6. В меню: наведение курсором на позиции каталога чтобы подсвечивало (закрашивало) соответствующее поле голубым цветом.
7. В меню: красные крестики для выплывающего подменю поменять на синие.
8. В меню: цвет шрифта раскрывающегося подменю сделать серым.
9. В меню: открытая категория чтобы писалась жирным шрифтом.
10. Кнопки "быстрый заказ" и "добавить в корзину" сделать зелеными, а не красными.
#11
Отправлено 25 Март 2014 - 09:34
5.
найдите в файле main.css код
::selection{color:#fafafa;background:#da3b44}
замените его на
::selection{color:#fafafa;background: #496CC4;}
6.
в конце файла main.css добавьте код
.accordion a:hover { background: rgb(145, 185, 223); }
7.
для этого найдите в разделе изображения файл sprites.png, загрузите его на компьютер, поменяйте цвет плюса, загрузите обратно под таким же именем.
8.
для этого найдите код
.accordion ul a, .accordion_main ul a {font-size:11px; padding:8px 10px 8px 10px;}замените его на
.accordion ul a, .accordion_main ul a {font-size:11px; padding:8px 10px 8px 10px;color: rgb(167, 167, 167);}
10.
найдите код
быстрый заказ
.add_to_cart_ph{display:block;background-color:#da3b44;background-image:url('http://design.newball.ru/cart_white.png');background-repeat:no-repeat;background-position:13px 50%; color:#fafafa!important;line-height:35px;height:35px;padding:9px 16px 9px 46px;*padding:0px 16px 9px 46px;border:1px solid #a40f18;cursor:pointer;font-weight:700;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2)}измените его на
.add_to_cart_ph{display:block;background-color: #509231;background-image:url('http://design.newball.ru/cart_white.png');background-repeat:no-repeat;background-position:13px 50%; color:#fafafa!important;line-height:35px;height:35px;padding:9px 16px 9px 46px;*padding:0px 16px 9px 46px;border:1px solid #a40f18;cursor:pointer;font-weight:700;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2)}
корзина
найдите
.add_to_cart{display:block;background-color:#da3b44;background-image:url('http://design.newball.ru/cart_white.png');background-repeat:no-repeat;background-position:13px 50%; color:#fafafa!important;height:35px;padding:0 16px 0 46px;*padding:0 6px 0 36px;border:1px solid #a40f18;*border: none;cursor:pointer;font-weight:700;line-height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:2px; -moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2)}замените на
.add_to_cart{display:block;background-color: #509231;background-image:url('http://design.newball.ru/cart_white.png');background-repeat:no-repeat;background-position:13px 50%; color:#fafafa!important;height:35px;padding:0 16px 0 46px;*padding:0 6px 0 36px;border:1px solid #a40f18;*border: none;cursor:pointer;font-weight:700;line-height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:2px; -moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2)}
#13
Отправлено 26 Март 2014 - 01:51
Castiel (25 Март 2014 - 10:08) писал:
.selected { color: red; }
Напишите все необходимые стили в данном блоке
Я не понял. Мне б код готовый.
Может я неправильно объяснил.
Мне надо: чтобы активная категория товаров именно в меню писалась жирным шрифтом.
задача 11:
на главной странице: увеличить отступ по вертикали на 50px между кнопкой "быстрый заказ" и надписью "популярные товары". (SL-8589)
ПС: спасибо всем, кто помогает...
#14
Отправлено 26 Март 2014 - 02:45
.accordion_main a.selected{ font: bold 14px arial !important; }2. Найдите:
.autumnshowcase_block .title_block { border-bottom: 1px dotted #C0C0C0; margin-bottom: 20px; padding-bottom: 16px; }замените на:
.autumnshowcase_block .title_block { border-bottom: 1px dotted #C0C0C0; margin-bottom: 20px; margin-top: 40px; padding-bottom: 16px; }
#15
Отправлено 26 Март 2014 - 21:50
Vaccina (26 Март 2014 - 02:45) писал:
.accordion_main a.selected{ font: bold 14px arial !important; }2. Найдите:
.autumnshowcase_block .title_block { border-bottom: 1px dotted #C0C0C0; margin-bottom: 20px; padding-bottom: 16px; }замените на:
.autumnshowcase_block .title_block { border-bottom: 1px dotted #C0C0C0; margin-bottom: 20px; margin-top: 40px; padding-bottom: 16px; }
1. добавил, эффекта нет.
2. спасибо, то что надо.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных