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


Как Сделать Фиксированные Фотографии Товара В Каталоге?


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

#1 ganser-id

ganser-id

    Пользователь

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

Отправлено 21 Март 2014 - 13:56

Доброго дня!
Подскажите, пожалуйста, как сделать так, чтобы фото всех товаров в каталоге, отображении на главной в "популярных" и т.п. было фиксированным и не зависело от фактического размера загруженной картинки (то есть показывалась, к примеру всегда центральная область главного изображения товара, а размер был стандартный - 200х200 пикселей или около того). Таким образом хочу упорядочить дизайн и одновременно не зависеть от того, какую картинку залили с новым товаром.
Спасибо!

З.Ы.: поиск по форуму ответов не дал

#2 Vaccina

Vaccina

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

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

Отправлено 22 Март 2014 - 03:50

В 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);
	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 ganser-id

ganser-id

    Пользователь

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

Отправлено 22 Март 2014 - 10:21

Спасибо за оперативность и за верный ход, только есть пара нюансов:

1) если фото вертикальная была, не обрезает (см. скрин 1);
2) На главной в каруселях товаров по-прежнему не равняет (см. скрин 2)

(сайт http://led-vologda.ru/)

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

  • Скрин1.PNG
  • Скрин2.PNG


#4 MikDark

MikDark

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

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

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

ganser-id

    Пользователь

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

Отправлено 22 Март 2014 - 16:44

Спасибо, стало ещё лучше, но с главной по-прежнему не так: дописанными строками обрезается ширина блоков с рекомендуемыми и популярными, а не картинки в них...

#6 MikDark

MikDark

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

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

Отправлено 22 Март 2014 - 16:48

Просмотр сообщенияganser-id (22 Март 2014 - 16:44) писал:

Спасибо, стало ещё лучше, но с главной по-прежнему не так: дописанными строками обрезается ширина блоков с рекомендуемыми и популярными, а не картинки в них...

Тогда код из второго пункта удалите и попробуйте этот:
.autumnshowcase_block .image_link {
height: 150px;
overflow:hidden;
display:block;
}


#7 ganser-id

ganser-id

    Пользователь

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

Отправлено 22 Март 2014 - 19:09

А вот теперь то, что доктор прописал! Огромное спасибо!
Всегда считал, что у нас лучшая поддержка!

#8 LordDiatez

LordDiatez

    Новичок

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

Отправлено 23 Март 2014 - 18:30

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

С удовольствием тоже воспользовался этой инструкцией, сайт стал в разы аккуратнее выглядеть.

Прошу и мне помочь со следующими вещами:
(Мой аккаунт SL-8589)

1. Из-за того, что название товара часто не помещается в одну строчку кнопка "быстрый заказ" тоже немного пляшет.
Для аккуратности хотелось бы их выравнять. (скрин прикрепил)

2. В связи с моими многочисленными переделками и опытами, сайт на андройд-смартфоне стал открываться некорректно. :( Найти причину сам не смогу.

3. Не могу нажать на красную кнопку "оформить заказ" - окошко исчезает. (скрин прикрепил)

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

  • для-форума-сторлэнд.jpg
  • для-форума-сторлэнд-2.jpg


#9 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

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

LordDiatez

    Новичок

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

Отправлено 25 Март 2014 - 01:00

Просмотр сообщенияsupport 2.0 (23 Март 2014 - 20:42) писал:

2. уточните какие элементы на телефоне смотрятся некореектно


При просмотре через андройд-телефон: Появилась ненужная прокрутка "вправо-влево" часы работы, которые я указал лучше бы под логотипом показывались. Также контактные телефоны хочу вернуть под логотип.
Я так понимаю, это из-за того, что я "контакты" перенес в шапку, по какой-то прочитанной на форуме инструкции.

Еще задачки:
4. Не всегда есть возможность загрузить изображение товара в большом разрешении, из-за этого лупа (увеличение, при наводке на изображение) дублирует маленькое изображение. Поэтому лупу хочу оставить только для изображений, которые имеют от 600px по горизонтали или от 600px по вертикали.
5. "ctrl-a" и выделение строчек мышкой хочется сделать классическим цветом - синим, а не красным.
6. В меню: наведение курсором на позиции каталога чтобы подсвечивало (закрашивало) соответствующее поле голубым цветом.
7. В меню: красные крестики для выплывающего подменю поменять на синие.
8. В меню: цвет шрифта раскрывающегося подменю сделать серым.
9. В меню: открытая категория чтобы писалась жирным шрифтом.
10. Кнопки "быстрый заказ" и "добавить в корзину" сделать зелеными, а не красными.

#11 empty9228

empty9228

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

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

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


#12 Castiel

Castiel

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

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

Отправлено 25 Март 2014 - 10:08

Просмотр сообщенияLordDiatez (25 Март 2014 - 01:00) писал:

9. В меню: открытая категория чтобы писалась жирным шрифтом.

Здравствуйте, добавьте в main.css
.selected {
color: red;
}

Напишите все необходимые стили в данном блоке

#13 LordDiatez

LordDiatez

    Новичок

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

Отправлено 26 Март 2014 - 01:51

Просмотр сообщенияCastiel (25 Март 2014 - 10:08) писал:

Здравствуйте, добавьте в main.css
.selected {
color: red;
}

Напишите все необходимые стили в данном блоке

Я не понял. Мне б код готовый.
Может я неправильно объяснил.
Мне надо: чтобы активная категория товаров именно в меню писалась жирным шрифтом.

задача 11:
на главной странице: увеличить отступ по вертикали на 50px между кнопкой "быстрый заказ" и надписью "популярные товары". (SL-8589)

ПС: спасибо всем, кто помогает...

#14 Vaccina

Vaccina

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

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

Отправлено 26 Март 2014 - 02:45

1. добавьте в style.css:
.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 LordDiatez

LordDiatez

    Новичок

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

Отправлено 26 Март 2014 - 21:50

Просмотр сообщенияVaccina (26 Март 2014 - 02:45) писал:

1. добавьте в style.css:
.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. спасибо, то что надо.

#16 Castiel

Castiel

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

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

Отправлено 26 Март 2014 - 21:53

Просмотр сообщенияLordDiatez (26 Март 2014 - 21:50) писал:

1. добавил, эффекта нет.
2. спасибо, то что надо.

Если я правильно понял, то вы имеете ввиду верхнее меню (Главная, Доставка ...)
Добавьте в style.css
.active {
font-weight: 700;
}





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

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