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

HI, can anyone tell me how to align the following attribute fields below my products http://www.day2remember.com.au/index.php?main_page=product_info&cPath=6_7&products_id=23
I find it looks so messy this way but haven't been able to figure it out. Cheers

The problem is that this is a pretty big question :-)

Why don't we start with a bit of alignment.

To the bottom of your stylesheet.css file add:

.optionName{width:10em}

It will set the length of the text in front of the input boxes to 10em. It will have the effect of aligning the input boxes. You can adjust the 10em to suit your needs.

Also you might like to add:

#productAttributes input{width:10em}

This will reduce the width of the input field to 10em as well. Again you can adjust the 10em to suit your needs. You can see if this is an improvement for you? From there you can start to arrange the blocks. Perhaps some side by side rather than under each other. Have a think about what exactly it is that you are trying to achieve. The more specific you can be the easier it is for people to answer you.

Thank you so much Nick. I'll give that a try I just had this template installed but in my previous one it was side by side and I'd like it to be side by side again, but I don't know how to set it. If you could give me a tip on that, I'd appreciate it very much.

Cheers
Tatjana

I've just done it and it looks much neater with the exception that the checkboxes and radio looks funny as they're too far from the description and the radio names are also too far. Tell me how to do it side by side. I think that will fix the problem. Also on every products page there is a text PLEASE CHOOSE: above the attribute fields and I don't know how to get rid of that. Can you also give me a tip. I've searched everywhere.
Thanks in anticipation
Tatjana

I took out

#productAttributes input{width:10em}

and that fixed the problem. One more thing...how do I put ADD TO CART button below these fields not above???
Cheers

OK still a lot of issues! But it looks a lot better, eh?

Thank you so much Nick. I'll give that a try I just had this template installed but in my previous one it was side by side and I'd like it to be side by side again, but I don't know how to set it. If you could give me a tip on that, I'd appreciate it very much.

Which parts exactly do you want to be side by side?

Also on every products page there is a text PLEASE CHOOSE:

Well there are two ways, maybe three of getting rid of this. Firstly, the words that are used are defined in a language file. The file is:

includes /languages / english / yourtemplate / document_general_info.php

If you look at that document then and search it for 'Please Choose' you can just edit that phrase to what you want. If you don't want anything then just put ''.

Secondly, you could get it not to show from the stylesheet. At the bottom of the stylesheet add:

#attribsOptionsText{display:none;}

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
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?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);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--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 -->

niccol:

OK still a lot of issues! But it looks a lot better, eh?
You're DA GIRL!!! Did it and it looks much better already, eh :clap:

Which parts exactly do you want to be side by side?
The boxes that have OR because customers are supposed to choose.

To put the TELL A FRIEND button underneath the REVIEWS button, do i just cut and paste TAF button under the reviews code?

OK well side by side is going to be a bit more involved because of the way the code is laid out. You are going to have to edit and upload files other than the stylesheet but don't worry because the edits are not all that hard.

If you are up for it you need to find a file:

includes / templates / yourtemplate / templates / tpl_modules_attributes.php

Find the section that reads:

<div class="wrapperAttribsOptions">
<p class="optionName"><?php echo $options_name[$i]; ?></p>
<p id="attributesMenu"><?php echo "\n" . $options_menu[$i]; ?></p>
<br class="clearBoth" />
</div>


<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>


<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />
<?php
    }
?>

We are going to do some work on that. I'll warn you now that it might look worse before it looks better!

First change is not going to be invisible but useful later on.

Change the line :

<div class="wrapperAttribsOptions">

to

<div class="wrapperAttribsOptions" id="attributeBox-<?php echo $i ?>">

Save the file and upload. Let me know when you've done that and we'll move on.

Ok, I'll do this now.

By the way, so sorry I assumed you're a girl. I think your alias confused me NICCOL(Nicole), and it hit me this morning when I woke up that its made up from your first and last name. Sorry

Let me know how you get on. I'm at my desk for the afternoon (UK time which is the next four hours or so)

Hi I've done it. There is no change like you said

Well, in this case it is good that there is no change :smile: Just so you know what we are doing - we have added an individual 'name tag' to all the sections.

I don't know how much you know so I am going to explain a bit that will help you understand. If I am patronising you then forgive me!

One of the basic elements of a web page is a div. It is basically an invisible block that holds other things. We can adjust all the properties of the div (it's size, it's color, it's border all kinds of things). But we need to be able to specify which div we want these changes to apply to.

So, we need each div to have an ID if we are going to style them individually. What we have just done is write a bit of code that gives each of the divs that hold a single bit of text and it's input field it's own name.

So, now we can start styling them individually.

Oh and by the way you aren't the first to assume that I am a girl. I can live with being DA GIRL easier than that b**ch niccol. It makes me smile so don't worry about it!

Next step:

This is where it might get a bit messy for a while. Don't say i didn't warn you.

Find the same file. We need to take out some of the line returns. Find the chunk of code that reads:

<div class="wrapperAttribsOptions">
<p class="optionName"><?php echo $options_name[$i]; ?></p>
<p id="attributesMenu"><?php echo "\n" . $options_menu[$i]; ?></p>
<br class="clearBoth" />
</div>


<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>


<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />
<?php
    }
?>

There are two places where it says <br class="clearBoth" />. Change the first one so that it reads <br/> and delete the second one completely. Then I'll need to have a look at the page.

Hi. NOt only are you smart but a great sense of humour as well :smartalec:

I've done what you told me to do. Lets see :unsure:

OK.

So, just to prove that not all is lost put this lot into the bottom of the stylesheet.

#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
}

All I have done is sort out the width and height of the divs and added a border around each one so I can see what I am doing. (It's late here:smile:)

You do that and I'll work out the next step.

It must be very late coz I woke up an hour ago :D

Done it!

OK.

New batch of code. This time it will overwrite some of the stuff that we have already put in. So, you just need to work out where it starts and cut and paste. (Delete everything after .optionName and then paste this lot in)

.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 transparent solid; width:100%;height:5em
}

#attributeBox-4,#attributeBox-5,#attributeBox-6, #attributeBox-7, #attributeBox-8,#attributeBox-9,#attributeBox-10,#attributeBox-11{width:29em;float:left}
#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:100px}

That will give you something to look at. I haven't gotten down to the bottom yet but might have to sleep soon!

Have a look and see. I am having trouble with some of your very long titles like 'Or weight in pounds lbs/oz' :smile: You could think about changing this to 'Or Pounds lbs/oz' now it is on the same line.

I'll see how I go but suspect that it is time for me to sleep. I have a rule about no coding after midnight because I make too many mistakes :smile: And I turn into a pumpkin.

Ok, you go to sleep. Just tell me do I do this in the stylesheet or attribute template?

I am eternally grateful for your help :) I will change the option name to your suggestion.

Sweet dreams:sleepy:

OK this is my last shot for tonight:

.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 transparent solid; width:100%;height:3em;float:left;
}

#attributeBox-4,#attributeBox-5,#attributeBox-6, #attributeBox-7, #attributeBox-8,#attributeBox-9,#attributeBox-10,#attributeBox-11{width:29em;float:left}
#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:100px}
#attributeBox-15{height:7em}

As before paste it in where appropriate.
Need to sleep>:sleepy::sleepy::sleepy: let me know how you get on and we'll sort out the details!

Have a lovely day....