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.
- 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.
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
May not be the best way... but I'm no themer.. so any better methods or other ideas are welcome
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;}
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
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
I'm happy you start this thread. We need more improvement discussion like this.
I do change just like what you need through stylesheet. Add folowing code to the bottom of stylesheet.css
I do change just like what you need through stylesheet. 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; }
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.
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; }
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
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.
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
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/
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 .
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
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!
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!
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.!
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.!
Who is online
Users browsing this forum: No registered users and 101 guests