Post by hillfish » Tue Jun 18, 2013 2:12 am

Hi All
I'm using 1551 on default black.
My related products grid shows 4 across but I want to change it to 5 or 6 - no matter what the image size it still only ever shows 4 products per line in the grid.
I can't find any way to set this in the back end so I would appreciate a little help please :)

Thanks !

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by labeshops » Tue Jun 18, 2013 4:04 am

Edit the section of your css stylesheet to change the div width. I think related products uses the box-product css though not using 1.5.5 so not sure if this is true. View source on your page and see what style is called then edit that section in the stylesheet.

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by hillfish » Tue Jun 18, 2013 3:35 pm

Hi
The problem isn't the width - I can make the pics smaller so that 6 could easily fit in the space allotted, but when I do it still only shows 4 per row, so increasing the width of the div won't help unfortunately. It seems to me that the grid is being told to only display 4 in a row no matter what the width is. Thanks for trying though :)

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by labeshops » Tue Jun 18, 2013 7:35 pm

I'm not talking about the width of the pictures. The overall division has a width and that is what affects how many fit on a row.

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by hillfish » Tue Jun 18, 2013 7:46 pm

Yeha I understood what you meant - what I'm saying is that by changing the size of the pics (and therefor the individual products as displayed in related products) I can make it so there is lots of room for more on the same row, but doing so makes no difference to the amount actually shown, ie 4.
In the other grid displays (specials / latest etc) the number of products per row is regulated by their size and changing that size changes how many will fit and therefor how many are displayed per row, but in related products it's not working like that - there's some code somewhere that's limiting it to 4 per row no matter how much space there is.

Hope that's more clear :)

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by labeshops » Tue Jun 18, 2013 8:27 pm

What is your url?

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by hillfish » Tue Jun 18, 2013 10:07 pm

Actually I've sussed out what's causing it - no matter how small I make the images there is still the buy button, which is of course fixed width. Now ... the front page grids have more space because there are no margins, but on the related products page there are margins, so the grid has less space horizontally (if you see what I mean). So ... the related products grid only has space for 4 products per row because of the buy button.

Ok .. so what I really need to do is to decrease the space between each related product in the row a bit - just enough to fit the extra one on and make it look ok instead of 4 products left justified and a hunk of wasted space at the right side of the row. Css ?
Cheers !

Oh yeha - this must not affect any other grids (they're fine) - only the related products.


Edit:
Found it around line 200 on the default black style sheet ...
column-right .box-product > div,
#column-left .box-product > div { width: 158px; margin-right: none; }
#content .box-product > div { width: 130px; margin-right: 10px; }

Playing around with that and the image sizes I've managed to come to an almost happy medium, however the related products grid is indeed controlled by the same bit of css as the other grids, so tweaking one screws up the others.

I suppose the best thing would be to make a new class and edit the relevant tpl file to look for it instead of the global one - anyone know where/what file to edit ? I can't find any file like related.tpl or related-products.tpl or anything that looks like it might be it.

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by labeshops » Wed Jun 19, 2013 12:06 am

hillfish wrote: #column-left .box-product > div { width: 158px; margin-right: none; }
#content .box-product > div { width: 130px; margin-right: 10px; }

Playing around with that and the image sizes I've managed to come to an almost happy medium, however the related products grid is indeed controlled by the same bit of css as the other grids, so tweaking one screws up the others.
Which is what I meant when I said you had to change the div width.

Copy the box-product section in your css and rename to say related-product, set it how you want. If you are using the default related products that shows in a tab on the product page, you need to edit product.tpl and change the class for that section to your newly renamed class.

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by hillfish » Wed Jun 19, 2013 10:20 pm

Ah so that's where it's hiding - right I'll do that and that should solve my issue with a bit of luck.
Good stuff - thanks for all your help labeshops (I thought you meant the overall div doh !) - much appreciated :)

Cheers

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by hillfish » Thu Jun 20, 2013 5:20 am

Mmmmm lol ....
Ok so I copied the .box-product block and renamed it, creating a new class called .box-related - the following is the block of code I copied and edited ...

Code: Select all

.box-related {
	width: auto;
	text-align: center;
	overflow: hidden; }
#column-right .box-related,
#column-left .box-related { padding-left: none; }
#content .box-related { padding-left: 15px; text-align: center; }

.box-related > div {
	width: 128px;
	margin-right: 15px;
	margin-bottom: 15px;
	text-align: center; }

#column-right .box-related > div,
#column-left .box-related > div { width: 158px; margin-right: none; }
#content .box-related > div { width: 130px; margin-right: 10px; }

.box-related .image img { border: 1px solid #353535; }
#column-right .box-related .image img, #column-right .box-related .image img { }

.box-related .price { color: #ddd; }
Then I edited product.tpl (I'm using default black so in my case it used the file from the normal default template). I changed the reference at <div class="box-product"> to <div class="box-related"> on line 299.
I uploaded the new files and the result was not as expected - the related products 'grid' now displays only one row vertically down the left side (so it's a column now rather than a row, if you see what I mean).

The only difference between the block of code I copied and the original is a size value and a 'center' command - just for ease here is the unedited code block (the 'latest' grid is using this block of css and it looks fine) ...

Code: Select all

.box-product {
	width: auto;
	text-align: center;
	overflow: hidden; }
#column-right .box-product,
#column-left .box-product { padding-left: none; }
#content .box-product { padding-left: 15px; text-align: left; }

.box-product > div {
	width: 128px;
	margin-right: 15px;
	margin-bottom: 15px;
	text-align: center; }

#column-right .box-product > div,
#column-left .box-product > div { width: 158px; margin-right: none; }
#content .box-product > div { width: 139px; margin-right: 15px; }

.box-product .image img { border: 1px solid #353535; }
#column-right .box-product .image img, #column-right .box-product .image img { }

.box-product .price { color: #ddd; } 
I've checked just to be sure and the grids on the front page (latest etc) are using .box-product, and the one on the related products tab is using .box-related. Obviously I've screwed something up but I'm not seeing it lol - been playing with it for hours now.
So if someone could put me out of my stupidity and point me in the right direction I would be most grateful :)

Cheers

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by labeshops » Thu Jun 20, 2013 5:52 am

Unfortunately, I'm not familiar with the code for 1.5.5 which uses html5 which I also do not know. Hopefully someone else can point you in the right direction.

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by hillfish » Thu Jun 20, 2013 10:24 pm

No worries labeshops - you've done more than enough :)
I'll take another stab at it later - if I manage to fix it I'll post the solution here for others in the future.

Cheers

New member

Posts

Joined
Wed Mar 03, 2010 2:31 am

Post by labeshops » Fri Jun 21, 2013 12:44 am

Never look at code when you are not awake lol

width: 128px; is the part you should have to change. Make it a few px bigger than the photo size you set and it should do it. You might need to adjust the img section width in the css to make the related images a different size than your other box product items. Be sure you keep them smaller than the photo size you set in the admin section so they don't get pixelated.

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA
Who is online

Users browsing this forum: No registered users and 24 guests