Sideboxes with different colours?

To eliminate the box name id, change these lines:

$box_id = zen_get_box_id($column_left_display->fields['layout_box_name']);

to this:

$box_id = 'leftBox' . $box_cnt;

that worked
but it has gone in to my top and bottm box and header rounding for the rouned corners

You have a top and a bottom image to make the rounded corners, and all boxes are using the same images. You will have to modify the xsnazzy code to look for image names including the box number, and make an image for each number with its correct color.

This rounded corners code is going to be a pain to mesh with your color desires.

no my top and a bottom are css to make the rounded corners

i will look at this now?

if you think of a way could you let me know

ps. I will pm you within the hour if you could look out fo it and then get back to me if ok with you.

At any rate, you are going to have to add the box number id to several classes in the stylesheet (and repeat for each box), perhaps something like this:

#leftBox1 .xhb1, #leftBox1 .xhb2. #leftBox1 .xhb3, #leftBox1 .xhb4 {background-color: #aabbcc;}

I got that and working on.

all is working out ok I will update when done.

also have you got the pm?

Hi again

I am trying this but not working can you help?

<?php
function checkNum($box_id){
  return ($box_id%2) ? TRUE : FALSE;
}

if(checkNum($box_id) === TRUE){
  <!--// bof: <?php echo $box_id; ?> //-->
<div class="xhsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                     <b class="xhtop"><b class="xhb1"></b><b class="xhb22"></b><b class="xhb32"></b><b class="xhb42"></b></b>
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<b class="xhbottom"><b class="xhb42"></b><b class="xhb32"></b><b class="xhb22"></b><b class="xhb1"></b></b>
</div>
 
<div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                     <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
                     <div class="xboxcontent">
<?php echo $content; ?>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

}else{
  
<!--// bof: <?php echo $box_id; ?> //-->
<div class="xhsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                     <b class="xhtop"><b class="xhb1"></b><b class="xhb2"></b><b class="xhb3"></b><b class="xhb4"></b></b>
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<b class="xhbottom"><b class="xhb4"></b><b class="xhb3"></b><b class="xhb2"></b><b class="xhb1"></b></b>
</div>
 
<div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                     <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
                     <div class="xboxcontent">
<?php echo $content; ?>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
<!--// eof: <?php echo $box_id; ?> //-->
}?>

Hi

the above is due to that I can not get the css to work with more than 1 use of .xhb2, .xhb3, .xhb4

so I thought if I used a if $box_cnt = even or odd string I could then use

(.xhb2, .xhb3, .xhb4) for even
(.xhb22, .xhb32, .xhb42) for odd

p.s in the above I no I'v posted $box_id it should of shown $box_cnt

Thanks
Simon

If you want a strictly even/odd alternation of bg colors, the above approach sounds good. The $box_id generator would need to be altered to give only an integer, or better the "leftBox" stripped off so the integer can be used for the even/odd.

To use the CSS in the manner I posted above, no extra PHP needs to be done; it uses the box number id generated as above in combination with the single set of .xhb classes to generate as many different bgs as desired.

gjh42:

If you want a strictly even/odd alternation of bg colors, the above approach sounds good. The $box_id generator would need to be altered to give only an integer, or better the "leftBox" stripped off so the integer can be used for the even/odd.

Hi

do you nowhow I would do this?

Simon

I don't know if $box_cnt is going to be available here. To get an even/odd from the #leftbox1 etc., replace this```php

<!--// bof: <?php echo $box_id; ?> //--> <div class="xhsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>"> <b class="xhtop"><b class="xhb1"></b><b class="xhb2"></b><b class="xhb3"></b><b class="xhb4"></b></b> ```with this```php <!--// bof: <?php echo $box_id; ?> //--> <?php $box_no = str_replace('leftBox','',$box_id); $box_class = ($box_no/2 == floor($box_no/2)? 'evenBox' : 'oddBox'; ?> <div class="xhsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" class="<?php echo $box_class;?>" style="width: <?php echo $column_width; ?>"> <b class="xhtop"><b class="xhb1"></b><b class="xhb2"></b><b class="xhb3"></b><b class="xhb4"></b></b> ```Then in your stylesheet, add a duplicate set of the .xhb1 etc. group of selectors and add .oddBox or .evenBox in front of each of them. There is no need to duplicate the entire block of PHP code in the tpl_ file; combined selectors will do the same job.``` .oddBox .xhb1, .oddBox .xhb2, .oddBox .xhb3, .oddBox .xhb4 { background-color: #aabbcc; }

.evenBox .xhb1, .evenBox .xhb2, .evenBox .xhb3, .evenBox .xhb4 {
background-color: #669933;
}

I found what you were doing with the box ids, and why it didn't work for you. You have this:```
#leftBox1Heading, .xhb2, .xhb3, .xhb4
{
background-color: #CCD804!important;
}

#leftBox2Heading, .xhb2, .xhb3, .xhb4
{
background-color: #FC8600!important;
}
which needs to be this to work:
#leftBox1Heading .xhb2, #leftBox1Heading .xhb3, #leftBox1Heading .xhb4
{
background-color: #CCD804;
}

#leftBox2Heading .xhb2, #leftBox2Heading .xhb3, #leftBox2Heading .xhb4
{
background-color: #FC8600;
}

I hade tried that to and it did not work!

BUT :clap:its working all but some boxes?

could you look at the site for me?

Simon

all working now

thanks for all your help

Simon

hi everyone,
I need help urgently I have all the codes in my stylesheet however, I have now lost all images of the template from my website. Can someone please help me.

This happened after I changed one of the box bottoms colours however after changing the colour back I still have the same result.

this is the stylesheet.css
/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2007 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
  */

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5;
}

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.5em;
color: #9a9a9a;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

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 {
margin: auto;
display: block;
width: 95%;
}

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, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

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/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}

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

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

#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 {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

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

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#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: #ffffff;
white-space: nowrap;
}

#navCatTabs ul li a {
color: #9a9a9a;
}

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

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

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

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

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

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

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.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/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}

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

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

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

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
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: 1em;
}

#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: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/Image Display/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {
margin: 0.5em 1em;
}

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

.attributesComments {}

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

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

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

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
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;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

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

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

.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, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}

#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 {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
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;
}

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
height: 2em;
color: #FFFFFF;
}

#siteMapList {
width: 90%;
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;
}

Posting your whole stylesheet doesn't help us. We need a link to your site, and then we can look up your stylesheet in combination with the output code and display.
You can post the part you changed if you want.

Sorry about that, I'm new to zen cart and it was late at night when I was working on the site and I was trying 2 change the colours of particular text. I've managed to get the page back ok

However, I am still trying to change a few things and having trouble finding the correct coding to change.

I would like to change the sub-categories fonts colour from red to the same colour as the rest of the categories box.

And the font colour from green to the same brown colour to match rest of the call boxes for the Shopping Cart (more) call box.

Also change the font for the centre products displaying where it says item name and price I want to be able to change that to white not have them brown as the background of it is brown.

And lastly I would like to remove the green colour from the bottom of the call boxes and change it to either a different colour or the same image as I am using for above the call boxes.

Below is a link of the main page

http://spiritconnectionart.com/catalogue/

If you can help me I'd really appreciate it.

Using the Firefox Web Developer extension and its Information > Display Element Information button, I found:

subcategories: a.category-products

shopping cart link: couldn't add to cart to see the sidebox because it wanted me to sign in to Paypal first.

product listing heading: a.productListing-heading {color: #ffffff;}

The sidebox bottom is a border-bottom in ```
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633;
margin-top: 1.5em;
}

border-bottom: 5px solid #336633;
or add a background-image to .leftBoxContents, .rightBoxContents {}


You can install and use the Web Developer in Firefox and find these answers yourself.


By the way, you have a serious image optimization problem. The image thumbnails on your category description are from 1/2 mb to 2 mb each, and took minutes to load the first time. Some of the other thumbnails are "only" 25k or so, but images of that size don't need to be much larger than 5-10k for best display.

Thank you for all that really appreciate your help.

I'm trying to use this same concept for switching some sidebox titles off and leaving some on... except I can't get it to work...

Eg, I want to switch off the categories header and this is what I have:

#leftboxcontainer.categoriesHeading {
    display:none;
}

What am I doing wrong?

site here