| Author |
 Topic  |
|
|
Sims
Starting Member
USA
14 Posts |
 Posted - February 23 2010 : 19:32:56
|
Need help for product display using two columns to display my products I would like to make the display boxes wider.
I looked inside of layout.css and I was able to change the size of the homepage but I can't seem to locate for changing the display box for the products.
Can someone help me with this.
Thank you |
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - February 24 2010 : 03:39:38
|
Hi.
it's a template which is used to display products - tmp_productformat.htm. You can alter the width of the table in this file.
If it's the products on the home page you want to change it's tmp_frontpage.htm
Regards,
Carrol
www.deanston-electrical.co.uk |
Edited by - carfin on February 24 2010 03:40:38 |
 |
|
|
Sims
Starting Member
USA
14 Posts |
Posted - February 25 2010 : 17:18:13
|
| I forgot to mention rearranging the information to be below the image instead of on the side of it. |
|
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - February 26 2010 : 06:38:16
|
Hi,
Wow they really did make a lot of changes in v7.
I'm sorry but I can't help much, I'm not upgrading any time soon but perhaps someone else can point you in the right direction.
Regards,
Carrol
www.deanston-electrical.co.uk |
|
|
|
Sims
Starting Member
USA
14 Posts |
Posted - February 26 2010 : 17:04:50
|
| Thank you Carrol I appreciate your effort. |
|
|
|
gledav
VP-CART New User
Australia
66 Posts |
Posted - March 04 2010 : 04:25:41
|
Hi Sims,
I've just started to do a V7 upgrade for one of my sites and I think you can alter what you need to in layout.css. If you're using the 2 column layout that will be at templates/default-3cols/css. Find the Main Content section around line 817 and alter #main width to whatever size you require. Hope this helps.
Glenn
Glenn
www.wineseek.com.au
www.creativemusic.com.au
www.mygiftbasket.com.au |
|
|
|
ironhawker
VP-CART Super User
USA
260 Posts |
Posted - March 05 2010 : 15:33:00
|
If you are using ther new Version 7your templates are in the folder /templates/defaulot-2cols/ or /templates/default-3cols/ depending on your chosen presentation.
The appropriate template depends on wether you will have child and master products and if you wish to have other concerns such as tabled displays.
tmp_product.htm and tmp_productinvent.htm are final product displays. tmp_productformatinvent.htm and tmp_productformat.htm display products with the see more link and usually only show the short description.
You may also use tmp_productformatinventtable.htm and new to version 7 are tmp_proexddisplay.htm and tmp_proexddisplayinvent.htm.
These are all highly configurable.... see the user manual or contact me for development and installation help
~-~-~-~-~-~-~-~-~-~
Randy "RC" Corn
[email protected]
http://www.ironhawker.com
425-828-0738 |
|
|
|
Sims
Starting Member
USA
14 Posts |
Posted - March 17 2010 : 20:15:37
|
This is what I found out that's needed to resize columns if using two columns or three columns for products,
it's all located in templates/default-2cols/css/layout.css
You'll see that you have to resize some images as well as resizing tables.
these are the sizes that is suitable for my website you might make a few adjustments for yours.
I hope it will benefit someone else.
Make the following changes:
/* main page wrapper */
#wrap{
margin: 0 auto;
width: 780px;
/*width: 992px;*/
padding:0 0 31px;
}
Replace to :
/* main page wrapper */
#wrap{
margin: 0 auto;
width: 990px;
/*width: 992px;*/
padding:0 0 31px;
----------------------------------------------
.title_top{
background:url(../images/title_top_bg.gif) no-repeat center top;
width:540px; height:10px;
}
Replace to :
.title_top{
background:url(../images/title_top_bg.gif) no-repeat center top;
width:750px; height:10px;
}
--------------
.title_bottom{
background:url(../images/title_bottom_bg.gif) no-repeat center top;
width:540px; height:10px;
}
Replace to :
.title_bottom{
background:url(../images/title_bottom_bg.gif) no-repeat center top;
width:750px; height:10px;
}
--------------
.main-content .text{
float:left;
width:500px;
margin: 19px 0 20px 18px;
display:inline;
}
Replace to :
.main-content .text{
float:left;
width:100%;
margin: 19px 0 20px 18px;
display:inline;
}
--------------
.main-content{
width:100%;
background:url(../images/main-box-repeat.gif) repeat-y;
}
.main-content .top{background:url(../images/main-box-top.gif) no-repeat;}
.main-content .bottom{
overflow:hidden;
width:100%;
background:url(../images/main-box-bottom.gif) no-repeat 0 100%;
}
Replace to :
.main-content{
width:100%;
background:url(../images/main-box-repeat750.gif) repeat-y;
}
.main-content .top{background:url(../images/main-box-top750.gif) no-repeat;}
.main-content .bottom{
overflow:hidden;
width:100%;
background:url(../images/main-box-bottom750.gif) no-repeat 0 100%;
}
---------------
.main-content .image{
float:right;
width:250px;
margin: 20px 5px 0;
}
Replace to :
.main-content .image{
float:right;
width:250px;
margin: 20px 20px 0;
}
----------------
#main h1{
margin:10px 0 10px 0;
background:url(../images/main-content-title.gif) no-repeat;
font: bold 14px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:11px 0 11px 14px;
text-transform: uppercase;
}
Replace to :
#main h1{
margin:10px 0 10px 0;
background:url(../images/main-content-title750.gif) no-repeat;
font: bold 14px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:11px 0 11px 14px;
text-transform: uppercase;
}
-----------------
#main h2{
margin:10px 0 0;
background:url(../images/main-content-title.gif) no-repeat;
font: bold 14px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:11px 0 11px 14px;
/* text-transform: uppercase;*/
}
Replace to :
#main h2{
margin:10px 0 0;
background:url(../images/main-content-title750.gif) no-repeat;
font: bold 14px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:11px 0 11px 14px;
/* text-transform: uppercase;*/
}
-----------------
.title_top{
background:url(../images/title_top_bg.gif) no-repeat center top;
width:750px; height:10px;
}
.title_bottom{
background:url(../images/title_bottom_bg.gif) no-repeat center top;
width:750px; height:10px;
}
Replace to :
.title_top{
background:url(../images/title_top_bg750.gif) no-repeat center top;
width:750px; height:10px;
}
.title_bottom{
background:url(../images/title_bottom_bg750.gif) no-repeat center top;
width:750px; height:10px;
}
-------------------
h1.blog_title, h1.news_title{
color: #fff;
font-weight:bold;
background-image:none !important;
background-color: #6f6f6f !important;
margin:0 !important;
padding:0 10px !important;
width:520px;
}
Replace to :
h1.blog_title, h1.news_title{
color: #fff;
font-weight:bold;
background-image:none !important;
background-color: #6f6f6f !important;
margin:0 !important;
padding:0 10px !important;
width:700px;
}
Locate the images below and resize example original image: main-box-bottom.gif
- main-box-bottom750.gif
- main-box-repeat750.gif
- main-box-top750.gif
- title_bottom_bg750.gif
- title_top_bg750.gif
- main-content-title750.gif
This should display the right column wider.
To see the results on my website: http://temp2asp2.aquesthosting.com/wpom2com/default.asp
Click on cell phone displays
This is my temporary site until I finish building it. |
Edited by - Sims on March 17 2010 20:33:10 |
|
|
|
gledav
VP-CART New User
Australia
66 Posts |
|
| |
Topic |
|
All Forums
Changing the size product display
New Topic
Printer Friendly
TrustGuard - PCI Security Scanner
