Page 1 of 1

[1.5.x] Default theme Improved Product Module Layout?

Posted: Thu Jan 12, 2012 11:23 pm
by Qphoria
So the default module layout in 1.5.x is ... for lack of a better word... "unfinished" looking.

Image

- It's not centered
- The add to cart button is too big and plain (IMO)
- All elements are stacked horizontally so each item takes a lot of room, with wasted space on the side.
- Doesn't line up nicely with other products having more information or ratings..

You could fit a lot of information in a small place of 1.4.x:
Image

While the same space shows only 2 products in 1.5.x. even if you shrink the images to the same dimensions. It still stacks it all.
Image

Suffice to say I'm not a huge fan of the default 1.5.x theme, especially not when compared to 1.4.x which I think still has one of the best default cart themes of any cart.

I think the html is fine, but the css needs work.. again... in my opinion.
If others agree, I'd like to hear some css-only fixes to improve the default theme.

Re: [1.5.x] Improved Product Module Layout?

Posted: Thu Jan 12, 2012 11:31 pm
by Qphoria
My first submission... Moving the price and title to the right. Get back some wasted space:

Image

1. Change your sidebox module image sizes to somewhere between 45-55 px

2. Add the following lines to the bottom of your stylesheet.css

Code: Select all

.box-product > div {width:auto;}
.box-product .image {float:left;padding-right:5px;}
.box-product .name {float:left;}
.box-product .price {float:left;}
.box-product .cart {clear:left;}
May not be the best way... but I'm no themer.. so any better methods or other ideas are welcome

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sun Jan 22, 2012 5:12 am
by Brook
Q,

I agree the default theme needs a little tweaking. I agree, the "Add to Cart" Button does take up a lot of room. How can I make the "Add to Cart" button smaller?

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sun Jan 22, 2012 8:07 am
by jty
yer, but what about when the module is in the centre
in 1.4.9.x, we also had a featured_home.tpl file to give us 2 different styles. It's gone away now
maybe the _home.tpl files will come back in 1.5.2 but let us not talk about 1.5.2 for now

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sun Jan 22, 2012 10:30 am
by Qphoria
I like that the files can be set to both home and side positions using just CSS.. that was a smart change.
Just need some "finishing" on them. The code above works for both side and center.. but still not quite perfect for longer names.. but I'm no css pro

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sun Jan 22, 2012 8:25 pm
by qahar
I'm happy you start this thread. We need more improvement discussion like this.

I do change just like what you need through stylesheet.
test.png

test.png (97.49 KiB) Viewed 12939 times

Add folowing code to the bottom of stylesheet.css

Code: Select all

/* box-product all */
.box-product > div { text-align:center; }

/* box-product column */
#column-left .box-product > div, #column-right .box-product > div { width:100%; margin-right:0; display:block; text-align:left; overflow:hidden; }
#column-left  .box-product .image, #column-right .box-product .image { float:left; margin-right:5px; }

/* button */
#column-left  .box-product .price, #column-right .box-product .price { display:inline; }
#column-left  .box-product .cart, #column-right .box-product .cart { display:inline; margin-left:5px; }
#column-left  .box-product a.button, #column-right .box-product a.button { width:8px; height:8px; background: url(../image/add.png) center center no-repeat; padding-left:0; }
#column-left  .box-product a.button span, #column-right .box-product a.button span { display:none; visibility:none; }

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sun Jan 22, 2012 11:20 pm
by qahar
Someone ask me about how to change the add to cart button on content-top n content-bottom.

Use code bellow to replace the button section on my previous post.

Code: Select all

.box-product .price { display:inline; }
.box-product .cart { display:inline; margin-left:5px; }
.box-product a.button { width:8px; height:8px; background: url(../image/add.png) center center no-repeat; padding-left:0; }
.box-product a.button span { display:none; visibility:none; }

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Mon Jan 23, 2012 1:27 am
by Brook
I know everyone is going to have thier opinion. Removing the "Add to Cart" Button all together on the Category Pages and the Side Modules has a very clean look. Plus takes up a lot less screen realestate :)

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Mon Jan 23, 2012 1:43 am
by dimko
qahar wrote:Image
I like it... I like it a lot :) Centering things looks so nice ;)

Any chance you can align the Name, Price, and the Button on the same level, so they are all aligned horizontally?

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Mon Feb 06, 2012 4:06 am
by dimko
dimko wrote:Any chance you can align the Name, Price, and the Button on the same level, so they are all aligned horizontally?
Anyone? ???

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Wed Feb 08, 2012 5:13 am
by Rainforest
This is fabulous!
I was just randomly reading some stuff on the forum. I agree that there is so much wasted space and things are bigger than they should be with the default theme.

I wish there was an exact 1.4.x layout for 1.5

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sun Mar 04, 2012 8:11 am
by daniel2008
Hi qahar,

What I want to say here is thanks a lot, sincerely.
You're brilliant!
Such the issues worried me a lot and a long time when I tried to update
OC from V1.4x to V1.5x.

Daniel

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Thu Mar 08, 2012 4:10 am
by matte2k
dimko wrote:
dimko wrote:Any chance you can align the Name, Price, and the Button on the same level, so they are all aligned horizontally?
Anyone? ???
that would look very good!

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Wed Mar 21, 2012 3:25 am
by matte2k
any updates on this?

Thanks a Lot Qahar !

Posted: Tue Apr 17, 2012 2:40 pm
by jas
Thanks a lot Qahar , I am using the code you providedof my site above with some wonderful results . It has improved the look of my site and doubled the number of products that I can show in the left and right columns .

Anyone may have a look http://www.jsks.biz where I have applied Qahar's code .
Suggestions for more improvements are welcome .

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sat Apr 21, 2012 4:41 am
by matte2k
Bumping this again
http://ebutik.seriersant.se
How do you get the price and the buy-button so be adjusted downwards so it aligns each other?

Somebody who has a solution?
Thank you!

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Sat Aug 03, 2013 7:24 am
by Iamdbat
I have tried all the suggested solutions but regret to say that they don't actually work as stated on OC 1.5.5 - updates would be very much appreciated

Re: [1.5.x] Default theme Improved Product Module Layout?

Posted: Fri Jan 24, 2014 5:27 pm
by skip
or you can solve this with module:
http://www.opencart.com/index.php?route ... =alongside

In case of long name of product Add to cart price and review go below image, but this module solve this problem.!