Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Product Info Page What program controls the physical LAYOUT

Product Info Page What program controls the physical LAYOUT

Locked

Views: 1,519

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
18 Aug 2007, 7:42 PM
#1
petestown avatar

petestown

Zen Follower

Join Date:
Jul 2007
Location:
Chicago & Arkansas I split time LOL
Posts:
148
Plugin Contributions:
0

Product Info Page What program controls the physical LAYOUT

Hi All,

I would like to change the configuration of my products info page.. I wish to center my attributes and have them line up with the the add to cart! I was playing with the TPL_PRODUCT_INFO program and was able to move the attributes up on the page below the main picture and this caused my add to cart to move down LOL. I also playes with the style sheet and seen that I can move the ADD TO CART anywhere but I have not found the place to adjust whree the attributes are located on the product info page. <https://www.petesboots.com> Anyone pointers would be great.

                                                                                          Rich:frusty:
18 Aug 2007, 8:34 PM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Product Info Page What program controls the physical LAYOUT

This is a combination of arranging the order in the tpl_product_info_display.php file and then using the css to finetune the alignment,

The attributes tag is as follows and if you locate it in your style sheet or add it with this statement you will see that it moves it and there are many other things that you can add to modify the placement.

#productAttributes {
float: right;
} 
18 Aug 2007, 9:02 PM
#3
petestown avatar

petestown

Zen Follower

Join Date:
Jul 2007
Location:
Chicago &amp; Arkansas I split time LOL
Posts:
148
Plugin Contributions:
0

Re: Product Info Page What program controls the physical LAYOUT

Hi Cobra,
Thanks for the reply. Yes I have moved things around on the tpl_product_info_display program the one thing I see right now is the box size that currently holds the attributes is to big and is forcing the Add to cart down a line.

Attributes id = productAttributes
Position
Left: 158px Top: 546px
Width: 843px Height: 130px
Other
Font Family: verdana,arial,helvetica,sans-serif
Font Size: 10px
Ancestors
html
body #productinfoBody
div #mainWrapper
table #contentMainWrapper
tbody
tr
td
div #productGeneral .centerColumn
form
Its goes from "columnone" all the way across the page? can I limit the size of this in the style sheet or am I not seeing that correctly. I moved the attributes moduel bekow the product details moduel is how it got to the state it is now? Your thoughts would be appreciated

19 Aug 2007, 4:11 AM
#4
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Product Info Page What program controls the physical LAYOUT

As I stated you can add many other valid settings to what I posted and to change the width try this adjusting as you want.

#productAttributes {
        float: right;
        width: 50%
        }

You can obtain valid items at http://www.w3schools.com/ If you are unsure

20 Aug 2007, 5:56 PM
#5
petestown avatar

petestown

Zen Follower

Join Date:
Jul 2007
Location:
Chicago &amp; Arkansas I split time LOL
Posts:
148
Plugin Contributions:
0

Re: Product Info Page What program controls the physical LAYOUT

Hi Cobra,
After I made that post the other day I did go to the css site and looked at a bunch of examples for handleling text and objects. I was able to display it several diffrent ways! LOL I don't even know how I made some of them. I moved the attributes up and put them just below the product description info and before the add to cart info in the tpl_product_info_display.php program and then I adjusted the width again as you said. I can not figure out how it got to the right of the reviews and tell a friend buttons. I am trying to get it on the same line as the product description info that is just below the product image. I tried several diffrent combinations in the stylesheet to try and center the attribute and then have the add to cart to the right. I wanted it to have description, attributes and add to cart on one line from left to right with the reviews and tell a friend where they originally were one right and one left. I think my style sheet looks like a war zone :lamo:

20 Aug 2007, 10:59 PM
#6
petestown avatar

petestown

Zen Follower

Join Date:
Jul 2007
Location:
Chicago &amp; Arkansas I split time LOL
Posts:
148
Plugin Contributions:
0

Re: Product Info Page What program controls the physical LAYOUT

Kobra,

I GOT IT I GOT IT:clap:

<https://www.petesboots.com>

I played with your % of the width and then I moved things around in the tpl_product_info_display program and it finally worked. thanks for the Help RICH

20 Aug 2007, 11:10 PM
#7
petestown avatar

petestown

Zen Follower

Join Date:
Jul 2007
Location:
Chicago &amp; Arkansas I split time LOL
Posts:
148
Plugin Contributions:
0

Re: Product Info Page What program controls the physical LAYOUT

Ohhh and I had to add this to it as well

                   #productDetailsList {

                              float: left;

                               width: 25%

                    }

  I think it must have a default size that is very wide somewhere. It kept pushing things up or down and I never could get all 3 on one line until I added that. Again Thanks for the direction.

                                                                                        Rich