Style arounf Add to Cart Plus Attributes

I'd like to put a border around the add to cart AND the attibutes on the product page. I feel it will make it easier for the customer to know where to add with attributes. I see #cartAdd and .wrapperattribsOptions to style, but nothing for the whole area. This may be due to the old TM I used.
NOTE: DO NOT USE TM. Creates WAY more issues than it's worth.

Any help would be appreciated.

Link to a product page:

http://keepsafeco.com/baby-safety-gates/extra-wide-safety-gates/superyard---adjustable-baby-safety-play-pen?cPath=29_37

Add a margin-top:50px to your #cartAdd, and border plus padding-top to your .wrapperattribsOptions

Thank you Keneso,
Soooo close. It was fine until there are multiple attributes like this:

http://keepsafeco.com/baby-safety-gates/outdoor-safety-gate-decks-porches

Sorry for the ignorance. I appreciate your help. Can I get them all in the same box?
Thank you

Then try adding a div with an id to your tpl_product_info_display.php file to enclose both the .wrapperattribsOptions and #cartAdd, then style that in the stylesheet.

Thank you again.
Unfortunately you've now gone over my head.
For now, I change the border back to only be around the #cartadd. I would like to box and border the add to cart along with all the attributes.
If someone could give me a piece of code sample that might work I would be most appreciative.

Sorry.
Please let me be more detailed - given TM hasn't changed too much, and left the comments on the file.

Browse to includes/templates/TM_TEMPLATE/templates folder, in there you could/should have a file named tpl_product_info_display.php open it in a text editor like notepad++ (if you don't have it google for it), here you should see something like <!--bof Add to Cart Box --> before that you could add a
<div id="myAddAttributeBox">,
then you should have something like <!--eof Attributes Module --> after that you add
</div>.
After this you browse to includes/templates/TM_TEMPLATE/css folder, and open the stylesheet.css file in the editor, and add at the end of it

#myAddAttributeBox {
border: 1px solid #FF0000;
}

Now you upload the two files in the respective folders to your server.
You might need to tweak a little bit with the other rules to get it display like you need.

NOTE
In case you have hard time locating the tpl_product_info_display.php file, use the
admin > tools > developer tool kit
to search for either <!--bof Add to Cart Box -->, or <!--eof Attributes Module --> to locate it.

Above and beyond Keneso!! Thank you very much. It was just what I was looking to do.
:clap:

You're welcome, glad you made it.
You may want to add this to your stylesheet.css

.attribsRadioButton {padding-left: 5px}

hi all,

i found this thread while doing a search on how to group my attributes. Following the posts here, i managed to put a border around the attributes, but what i really want to do is to have first 3 attributes in its own section or table, while the rest goes into another.

Delivery table similar to this: http://www.fareastflora.com/detail.aspx?TYP=FLG&PCAT=FLG-HBQ&PCD=PS02

I am running an online florist and i would like to have the delivery date, time and message card show as one table and the other optional add ons as another table.

just having picked up css and php in the past month, with no background in web development at all, i am very wary of making changes now that i have this site almost the way i want.

would appreciate any advise or help anyone can provide here.

my setup:

• http://stembyme.com.sg/index.php?main_page=product_info&cPath=1&products_id=2
• Zen cart v1.3.9h
• Fresh install- Addons -
• Zen Lightbox
• Fast and Easy Checkout
• Image Handler 3

Try Flexible Attributes in Free Addons. It lets you address attributes individually; you can do almost anything if you know the right CSS for it.

Thanks gjh42!

Checking out flexible attributes now. While looking, it seems that i have to edit stylesheet_flexible_attributes.css file. While i am still learning how to edit css, possible to give me a starting point on editing it to group 3 attributes together?

Something like:

/attribute layout/

.wrapperAttribsOptions label {font-size: 1.0em;}/make "label" elements match other text/

h3#attribsOptionsText {display: none;}/hide the "Please Choose:" heading/

h4.optionName {font-size: 1.0em;}

.wrapperAttribsOptions+br.clearBoth {display: none;}/allow floated attributes to sit side by side if desired/

#wAttrib-4 {clear: left; float: left;border-top-style:solid; margin-top: 50px;}

#wAttrib-5 {float: right; border-top-style:solid; margin-top: 30px;}/this will sit beside #wAttrib-11/

#wAttrib-6 {clear: left;}/this will sit on a new line/

#wAttrib-14 h4 {display: none;}

#wAttrib-15 h3 {font-size: 1em; font-weight: normal;}/make comments above attribute like standard text/

#wAttrib-35 .attribsOptions {display: none;}/for a read-only attribute to hide all but comments/

You won't be able to structurally group attributes without custom PHP code, but you can arrange them and give them border sections to make it look like a group using style rules.
It would be more complicated to give theoretical rules for this than to give the actual rules for your particular situation.

I suggest you take some time to study CSS, as you really need to know how to use it for most of your site's customized appearance. https://www.w3schools.com is a good place to start.