VP-ASP :: Shopping Cart Software

Shopping Cart Software Solutions for anywhere in the World

US/Canada(Toll Free): +1 888 587 2278
Europe/UK: +44 (020) 7193 9408
Australia/New Zealand: +61 3 9016 4497

VP-ASP Shopping Cart Customer Forum

Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 VPCart Forum
 Customization
 Changing the size product display
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

Sims
Starting Member

USA
14 Posts

Posted - February 23 2010 :  19:32:56  Show Profile  Visit Sims's Homepage  Reply with Quote
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-ASP Expert

United Kingdom
948 Posts

Posted - February 24 2010 :  03:39:38  Show Profile  Reply with Quote
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
Go to Top of Page

Sims
Starting Member

USA
14 Posts

Posted - February 25 2010 :  17:18:13  Show Profile  Visit Sims's Homepage  Reply with Quote
I forgot to mention rearranging the information to be below the image instead of on the side of it.
Go to Top of Page

carfin
VP-ASP Expert

United Kingdom
948 Posts

Posted - February 26 2010 :  06:38:16  Show Profile  Reply with Quote
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
Go to Top of Page

Sims
Starting Member

USA
14 Posts

Posted - February 26 2010 :  17:04:50  Show Profile  Visit Sims's Homepage  Reply with Quote
Thank you Carrol I appreciate your effort.
Go to Top of Page

gledav
VP-ASP New User

Australia
63 Posts

Posted - March 04 2010 :  04:25:41  Show Profile  Visit gledav's Homepage  Reply with Quote
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
Go to Top of Page

ironhawker
VP-ASP Super User

USA
260 Posts

Posted - March 05 2010 :  15:33:00  Show Profile  Visit ironhawker's Homepage  Reply with Quote
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
Go to Top of Page

Sims
Starting Member

USA
14 Posts

Posted - March 17 2010 :  20:15:37  Show Profile  Visit Sims's Homepage  Reply with Quote
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
Go to Top of Page

gledav
VP-ASP New User

Australia
63 Posts

Posted - March 17 2010 :  20:24:08  Show Profile  Visit gledav's Homepage  Reply with Quote
Hi Sims,

Thanks for all of that. It's exactly what I'm in the process of doing right now so what you've got will come in very useful. Goodluck with you re-design.

Regards

Glenn

www.wineseek.com.au
www.creativemusic.com.au
www.mygiftbasket.com.au
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000