styling sidebox-banners

[Shane78]

Hi,

trying to style my sidebox banners to look different to my regular side boxes... but failing badly!!

anyone fancy helping me figure it out? Im totally stuck... Been fannying about with CSS for hours, using firebug and web developer FF add-ons to try and work out what to do but got no where!


Cheers
Martin

[niccol]

A URL might help...

[Shane78]

sorry... only as far as developing on a test site on my local WAMP


i have added an attachment to show you my current global styles for side boxes (left) and what i want for sidebox-banners (right)

lol... yep, i want the styling for the sidebox-banners to be transparent.. i.e. no borders, head or footer... but cant work out how to do it

[gjh42]

We need to know the box id for the sidebox banners, and also whether there is any customization of the template in the sidebox area, like extra wrappers for round corner capability, etc. (What template are you using, if it is or starts from a published one?)

[Shane78]

lol... you've already lost me... lol, i cant work out what i need to change for sidebox-banners... couldnt work out their IDs using the FF tools.

please find attached my style sheet (pasted below as .css invalid file type and .doc is too large) ... based on the 'classic' template & image attached to give visual idea

(CSS is heavily commented for own personal use... might have used the odd swear word in times of frustration.. sorry in advance)

Cheers
M



body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #FFFFFF; /*main body background colour (white)*/
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
color: #393939; /*Colour for main links across whole site (grey)*/
text-decoration: none;
}

a:visited {
color: #393939; /*Colour for visited links site wide (same as normal colour)*/
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: #FF9900; /*site wide colour for links when mouse over (ornage)*/
text-decoration: underline;
}

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: 969px; /*fixed size of site main body*/
vertical-align: top;
/*border: 1px solid #9a9a9a;*/
/*above is commented out styling for page border*/
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}
/*commented out styling for area behind hypres logo - may change
#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*/

/*bof styling for Displaying 1 to 9 (of 9 products)*/
.navSplitPagesResult {
padding-top: 10px;
padding-bottom: 10px;
}
/*eof styling for Displaying 1 to 9 (of 9 products)*/

.navSplitPagesLinks {
}

.navNextPrevCounter {
margin: 0em;

}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}
/*bof styling of top*/
#navMainWrapper{
margin: 0em;
background-color: transparent; /*no colour*/
background-image: url(../images/top-bar.jpg);
background-repeat: no-repeat; /*stops image repeating*/
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff; /*font colour within top blue bar*/
height: 40px;
}
/*eof styling for top*/

/*bof styling of bottom*/
#navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: transparent;
background-image: url(../images/bottom-bar.jpg);/*botton bar image*/
background-repeat: no-repeat;
padding: 0.5em 0.2em;
font-weight: bold;
color: #567aa7;
height: 1%;
}


/*eof styling of bottom*/

#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;
}
/*bof styling of top bar (text for home.. log-in etc) */
#navMain ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #FFFFFF;
white-space: nowrap;
}
/*eof styling of top bar (text for home.. log-in etc)*/


/*bof styling of bottom bar (text)*/
#navSupp ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #567aa7;
white-space: nowrap;
}

/*eof styling of bottom bar (text)*/

#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;
}
/*bof styling for hypres ezbar - very top of page*/
#navEZPagesTop {
background-color: transparent; /*no colour*/
/*background-image: url(../images/tile_back.gif);*//*no image needed so commented out*/
font-size: 0.95em;
font-weight: normal;
margin: 0em;
padding: 1em;/*padding from top*/
/*text-align:left; aline to right of page, no required with float:right*/
float: right; /*floats to right, minimizes bar into logo area*/
}
/*eof styling for hypres exbar - very top of page*/

#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*/
/*bof column styling - padding etc*/

.columnLeft {
padding-top: 0pt;
padding-right: 15px;
padding-bottom: 15pt;
padding-left: 0pt;
}

.columnRight {
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 15pt;
padding-left: 15px;
}
/*eof column styling - padding etc*/

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
text-align:left; /*text for sidebox header*/
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}

/*bof styling for the headers of the centre boxes*/
.centerBoxHeading{
margin: 0em;
background-color: #567aa7; /*hypres colour*/
/*background-image: url(../images/sidebox_right.gif);*//*no image required - might change*/
padding: 0.5em 0.2em;
}
/*eof styling for the headers of the centre boxes*/

/*bof site wide styling for headers of all sideboxes*/
.leftBoxHeading, .rightBoxHeading{
margin: 0em;
background-color: #3399cc;
background-image: url(../images/sidebox-head.jpg);
padding: 0.5em 0.9em;
align: left;
border-bottom: 1px solid #9a9a9a; /*adds a border line to bottom of sidebox header*/

}
/*eof site wide styling for headers of all sideboxes*/

/*bof styling for edge of sideboxes*/
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
/*border: 1px solid #9a9a9a;*/ /* border wanted via css*/
/*border-bottom: 5px solid #336633;*/
margin-top: 1.5em;
padding-bottom: 9px; /*creates space for image*/
background-image: url(../images/sidebox-bottom.jpg);/*points to image*/
background-position: bottom center;/*positions image*/
background-repeat: no-repeat;
}
/*eof styling for edge of sideboxes*/

/*bof styling for background of side boxes*/
.sideBoxContent {
/*background-color: #ffffff;*//*colour not required due to use of image*/
padding: 0.4em 0.8em;
background-image: url(../images/sidebox-background.gif);/*image used for sideborder*/
background-repeat:repeat-y;/*repeated downward*/
}

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

/*bof styling for product listings*/
.productListing-data {
padding-top: 0.9em;
padding-bottom: 0.9em;
border-bottom: 1px solid #999999;
}
/*eof styling for product listings*/

#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: #393939;
font-size: 11px;
text-decoration: none;
line-height: 20px; /*hight of links in products sidebox*/
}

A.category-top:hover {
color: #ff9900;
text-decoration: underline;
}

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

A.category-subs:visited, A.category-products:hover {
color: #ff9900;
text-decoration: underline;
}


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

[Shane78]

(attached image for above style sheet)

[niccol]

What will help more is the page source.

In firefox Ctrl U to see the source. Then save it and zip it and attach it to a post.

Or alternatively have a look at the source code yourself. You are looking for something like(but not for the manufacturers sidebox):

<!--// bof: manufacturers //-->
<div class="leftBoxContainer" id="manufacturers" style="width: 150px">
<h3 class="leftBoxHeading" id="manufacturersHeading"><label>Manufacturers</label></h3>
<div id="manufacturersContent" class="sideBoxContent centeredContent"><form name="manufacturers_form" action="http://www.nickcollie.co.uk/catalog/index.php?main_page=index" method="get"><input type="hidden" name="main_page" value="index" /><select name="manufacturers_id" onchange="this.form.submit();" size="3" style="width: 90%; margin: auto;">
  <option value="" selected="selected">Please Select</option>
  <option value="1">2007</option>
  <option value="3">2008</option>
  <option value="2">2009</option>

</select>
</form></div></div>
<!--// eof: manufacturers //-->

This is the manufacturers sidebox. You are looking for the code for the sidebox you are trying to change.

The bit we are interested in is :

<div class="leftBoxContainer" id="manufacturers" style="width: 150px">
<h3 class="leftBoxHeading" id="manufacturersHeading"><label>Manufacturers</label></h3>
<div id="manufacturersContent" class="sideBoxContent centeredContent">

Which gives us the IDs of the relevant elements and then we can create a stylesheet rule to style those elements.

[Shane78]

how dumb of me,,, lol... i forgot about looking at the source and steven300 ( i think it was them or gjh42) told me about that!

lol..

<!--// bof: bannerbox2 //-->
<div class="rightBoxContainer" id="bannerbox2" style="width: 180px">
<h3 class="rightBoxHeading" id="bannerbox2Heading">Have you seen ...</h3>
<div id="bannerbox2Content" class="sideBoxContent centeredContent"><a href="127.0.0.0/index.php?main_page=redirect&amp;action=banner&amp;goto=3" target="_blank"><img src="images/banners/125x125_zen_logo.gif" alt="Zen Cart the art of e-commerce" title=" Zen Cart the art of e-commerce " width="125" height="125" /></a></div></div>
<!--// eof: bannerbox2 //-->


i shall play.. but your comments are still more than welcome!!!

thank you!

[gjh42]

#bannerbox2, #bannerbox2Heading, #bannerbox2Content {background: none;}

If that still doesn't control it, add !important to the value:
{background: none !important;}

If you don't want the heading at all, use

#bannerbox2, #bannerbox2Content {background: none;}
#bannerbox2Heading {display: none;}

[Shane78]

Thanks gjh42, it works great! Youre a star!