OpenCart Community

Posted: **Thu Jan 12, 2012 11:23 pm**

So the default module layout in 1.5.x is ... for lack of a better word... "unfinished" looking.

- 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:

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.

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.

Posted: **Thu Jan 12, 2012 11:31 pm**

My first submission... Moving the price and title to the right. Get back some wasted space:

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

Posted: **Sun Jan 22, 2012 5:12 am**

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?

Posted: **Sun Jan 22, 2012 8:07 am**

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

Posted: **Sun Jan 22, 2012 10:30 am**

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

Posted: **Sun Jan 22, 2012 8:25 pm**

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 (97.49 KiB) Viewed 13935 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; }

Posted: **Sun Jan 22, 2012 11:20 pm**

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; }

Posted: **Mon Jan 23, 2012 1:27 am**

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

Posted: **Mon Jan 23, 2012 1:43 am**

qahar wrote:

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?

Posted: **Mon Feb 06, 2012 4:06 am**

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

Anyone?

Posted: **Wed Feb 08, 2012 5:13 am**

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

Posted: **Sun Mar 04, 2012 8:11 am**

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

Posted: **Thu Mar 08, 2012 4:10 am**

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!

Posted: **Wed Mar 21, 2012 3:25 am**

any updates on this?

Posted: **Tue Apr 17, 2012 2:40 pm**

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 .

Posted: **Sat Apr 21, 2012 4:41 am**

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!

Posted: **Sat Aug 03, 2013 7:24 am**

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

Posted: **Fri Jan 24, 2014 5:27 pm**

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.!

OpenCart Community

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks a Lot Qahar !

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

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

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