Как в категории, в карточке с товаром, картинку поместить слева, все остальное справа

[GeorgyM]

Всем привет.

 

Хочу чтобы в категории, на карточке товара, слева была картинка от верха до низа, а справа от нее Цена и кнопка добавить в корзину. Похоже на Вид список, только по горизонтали несколько товаров.

 

не могу понять как этого эффекта добиться.

 

Кто нибудь в курсе?

 

Это вот под таким адресом.

 

/index.php?route=product/category

 

 

Вид сетка.

 

Не могу разобраться в category.tpl

[Einshtein]

так переделайте внешний вид сетка...
В любом случае не очень понятно чего Вы пытаетесь добиться...неплохо бы увидеть хотя бы картинку из пейнта

[GeorgyM]

так переделайте внешний вид сетка...

В любом случае не очень понятно чего Вы пытаетесь добиться...неплохо бы увидеть хотя бы картинку из пейнта

 запутался в коде не могу сэмитировать работу как list для области - не уверен что кто то разберется

Ну на всякий пэйнт выкладываю - нарисовал как смог

 

[OldAine]

Очень легко, открыть файл stylesheеt.css и начать верстаь, возможно понадобится внести пару правок в скелет category.tpl.

 

Только, врятли кто-то распишет как именно это сделать, так как тут надо сесть и потратить немало времени, чтобы сверстать это у себя, а потом предоставить вам код...

[GeorgyM]

Очень легко, открыть файл stylesheеt.css и начать верстаь, возможно понадобится внести пару правок в скелет category.tpl.

 

Только, врятли кто-то распишет как именно это сделать, так как тут надо сесть и потратить немало времени, чтобы сверстать это у себя, а потом предоставить вам код...

Cпасибо за подсказку

 

stylesheet.css - я понимаю как поправить

 

Но для того чтобы добиться того результата которого я хочу, надо внести пару правок в скелет category.tpl

 

Вот собственно в этих правках то и проблема.

 

Не могу сделать так, чтобы картинка встала слева, а все остальное справа сверху.

 

О каких пару правок идет речь - кто-нибудь умеет это делать ?

[OldAine]

Достаточно внести изменения только в файл стилей.

 

В админке в настройках поставьте -  " * Размер изображения в списке товаров: 90 на 90 px "

 

Потом для файла стилей измените следующие стили на эти:

.product-grid > div {
	width: 246px; /*ИЗМЕНИЛ*/
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /*ИЗМЕНИЛ*/
	margin-bottom: 15px; 
	border: 1px solid #ccc; /*ИЗМЕНИЛ*/
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: inline-block; /*ИЗМЕНИЛ*/
	float: left; /*ИЗМЕНИЛ*/
	padding: 10px;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: inline; /*ИЗМЕНИЛ*/
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: inline-block; /*ИЗМЕНИЛ*/
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}

все изменения я пометил комментарием /*ИЗМЕНИЛ*/, получилось точь в точь, как на вашей картинке...

[GeorgyM]

Достаточно внести изменения только в файл стилей.

 

В админке в настройках поставьте -  " * Размер изображения в списке товаров: 90 на 90 px "

 

Потом для файла стилей измените следующие стили на эти:

.product-grid > div {
	width: 246px; /*ИЗМЕНИЛ*/
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /*ИЗМЕНИЛ*/
	margin-bottom: 15px; 
	border: 1px solid #ccc; /*ИЗМЕНИЛ*/
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: inline-block; /*ИЗМЕНИЛ*/
	float: left; /*ИЗМЕНИЛ*/
	padding: 10px;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: inline; /*ИЗМЕНИЛ*/
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: inline-block; /*ИЗМЕНИЛ*/
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}

все изменения я пометил комментарием /*ИЗМЕНИЛ*/, получилось точь в точь, как на вашей картинке...

Cпасибо - буду пробовать

[GeorgyM]

Достаточно внести изменения только в файл стилей.

 

В админке в настройках поставьте -  " * Размер изображения в списке товаров: 90 на 90 px "

 

Потом для файла стилей измените следующие стили на эти:

.product-grid > div {
	width: 246px; /*ИЗМЕНИЛ*/
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /*ИЗМЕНИЛ*/
	margin-bottom: 15px; 
	border: 1px solid #ccc; /*ИЗМЕНИЛ*/
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: inline-block; /*ИЗМЕНИЛ*/
	float: left; /*ИЗМЕНИЛ*/
	padding: 10px;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: inline; /*ИЗМЕНИЛ*/
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: inline-block; /*ИЗМЕНИЛ*/
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}

все изменения я пометил комментарием /*ИЗМЕНИЛ*/, получилось точь в точь, как на вашей картинке...

 

 

Получается, что за счет обтекания получается нужная конструкция, но при этом блок с картинкой и блок с информацией это один и тот же блок, что накладывает ограничение по форматированию информации по товарам.

 

Именно по этому я и хотел разделить на 2 блока 1 блок - картинка, второй блок информация о товаре.

 

Поэтому я и писал, что хочу внести пару правок в скелет category.tpl, но не понял как это сделать.

 

Кто то знает как ?