Flexible Attributes addon support

Thank you anyone who looked at this for me. For anyone with the wrapping of columns grid, I figured out what "I" did wrong. I had changed way back when I first installed Zen Cart the alignment from center to left because I didn't want the whole site centered. Well I changed the wrong CSS item, so I changed it back and changed another setting in CSS now all is well with the CSS.

Now if I could figure out what conflict is causing my site to load pages extremely slow! I ran many tests and I just can't figure out why, no errors reported.


/*Controls columns align, side boxes, footer bar, catagory column grid listing*/
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center; <<<< I had this aligning left
}

.categoryListBoxContents { <<<< this fixed the columns on Catagory Level 1 (under Memory Cards)
clear: right;
float: left;
}

Quote:

---

Originally Posted by FloridaGoFishing

Thank you anyone who looked at this for me. For anyone with the wrapping of columns grid, I figured out what "I" did wrong. I had changed way back when I first installed Zen Cart the alignment from center to left because I didn't want the whole site centered. Well I changed the wrong CSS item, so I changed it back and changed another setting in CSS now all is well with the CSS.

Now if I could figure out what conflict is causing my site to load pages extremely slow! I ran many tests and I just can't figure out why, no errors reported.


/*Controls columns align, side boxes, footer bar, catagory column grid listing*/
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center; <<<< I had this aligning left
}

.categoryListBoxContents { <<<< this fixed the columns on Catagory Level 1 (under Memory Cards)
clear: right;
float: left;
}

---

Glad you got your issues resolve.. However, you are asking about "Flexible Column Listing" in the support thread for "Flexible Attributes". These are NOT the same module/add-on..

Opps! Maybe I can get Admin to move this. Thanks!

Will this work with checkbox attributes? I am trying to shorten this page http://onlineorder.sshorepizza.com/i...products_id=90
Ideally I would like to have columns for "left side of pizza", "whole pizza", and "right side of pizza" But if I can't have 3 columns then i'd at least like to have 5 or so items per row.

In the classic/css/stylesheet_flexible_attributes.css arranged it this way for just the left side of pizza option names.:

/*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-19 {clear: left; float: left;}
#wAttrib-3 {float: left;}/*this will sit beside #wAttrib-19*/
#wAttrib-4 {float: left;}/*this will sit beside #wAttrib-3*/
#wAttrib-98 {float: left;}/*this will sit beside #wAttrib-98*/
#wAttrib-44 {float: left;}/*this will sit beside #wAttrib-44*/
#wAttrib-30 {clear: left;}/*this will sit on a new line*/
#wAttrib-47 {float: left;}/*this will sit beside #wAttrib-30*/
#wAttrib-32 {float: left;}/*this will sit beside #wAttrib-47*/
#wAttrib-20 {float: left;}/*this will sit beside #wAttrib-32*/
#wAttrib-162 {float: left;}/*this will sit beside #wAttrib-20*/
#wAttrib-8 {clear: left;}/*this will sit on a new line*/
#wAttrib-42 {float: left;}/*this will sit beside #wAttrib-8*/
#wAttrib-11 {float: left;}/*this will sit beside #wAttrib-42*/
#wAttrib-6 {float: left;}/*this will sit beside #wAttrib-11*/
#wAttrib-31 {float: left;}/*this will sit beside #wAttrib-6*/
#wAttrib-9 {clear: left;}/*this will sit on a new line*/
#wAttrib-7 {float: left;}/*this will sit beside #wAttrib-9*/
#wAttrib-5 {float: left;}/*this will sit beside #wAttrib-7*/
#wAttrib-103 {float: left;}/*this will sit beside #wAttrib-5*/
#wAttrib-13 {float: left;}/*this will sit beside #wAttrib-103*/
#wAttrib-10 {clear: left;}/*this will sit on a new line*/
#wAttrib-12 {float: left;}/*this will sit beside #wAttrib-10*/
#wAttrib-14 {float: left;}/*this will sit beside #wAttrib-14*/
#wAttrib-15{float: left;}/*this will sit beside #wAttrib-15*/
#wAttrib-51 {float: left;}/*this will sit beside #wAttrib-51*/


But nothing happened. Before I proceed with the whole page I'd like to get at least a part of it working. I also copied these into template_default/css and still no changes.

Thanks for your help. I am using zen-cart 1.51

The checkboxes are <input> elements within #wAttrib-7, and need different selectors to control them. I don't have time now to go into detail (probably won't until Monday), but you can use selectors like these to affect the inputs (checkboxes) and labels (text):

Code:

---

#wAttrib-7 {clear: left; float: left;}/*this is the overall attribute*/
#wAttrib-7 input {}/*all checkboxes for this attribute*/
#wAttrib-7 label {width: 12em;}/*all checkbox texts for this attribute*/
#wAttrib-7 .attrib-7-198 {clear: left; float: left;}/*this is a particular checkbox*/
#wAttrib-7 .attrib-7-198+label {float: left;}/*this is the label following that particular checkbox*/

---

You can give #wAttrib-7, #wAttrib-6 and #wAttrib-8 each width: 33%; and float: left; so they will sit side by side. You will probably need to limit the width of some sub-elements as well to make the whole attributes narrow; I can't test extensively now. Try these for starters:

Code:

---

#wAttrib-7, #wAttrib-6, #wAttrib-8 {width: 33%; float: left;}
#wAttrib-7 {clear: left; float: left;}
#wAttrib-7 input {}
#wAttrib-7 label, #wAttrib-6 label, #wAttrib-8 label {width: 10em; padding-right: 0.5em}
#wAttrib-7 .attrib-7-198 {clear: left; float: left;}

---

You can adjust attribute sort orders in Option Name Manager if you want the "left side" on the left of "whole pizza".

Thank you. As I was writting my next problem encountered with changing the layout of whole, left, right to left, whole, right. I realized I had to change the numbers on the flex.css otherwise they appeared on two rows instead of one.

I have to do this for a few more items. Hopefully with this example the others will be a breeze.

Thank you!

I have managed to get everything sorted ie left side of pizza is in left column, whole pizza is in center column, right side of pizza is in right column. Thank you for your help in that! I am trying to change the color of the center column so it is a little easier to distinguish columns. However It seems where I put {color: red} will either change 2 columns and break the 3 column side by side layout causing the Right column to be listed below in another row. Or it changes the left column and the center column to both be red.
Placing color into this row #wAttrib-6, #wAttrib-7, #wAttrib-8 {width: 33%; float: left;} will break the 3 columns into 2 rows.
placing color into this row #wAttrib-6 label, #wAttrib-7 label, #wAttrib-8 label {width: 10em; padding-right: 0.5em}
doesn't break the 3 columns into different rows but Won't allow me to only color the center column. It's either the left 2 columns or no columns.

Can someone please give me the correct formatting for this?
#wAttrib-6, #wAttrib-7, #wAttrib-8 {width: 33%; float: left;}
#wAttrib-6 {clear: left; float: left;}
#wAttrib-6 input {}
#wAttrib-6 label, #wAttrib-7 label, #wAttrib-8 label {width: 10em; padding-right: 0.5em}
#wAttrib-6 .attrib-6-198 {clear: left; float: left;}

Thank you. I hope that makes sense to anyone reading it.

You want only the "whole pizza" column to be red, right? So make a rule just for that column:

Code:

---

#wAttrib-7 {color: red;}

---