How do I align the attribute fields below the product? (see the link)

It goes in the bottom of the stylesheet :smile:

Thus is what it looks like at this end with the edits completed.

OK. I am awake and functional again. So, hopefully this will be easier to understand and won't make you look like:wacko:.

As i said earlier a div is one of the building blocks of a web page. What we have done at the moment is outline each of the divs that we are going to work on in red. Each one of these red boxes is a div.

Earlier on we gave an individual ID to each of these blocks. So they all have a 'name tag' and we can style them individually. How, do we know what the name is? Well there are a couple of ways. You can look in the source code of the page (in firefox you go to view-page source in internet explorer it is similar but I can't remember what it is exactly). Another way is to use firefox and an add-on called web developer toolbar. As you click on a div it will tell you its ID and lots of other information. If you are going to do much more of this I would recommend getting firefox ( it is free ) and the add on called web developer toolbar. It will save you a lot of time in the future.

For the time bing I have attached a screenshot of me using the web developer toolbar. It shows the unique ID of each element. The bit you are interested in is where it says something like "#attributeBox-12". Thats the unique ID of the div.

I am going to split these posts up. So, that's it for now.

Second post in the series.

From, now on we are ONLY going to work on the stylesheet.css file.

The bottom of your css file looks like:```
.optionName {
width: 15em;
}
#attributeBox-0,
#attributeBox-1,
#attributeBox-2,
#attributeBox-3,
#attributeBox-4,
#attributeBox-5,
#attributeBox-6,
#attributeBox-7,
#attributeBox-8,
#attributeBox-9,
#attributeBox-10,
#attributeBox-11,
#attributeBox-12,
#attributeBox-13,
#attributeBox-14,
#attributeBox-15,
#attributeBox-16{border:1px red solid; width:50em;height:5em
}

First of all, I realise that there is a much simpler way of doing some of this.  So, you need to delete some of it!  Delete everything that is in blue so that you are left with:

.optionName {
width: 15em;
}

Then add the lines below:

.optionName {
width: 15em;
}
.wrapperAttribsOptions{
border:1px red solid;
width:50em;
height:3em;
float:left;
}

Now we should be back to having red boxes around all the divs. Almost the same as before.  But the code is much simpler and nicer.

All the boxes are full width at the moment. We need to make some of them half width and shrink the size of the input fields.  To do this add the following lines in:

.optionName {
width: 15em;
}
.wrapperAttribsOptions{
border:1px red solid;
width:50em;
height:3em;
float:left;
}

#attributeBox-4,#attributeBox-5,#attributeBox-6, #attributeBox-7, #attributeBox-8,#attributeBox-9,#attributeBox-10,#attributeBox-11{
width:29em;
}
#attributeBox-6,#attributeBox-8,#attributeBox-10,#attributeBox-12{
clear:both;
}
#attributeBox-4 input,#attributeBox-5 input,#attributeBox-6 input, #attributeBox-7 input, #attributeBox-8 input,#attributeBox-9 input,#attributeBox-10 input,#attributeBox-11 input{
width:8em;
}

You can see how I am referring to the boxes by their individual names.

Now if you upload and look at the page you should see we are getting there:smile:  Just one of the boxes at the bottom is not big enough so we are going to change that.  It is box attributeBox-15 so we are going to add one more rule at the bottom.

.optionName {
width: 15em;
}
.wrapperAttribsOptions{
border:1px red solid;
width:50em;
height:3em;
float:left;
}

#attributeBox-4,#attributeBox-5,#attributeBox-6, #attributeBox-7, #attributeBox-8,#attributeBox-9,#attributeBox-10,#attributeBox-11{
width:29em;
}
#attributeBox-6,#attributeBox-8,#attributeBox-10,#attributeBox-12{
clear:both;
}
#attributeBox-4 input,#attributeBox-5 input,#attributeBox-6 input, #attributeBox-7 input, #attributeBox-8 input,#attributeBox-9 input,#attributeBox-10 input,#attributeBox-11 input{
width:8em;
}

#attributeBox-15{
height:7em
}

That has you as far as the screenshot that I posted earlier, I hope. :cool:

End of this post!

Third in series.

Except of course you still have the red borders.

To get rid of them just change the word 'red' in the code to 'transparent'

Finally, now that we have all the boxes named we can apply individual styling to any one of them.

So you could try putting this rule at the bottom of the stylesheet:

#attributeBox-12{
background-color:yellow;
width:32em;
height:8em;
border:4px solid purple;
}

Hey, I am not suggesting that this is a good look!

But it is just there to show you that you can target a single div and adjust it's style. Take that one out, eh?

If you want to target all the boxes at once that hold the attributes then you would use a rule that looks like:

.wrapperAttribsOptions{
background-color:green;
}

This could be useful for adjusting the height of all the boxes so that you are happy. Just change the 2.8 in the following code to whatever you want.

.wrapperAttribsOptions{
height:2.8em;
}

Right! I am away for the weekend so have fun with it. If you back up your stylesheet.css file (just save it somewhere on your computer) you can play around all you want and if it goes horrifically wrong (like yellow with purple borders :smile:) you can just reload your saved copy.

Finally, as well as colours like 'red' or 'blue' you can use RGB colors. These look lke #999999 which is a grey. Search online for RGB color picker and it will let you pick any colour you can imagine.

Have fun!

It looks fab http://www.day2remember.com.au/index.php?main_page=product_info&cPath=6_7&products_id=23 ...you'r DA MAN :cool:

The way you explain it, it is truly easy to understand and to do. I think your title should be TOTALLY ZENNED :wink:

Hope you had a lovely weekend and were not stuck in traffic :D

I tried to move the TELL A FRIEND button under the REVIEW button, but couldn't work it out. Tried the same way we moved the ADD TO CART button to the bottom, but what happened, it just moved it under the add to cart not under the review. Any suggestions here on how to do that?

Thanks a million

just making note to keep it in file :clap:

niccol:

OK. I am awake and functional again. So, hopefully this will be easier to understand and won't make you look like:wacko:.

As i said earlier a div is one of the building blocks of a web page. What we have done at the moment is outline each of the divs that we are going to work on in red. Each one of these red boxes is a div.

Earlier on we gave an individual ID to each of these blocks. So they all have a 'name tag' and we can style them individually. How, do we know what the name is? Well there are a couple of ways. You can look in the source code of the page (in firefox you go to view-page source in internet explorer it is similar but I can't remember what it is exactly). Another way is to use firefox and an add-on called web developer toolbar. As you click on a div it will tell you its ID and lots of other information. If you are going to do much more of this I would recommend getting firefox ( it is free ) and the add on called web developer toolbar. It will save you a lot of time in the future.

For the time bing I have attached a screenshot of me using the web developer toolbar. It shows the unique ID of each element. The bit you are interested in is where it says something like "#attributeBox-12". Thats the unique ID of the div.

I am going to split these posts up. So, that's it for now.

Hi there,

I been reading your threads regarding alignments for attributes, and follow your steps to the word (I did make some little modifications to suit my need) but why my attributes alignments does not matching your screenshot.

could you tell me what I did wrong?
here is my site: http://the4thmuse.com/index.php?main_page=product_info&cPath=3&products_id=1

Thank you so much.
Wen

Wen,

This was a little while ago so I may need to refresh myself about what I actually did!

Start with changing to this:

.optionName {
float:left;
	width:20em;
	text-align: right;
	}

which will let us see what is what. then tell me what exactly you want and we'll go from there - although for me it will be tomorrow as I have to sleep now

niccol:

To move the add to cart box you need to edit a file called:

tpl_product_info_display.php

which is in ;

includes / templates / your template / templates /

So, find that file and have a look at it. You are looking for a block of code that looks like:

<!--bof Add to Cart Box -->

        <?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
        if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
          // hide the quantity box and default to 1
          $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        } else {
          // show the quantity box
$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        }
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);

?>

<div id="cartAdd">
<?php
  echo $display_qty;
  echo $display_button;
        ?>
      </div>

<!--eof Add to Cart Box-->

> 
> I've highlighted the start and end in red to make it obvious what you are looking for.  You can cut and paste this block of code to just below the line:
> 
> ```
<!--eof Attributes Module -->

That was just what I was looking for - Thanks :)

niccol:

Wen,

This was a little while ago so I may need to refresh myself about what I actually did!

Start with changing to this:

.optionName {
float:left;
width:20em;
text-align: right;
}

> 
> which will let us see what is what. then tell me what exactly you want and we'll go from there  - although for me it will be tomorrow as I have to sleep now

Hi there,
Thank you so much for taking your time to answer my issues.
I added the code (above) to my css sheet, it look a lot better now then before.

what I am trying to do is to have all my attributes in center alignment (which means that all the semi-colons all line up), and all option names and option values in alignment too.

here is my site in case you needed: <http://the4thmuse.com/index.php?main_page=product_info&cPath=3&products_id=1>

OK next step . Try this,

.optionName {
width:20em;
text-align: right;
}

.wrapperAttribsOptions{
width:50em;
height:2.8em;
float:right;
}

.optionName{
margin:0;
}

.attribsInput,.optionName,.attribsSelect, .attribsCheckbox{
font-size:100%;
}

.wrapperAttribsOptions input{margin-top:4px;}
.wrapperAttribsOptions select{margin-top:4px;}
.wrapperAttribsOptions .attribsCheckbox {line-height:2.3em}

At the bottom of your stylesheet. Basically it just sets the fonts to be the same and vertically aligns some of th elements.

I think you have a slight problem with some of my code because it is putting the colons into the class names which I hadn't anticipated and is a bad thing!

Would you like to post your version of includes / templates / yourtemplate / templates / tpl_modules_attributes.php, please. Then at least I know that we are on the same page!

You can do that by zipping it and using 'attach files'.

niccol:

OK next step . Try this,

.optionName {
width:20em;
text-align: right;
}

.wrapperAttribsOptions{
width:50em;
height:2.8em;
float:right;
}

.optionName{
margin:0;
}

.attribsInput,.optionName,.attribsSelect, .attribsCheckbox{
font-size:100%;
}

.wrapperAttribsOptions input{margin-top:4px;}
.wrapperAttribsOptions select{margin-top:4px;}
.wrapperAttribsOptions .attribsCheckbox {line-height:2.3em}

> 
> 
> At the bottom of your stylesheet.  Basically it just sets the fonts to be the same and vertically aligns some of th elements.
> 
> I think you have a slight problem with some of my code because it is putting the colons into the class names which I hadn't anticipated and is a bad thing!
> 
> Would you like to post your version of includes / templates / yourtemplate / templates / tpl_modules_attributes.php, please.  Then at least I know that we are on the same page!
> 
> You can do that by zipping it and using 'attach files'.

Thank you so much, I attached my tpl_modules_attributes.php
and I input the code to my style sheet.

oops, forget to do upload...first time using "attach file" function here, hope I did it right.

Here is a new version for you. It also strips the colons out when creating the div IDs.

Load that and then we should be OK.

Then you just need to let me know which bits do not work for you and what you want to change.

niccol:

Here is a new version for you. It also strips the colons out when creating the div IDs.

Load that and then we should be OK.

Then you just need to let me know which bits do not work for you and what you want to change.

It looks great! :clap:
I would like the attributes all align center, see example below:

rappewrappewrapperAttribsOptions: optinalvalue
rappewrappewrapperAttribsOptions: optinalvalueoptinalvalue

and the gaps in between smaller (maybe 3px space in between)

again Nick, thank you so much for you time.

great that has got rid of the pesky colons!

try:

.wrapperAttribsOptions{
width:50em;
height:2em;
float:right;
}

.optionName{
margin:0;
width:20em;
text-align:right;
}

.attribsInput,.optionName,.attribsSelect, .attribsCheckbox{
font-size:100%;
}

.wrapperAttribsOptions input{margin-top:4px;}
.wrapperAttribsOptions select{margin-top:4px;}
.wrapperAttribsOptions .attribsCheckbox {line-height:2.3em}

#attributeBox-matchingbusinesscarddesign input{margin-top:-2px;}
#attributeBox-matchingebaystorefront input{margin-top:-2px;}
#attributeBox-ebaystoreleftnavigation input{margin-top:-2px;}
#attributeBox-matchingaboutmepage input{margin-top:-2px;}

#attributeBox-price div{margin-top:6px;font-weight:bold;}

niccol:

great that has got rid of the pesky colons!

try:

.wrapperAttribsOptions{
width:50em;
height:2em;
float:right;
}

.optionName{
margin:0;
width:20em;
text-align:right;
}

.attribsInput,.optionName,.attribsSelect, .attribsCheckbox{
font-size:100%;
}

.wrapperAttribsOptions input{margin-top:4px;}
.wrapperAttribsOptions select{margin-top:4px;}
.wrapperAttribsOptions .attribsCheckbox {line-height:2.3em}

#attributeBox-matchingbusinesscarddesign input{margin-top:-2px;}
#attributeBox-matchingebaystorefront input{margin-top:-2px;}
#attributeBox-ebaystoreleftnavigation input{margin-top:-2px;}
#attributeBox-matchingaboutmepage input{margin-top:-2px;}

#attributeBox-price div{margin-top:6px;font-weight:bold;}

OMG! that is perfect!!! :clap:
Thank you so much...!!!

one last little thing...I promise
I would like Add to Cart: [box] [button] align with the attributes,
would that be possible to do? and let me know how should I repay you, you save me a lot headaches and neck aches.