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

Post by Qphoria » 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.

Post by Qphoria » 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

Post by Brook » Sun Jan 22, 2012 5:12 am

Post by jty » Sun Jan 22, 2012 8:07 am

Post by Qphoria » Sun Jan 22, 2012 10:30 am

Post by qahar » 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 14637 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; }

Post by qahar » Sun Jan 22, 2012 11:20 pm

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

Post by Brook » 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

Post by dimko » 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?

Using OpenCart v1.5.1.3

Post by dimko » 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?

Using OpenCart v1.5.1.3

Post by Rainforest » Wed Feb 08, 2012 5:13 am

Self Taught Opencart User & Developer Since 2010.

Post by daniel2008 » Sun Mar 04, 2012 8:11 am

http://www.smartebuy.com.au/ http://www.myleathers.com.au/ http://www.cctv4oz.com.au/ http://www.origreen.com.au/

Post by matte2k » Thu Mar 08, 2012 4:10 am

Post by matte2k » Wed Mar 21, 2012 3:25 am

Post by jas » Tue Apr 17, 2012 2:40 pm

JSKS ONLINE --> Sikh Books - CDs - Posters - Gift Items http://www.jsks.biz

Post by matte2k » Sat Apr 21, 2012 4:41 am

Post by Iamdbat » Sat Aug 03, 2013 7:24 am

Post by skip » Fri Jan 24, 2014 5:27 pm