Flexible Attributes addon support

[Pablo]

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/i...roducts_id=366

[gjh42]

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:'.';}

[Bob_L]

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.

[gjh42]

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:

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

[Bob_L]

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.

[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.

[Bob_L]

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.

[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.

[Bob_L]

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.

[FloridaGoFishing]

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&cPath=65
My Catagory Level 2 shows 2 products then the 3rd wraps to the next row. http://www.floridagofishing.com/shop...ex&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...ing-cart.png);
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;}