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.

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.

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

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:

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

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

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

Active Member

Posts

Joined
Wed Feb 24, 2010 12:15 am

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

jty
Active Member

Posts

Joined
Sat Aug 30, 2008 8:19 am

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

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 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

test.png (97.49 KiB) Viewed 13912 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; }

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

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

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

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

Active Member

Posts

Joined
Wed Feb 24, 2010 12:15 am

Post by dimko » Mon Jan 23, 2012 1:43 am

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?

Using OpenCart v1.5.1.3


Active Member

Posts

Joined
Sun Sep 25, 2011 2:10 am

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


Active Member

Posts

Joined
Sun Sep 25, 2011 2:10 am

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

Self Taught Opencart User & Developer Since 2010.


User avatar
Active Member

Posts

Joined
Fri Jan 28, 2011 3:50 am

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

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


Active Member

Posts

Joined
Wed Jul 07, 2010 8:54 pm

Post by matte2k » 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!

Active Member

Posts

Joined
Thu Mar 01, 2012 7:07 pm

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

any updates on this?

Active Member

Posts

Joined
Thu Mar 01, 2012 7:07 pm

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

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


jas
Newbie

Posts

Joined
Thu Feb 16, 2012 3:15 am


Post by matte2k » 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!

Active Member

Posts

Joined
Thu Mar 01, 2012 7:07 pm

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

Active Member

Posts

Joined
Sat Jan 28, 2012 7:32 am

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

Active Member

Posts

Joined
Mon May 09, 2011 9:57 pm
Who is online

Users browsing this forum: No registered users and 31 guests