Flexible Attributes addon support

What happens if you edit the Option Name for Color and change the settings for:

Attribute Images per Row: 5 Attribute Style for Radio Buttons/Checkbox: 3

Well, that's in the neighborhood, however it puts the option names on 2 rows (I have 5 options) and they are spread out.
I'd like to have them all on one row. http://www.readingglasses4less.com/index.php?main_page=product_info&cPath=1_42&products_id=308

It can work if you had your Attributes below the image with something like a <br clear="all"> before them in your template ...

I'm not sure how to code this. What files to I need to edit?

You have the right settings, but something is making the colors take up too much width. Find this rule in your stylesheet.attribImg { margin: 0.3em 0; width: 20%; }and change it to```
.attribImg {
margin: 0.3em 0;
width: 10%;
}

That did it, but still one small problem. How do I move all the colors to the left to align under "Frame Color"?
http://www.readingglasses4less.com/index.php?main_page=product_info&cPath=3_54&products_id=366

That's tough to do in CSS without making them drop below the main product image, in which case they go all the way to the left under the image. This can do it, but I don't know of a way to make the content invisible short of "black hat" type text hiding.

.wrapperAttribsOptions:after {content:'.';}

Hello, Never did get a response to this back in July, thought I’d give it another try; Is it possible to move the position of my attribute comments in between the attribute label and the dropdown box? I’m hoping this can be done so I can insert a help icon link between the two. Thanks in advance for any help that can be offered.

I don't think it can reasonably be done with styling changes (and work in various different circumstances), but it would be easy to permanently alter the order with a PHP file change. Find in /includes/templates/your_template/tpl_modules_attributes.php

<div class="wrapperAttribsOptions" id="<?php echo $options_wrapper_id[$i];//gjh42 ?>">
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
<?php
  }
?>

<div class="attribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>
```Move and alter the comment section to get this:
```php
<div class="wrapperAttribsOptions" id="<?php echo $options_wrapper_id[$i];//gjh42 ?>">

<div class="attribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>
<div class="attributesComments"><?php echo $options_comment[$i]; ?></div>
<?php
  }
?>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

Black belt,

If I could impose on you for some help one more time I would really appreciate it; I changed the php file as you suggested but still not getting the results I want.

Here is what I have in the /includes/templates/my_template/tpl_modules_attributes.php file:

<div class="wrapperAttribsOptions" id="<?php echo $options_wrapper_id[$i];//gjh42 ?>">

<div class="attribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>

<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>

<div class="attributesComments"><?php echo $options_comment[$i]; ?></div>
<?php
  }
?>

<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<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 } ?>
</div>

Here is an image of how it looks on the website:

What I'm trying to achieve is to have the blue dot image (which is created in the comments box of the sill-guard option) to be positioned between the option name "sill-guard" and its drop box. Any help you can offer would be greatly appreciated.

You might need to use absolute positioning for the icon, along with some right padding for the text. I need to see it live to advise in more detail.

gjh42:

You might need to use absolute positioning for the icon, along with some right padding for the text. I need to see it live to advise in more detail.

Unfortunately I haven't loaded onto my websites server yet. Would the absolute positioning for the icon be done through the css style sheet? What id would I use for initiating the positioning? #attributesComments-##

If this gets to complicated I supose I could load what I have onto the live server.

Thanks again for the help.

You will have to adapt this to your particular attribute id (you can find it by looking at view source for the page), but something like this should work:

#wAttrib23 .attributesComments {position: absolute; left: 45px; top: -12px;}

adjusting dimensions and adding any other styling needed.

gjh42:

You will have to adapt this to your particular attribute id (you can find it by looking at view source for the page), but something like this should work:

#wAttrib23 .attributesComments {position: absolute; left: 45px; top: -12px;}

adjusting dimensions and adding any other styling needed.

Thanks this did the trick! Now I just need to figure out why some of my html isn’t working when entered into the comments box. Thanks for your help.

Hi, Thank you for making such a great addition for Zen Cart. I have spent all week trying to fix my issue of catagory items wrapping after installing Flexible Column Listing mod. I have tried so many suggestions from this forum, cleaned up my CSS thinking it was inside there and am spinning in circles. And from all this tweaking my site is very slow. I did notice the slowness changes with the CSS edits so there must be something I am missing. All my images are very small around 3kb and I optimized the rest yesterday but it didn't help my speed problem. Parse & Query are enabled at the bottom of pages. And I did not make any edits to the FC PHP files. I did read somewhere about the SQL patch not having a zen_ prefix which I have in my tables so could this be the problem?

Using Zen 1.5 and installed Flexible twice now to be sure I did it right. My category listing pages are wrapping the product list items. I have the settings in Admin/Config:

Product Listing - Layout Style=Columns Columns per Row=3
Maximum Values - Catagories to list per row=3

My Catagory Level 1 won't go into columns at all http://www.floridagofishing.com/shop/index.php?main_page=index&cPath=65
My Catagory Level 2 shows 2 products then the 3rd wraps to the next row. http://www.floridagofishing.com/shop/index.php?main_page=index&cPath=65_62

I tried setting to 4 per row and it showed 3, wrapped the 4th.

Here is my main CSS style sheet, I think I am missing something here that is interfering with the setup.

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #294D65;
background-image: url(../../../../../_images/site/bg-under-water.jpg);
margin-top: 10px;
margin-bottom: 10px;
}

a img {border: none;}

a:link, #navEZPagesTOC ul li a {
color: #3300FF;
text-decoration: none;
}

a:visited {
color: #3300FF;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}

a:active {color: #0000FF;}

h1 {
font-size: 1.6em;
color: #666;
font-weight: bold;
}

h2 {
font-size: 1.4em;
color: #437DA5;
}

h3 {
font-size: 1.1em;
color: #437DA5;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {font-size: 1.2em;}

h1, h2, h3, h4, h5, h6 {margin: 0.3em 0;}

/* Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p { position: relative;}
*html .centerColumn {height: 1%;}

*/

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}

FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}

TEXTAREA {
display: block;
width: 95%;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

input:focus, select:focus, textarea:focus {background: #E4FEF5;}

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}

LEGEND {
font-weight: bold;
padding: 0.3em;
color: black;
}

LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {margin: 0.5em 0.3em;}

#logo, .centerBoxContents, .specialsListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
margin-bottom: 20px;
}

LABEL.inputLabel {
width: 9em;
float: left;
}

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 11em;
float: left;
}

#checkoutPayment LABEL.radioButtonLabel {font-weight: bold;}

P, ADDRESS {padding: 0.5em;}

ADDRESS {font-style: normal;}

.clearBoth {clear: both;}

HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}

/--------------warnings, errors, messages------------/

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #9a9a9a;
}

.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess {
background-color: #99FF99;
color: #000000;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/------------wrappers - page or section containers----------/
#wrapper-outer {
margin-top: 0px;
width: 1058px;
margin-right: auto;
margin-left: auto;
border: medium solid #FFF;
background-color: #294d65;
margin-bottom: 20px;
padding-top: 0px;
padding-bottom: 8px;
}

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 1024px;
margin-right: auto;
margin-left: auto;
vertical-align: top;
border: medium solid #315c79;
margin-top: -1.5em;
}

#headerWrapper,#logoWrapper{
margin: 0em;
padding-top: 0em;/pushes header image to edge if set to zero/
padding-right: 0em;
padding-bottom: .5em;
}

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: 0.5em;
}

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #FFF;
height:100px;
margin-bottom: -1em;/setting brings FGF menu bar up close to logo/
margin-right: -0.2em;
margin-top: -0.5em;
margin-left: -1em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.0em;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
display: none;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {margin: 0.3em 0em;}

/----------------navigation-------------------/
.navSplitPagesResult {}

.navSplitPagesLinks {}

.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}

.navNextPrevList {
white-space: nowrap;
list-style-type: none;
padding-top: 0.5em;
padding-right: 0em;
padding-bottom: 0.5em;
padding-left: 0em;
display: inline-block;
margin-bottom: 1em;
margin-right: 1em;
}

/Adjusts Shop Menu text and background, also bottom menu/
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #f4fbd9;
font-weight: bold;
color: #ffffff;
height: auto;
padding-top: 0.0em;
padding-right: 0.2em;
padding-bottom: 0.0em;
padding-left: 0.2em;
font-size: 14px;
}

#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
list-style-type: none;
text-align: center;
line-height: 1.5em;
padding-top: 1em; /Changes padding above main menu items/
padding-right: 0em;
padding-bottom: 0.5em;
padding-left: 0em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #000;
white-space: nowrap;
}

/Changes color of Shop menu items/
#navCatTabs ul li a {color: #9a9a9a;}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul {
margin: 0;
list-style-type: none;
line-height: 1.5em;
padding-top: 0.5em;
padding-right: 0em;
padding-bottom: 0.5em;
padding-left: 0em;
}

#navEZPagesTOC ul li {white-space: nowrap;}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
padding-top: .9em;
}

#navBreadCrumb {
background-color: #ffffff;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
}

/**Below sets the background for EZ Bar - current setting is Visit FGF.com

• to add background either change color or add line
• background-image: url(../images/tile_back.gif);
  */

#navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0em;
color: #FFF;
float: right;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

/---------------The main content classes------------/

#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/-----------Content------------/
#productDescription, .shippingEstimatorWrapper {
padding: 0em;
font-size: 11px;
line-height: 150%;/font-size: 1.2em; Adds SPACE betw price and descr/
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}

.advisory {}

.important {font-weight: bold;}

.notice {}

.rating{}

.gvBal {float: right;}

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/----------------Shopping Cart Display Box-------------------/
#cartAdd {
float: right;
text-align: center;
margin: 0em;
border: 1px solid #666;
padding: .5em;
background-color: #FFC;
color: #333;
}

.tableHeading TH {
border-bottom: 1px solid #9a9a9a;
}

.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 5em;
}

.tableRow, .tableHeading, #cartSubTotal {height: 2.3em;}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: .5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: left;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #33CC33;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartOldItem {
color: #660099;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {width: 3.5em;}

.cartAttribsList {margin-left: .2em;}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #E4FEf5;
border: 1px solid #003D00;
}

.mediaTitle {
float: left;
}

.mediaTypeLink {
float: right;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {list-style-type: none;}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

#cartBoxEmpty, #cartBoxVoucherBalance {font-weight: bold;}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: left;
padding: 0.2em;
}

.amount {width: 5.5em;}

/Image Display - change alignment of product page image/
#productMainImage {
margin: 0em 1em 1em 1em;
float: right;
}

#reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {margin: 0.5em 1em;}

/-----------Attributes----------/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {text-align: center;}

/Customers who purchased also purchased list box contents/
.centerBoxContents, .specialsListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em;
font-size: 10px;
line-height: 2em;
}

.centerBoxWrapper {
border: 1px solid #9a9a9a;
height: 1%;
margin: 1.1em 0;
}

h2.centerBoxHeading {
font-size: 1em;
color: #ffffff;
}

/-----------sideboxes--------------/
.columnLeft {}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff
}

#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
color: #FFF;
}

.leftBoxContainer, .rightBoxContainer {
margin-top: 0em;/changed to bring columns up/
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 4px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #37768e;
border-right-color: #37768e;
border-bottom-color: #37768e;
border-left-color: #37768e;
margin-right: 0em;
margin-bottom: 1.5em;
margin-left: -.5em;
}

.sideBoxContent {
background-color: #ffffff;
padding-top: 0.9em;
padding-right: .4em;
padding-bottom: 0.9em;
padding-left: .5em;
line-height: 1.75em;
}

.sideBoxContentBlank{background-color: #ffffff;}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #ffffff;
text-decoration: none;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}

/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: left;
padding-left: 10px;
padding-bottom: 10px;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {background-color: #0000CC;}

#upProductsHeading {text-align: left; }

#upDateHeading {text-align: right;}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #008000;
text-decoration: none;
}

A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}

A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #FF0000;
text-decoration: none;
}

SPAN.category-subs-parent {
font-weight: bold;
}

SPAN.category-subs-selected {
font-weight: bold;
}

/* end categories box links */

/misc/

.back {float: left;}

.forward, #shoppingCartDefault #PPECbutton {float: right;}

.bold {font-weight: bold;}

.rowOdd {
height: 1.5em;
vertical-align: top;
}

.rowEven {
height: 1.5em;
vertical-align: top;
}

.hiddenField {display: none;}

.visibleField {display: inline;}

CAPTION {}/display: none;/

#myAccountGen li, #myAccountNotify li { margin: 0;}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;/vertical-align: top/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

TR.tableHeading {
background-color: #cacaca;
height: 2em;
}
/For Row listing/
.productListing-rowheading {}

#siteMapList {
width: 100%;
float: right;
}

.ratingRow {margin: 1em 0em 1.5em 0em;}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}

.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {clear: both;}

.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}

.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}

#seShipTo {padding: 0.2em;}

/------ALL ITEMS BELOW ADDED BY EAL-----------/

/Removes products 1 of ## from pages/
#productsListingTopNumber {display:none;}
#productsListingBottomNumber {display:none;}

/Increases font size of PRICE in Product listing, Row style/
.productListing-data{}

/Increases font size of text below Catagory Title in Product Listing Row style and reduced space betw table and heading text, Row style/
#categoryDescription,#indexProductListCatDescription {}

.legalCopyright{
font-size: 1.1em;
padding-top: 3px;
margin-top: 1em;
margin-bottom: 0em;
margin-left: 0px;
}

.img_body_left {
float: left;
clear: none;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
}

.image-margin_right {
float: left;
clear: none;
margin-right: 10px;
}

.img_body_right {
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

#indexCategoriesMainContent img {
margin: 0 4px 8px 0;
}

#shopping-cart-header {
background-image: url(http://www.floridagofishing.com/shop/includes/templates/floridagofishing/images/shopping-cart.png%29;
background-repeat: no-repeat;
background-position: 0 3px;
padding-left: 28px;
}
/---------------Catagory Level 1------------------/
.categoryListBoxContents a br {}

.categoryListBoxContents a:link {
font-size: 1em;
font-weight: normal;
color: #333;
}

.categoryListBoxContents a:hover {
font-size: 1em;
font-weight: bold;
color: #000000;
}

/Category Level 1 if you added float left, inline-block it aligns in column but then it throws off the column boxes causing them to wrap/
.categoryListBoxContents {}

/Hides captions below images allowing for subcatagory image links/
.categoryListBoxContents a {visibility:hidden;}

.categoryListBoxContents a img{
visibility:visible;
}

/Category Level 2 Top title text, Wraps text around image/
#categoryImgListing {padding:0; float:left; margin-right:15px;}

.title {
padding:5px;
color:#FFF;
font-size:14px;
background-color: #356484;
font-family: "Arial Black", Gadget, sans-serif;
}

/set height of boxes, must set height or site crawls/
.centerBoxContentsProducts {
height: 175px;
float: left;
}

Flexible Columns CSS

.productListing-rowheading th {} /control all heading elements with this/
th.listingModel {}/heading elements can be individually controlled like this/
.productListing-even td, .productListing-odd td {} /control all listing elements with this/
.listingModel {}

.listingName {font-weight: normal;}
h3.itemTitle {
font-size: 10px;
width: 60%;
}
.listingDescription {}
.listingManufacturer {}
.listingPrice {font-size: 12px;} /demo setup/
.listingButtonGroup {} /demo setup/
.listingQuantity {}
.listingWeight {}
.listingImage {}

/*Product Image inside grid */
.listingProductImage {
margin-bottom: 4px;
margin-top: 0px;/set to 15px if use borders/
}

/* Column Layout Grid rules */
#gridSorter ul {border-bottom: 1px dotted #aabbcc; list-style: none; margin-left: 0; padding-left: 0;}
#gridSorter ul li {display: inline; padding-left: 2em;}

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

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/index.php?main_page=product_info&cPath=36&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):```
#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/