Post by rugbug » Sun Jan 01, 2012 7:30 am

I'm having difficulty editing the product.tpl so that my product options are in three columns.

At the moment the colour options and images are in one single column which makes the page quite long:

http://www.ruggerbug.com/store/index.ph ... duct_id=50

I'd like to have them aligned in three columns.

Appreciate any help and happy new year

Dan

Newbie

Posts

Joined
Sun Dec 18, 2011 5:10 am

Post by straightlight » Sun Jan 01, 2012 9:38 am

A small modification could be done to your product.tpl file. Could you post it as an attachment file ?

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com Administrator / Quality Assurance Analyst / Programmer


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by rugbug » Sun Jan 01, 2012 10:04 pm

Product.tpl attached

Newbie

Posts

Joined
Sun Dec 18, 2011 5:10 am

Post by straightlight » Mon Jan 02, 2012 12:48 am

From stylesheet.css file, since the product options are being separated by subjects, you'd need to edit each of those subjects for your product options:

Code: Select all

.product-info .options {
	border-bottom: 1px solid #E7E7E7;
	padding: 0px 5px 10px 5px;
	margin-bottom: 10px;
	color: #000000;
}
.product-info .option-image {
	margin-top: 3px;
	margin-bottom: 10px;
}
.product-info .option-image label {
	display: block;
	width: 100%;
	height: 100%;
}
.product-info .option-image img {
	margin-right: 5px;
	border: 1px solid #CCCCCC;
	cursor: pointer;
}

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com Administrator / Quality Assurance Analyst / Programmer


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by securition » Thu Mar 08, 2012 7:50 pm

Hi,

could you please clarify the changes that would need to be made to display the images in two columns as the code posted is identical to the base install css.

Many Thanks.

Newbie

Posts

Joined
Mon Nov 07, 2011 12:34 am

Post by mirek » Wed Sep 26, 2012 11:31 pm

A bit old thread but I saw you didn't solve it yet. This works for me:

Add to your css:

Code: Select all

.product-info .option-image tr {
  float: left;
  width: 49%;
  padding-right: 1%;
}
Tested on Chrome 21, FF 15, Opera 12, IE 8.
Opencart 1.5.3.1 (should work on your 1.5.1.3)

Newbie

Posts

Joined
Fri May 25, 2012 3:37 pm

Post by paradoxx » Tue Jul 29, 2014 6:34 pm

mirek wrote:A bit old thread but I saw you didn't solve it yet. This works for me:

Add to your css:

Code: Select all

.product-info .option-image tr {
  float: left;
  width: 49%;
  padding-right: 1%;
}
Tested on Chrome 21, FF 15, Opera 12, IE 8.
Opencart 1.5.3.1 (should work on your 1.5.1.3)
I know the thread is old, but your solution helped me today and as nobody thanked you, I do that now. :D

New member

Posts

Joined
Sun Jun 30, 2013 5:56 am
Who is online

Users browsing this forum: No registered users and 16 guests