Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Background Image on the Categories Box

Background Image on the Categories Box

Views: 693

Results 1 to 5 of 5
12 Jun 2011, 4:46 PM
#1
bloob avatar

bloob

New Zenner

Join Date:
May 2010
Posts:
14
Plugin Contributions:
0

Background Image on the Categories Box

Hello,

I have a Zen Cart Ver.1.3.9 and a Template Monster and I would like add a Background Image on the Categories Box.

if anyone can help me.

Thanks!

13 Jun 2011, 10:03 AM
#2
bloob avatar

bloob

New Zenner

Join Date:
May 2010
Posts:
14
Plugin Contributions:
0

Re: Background Image on the Categories Box

Hello,
I posted the photo image (File Attached) with the CSS.

.itemTitle a, .centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a {
font-weight: bold;
margin: 10px;
}

.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials {
text-align: center;
margin-bottom: 15px;
}

#whatsNew h2, #featuredProducts h2, #specialsDefault h2 {
background: url(../images/bg_title.gif) repeat-x top;
color: #fff;
margin-bottom: 7px;
}

a img {border: none; }

a, #navEZPagesTOC ul li a {

    color: #444444;

    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 {

    }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{

    }

.biggerText {

    }

CODE {

    font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:11px; color:#444444;

    }

FORM, SELECT, INPUT {

    }

FORM {margin:0px; padding:0px;}

TEXTAREA {

    margin: auto;

    display: block;

    width: 95%;

    }

input:focus, select:focus, textarea:focus {

    }

FIELDSET {

    padding: 0.5em;

    margin: 0.5em 0em;

	border:1px solid #D8D8D8;

    }

LEGEND {

    font-weight: bold; padding:0 5px;

    }

LABEL, h4.optionName {

    }

LABEL.checkboxLabel, LABEL.radioButtonLabel {

    }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {

    float: left;

    }

LABEL.inputLabel {

    width: 11em;

    float: left;

	margin-left:10px;

    }

LABEL.inputLabelPayment {

    width: 15em;

    float: left;

    }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {

    width: 12em;

    float: left;

    }

P, ADDRESS {

    padding: 0.5em;

    }

ADDRESS {

    font-style: normal;

    }

.clearBoth {

    clear: both; font-size:2px; line-height:2px;

    }

HR {

color:#C1C1C1;

border:0; border-top:none;

margin:5px 0px;

}

/warnings, errors, messages/

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {

    line-min-height: 1.8em;

    padding: 0.2em;

    

    }

.messageStackWarning, .messageStackError {

    color:#FF0000; 

    }

.messageStackSuccess {

    background-color: #F1F6E6;

    color: #444444;

    }

.messageStackCaution {

    background-color: #FFFF66;

    color: #444444;

    }

/wrappers - page or section containers/

#mainWrapper {

    text-align: left;

    vertical-align: top;

    }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {

    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {

    } 

#tagline {

    color: #444444; margin-top:10px;

    font-size: 12px;

    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;

	color: #444444;

    }

.floatingBox a {color: #444444;}

#productDetailsList li a{ color: #444444;}

#productDetailsList li { color: #444444;}

.wrapperAttribsOptions { display:block;

    margin: 0.3em 0em;

    }

/navigation/

#sorter {margin:10px;}

.navSplitPagesResult {margin-top:7px; margin-bottom:7px; margin-left:10px; margin-right:10px; font-size:10px;}

.navSplitPagesResult a {color:#CA0C13;}

.navSplitPagesLinks {margin-top:7px; margin-bottom:7px; margin-left:10px; margin-right:10px; font-size:10px;}

.navSplitPagesLinks a {color:#CA0C13;}

.navNextPrevCounter {

    margin: 0em;

    font-size: 0.9em;

    }

.navNextPrevList {

    display: inline;

    white-space: nowrap;

    margin:0px 2px 3px 0px;

    list-style-type: none;

    }

.navNextPrevWrapper{

	margin-bottom:2px;

	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {

    }

#navMain ul, #navSupp ul, #navCatTabs ul {

    margin: 0;

    padding:  0.5em 0em;

    list-style-type: none;

    text-align: center;

    line-min-height: 1.5em;

    }

#navMain ul li, #navSupp ul li, #navCatTabs ul li {

    }

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {

    }

#navEZPagesTOCWrapper {

    font-weight: bold; float:inherit;

    

    min-height: 1%;

	

	padding:0.5em;

	

	margin:5px 0px;

	

	

    border: none;

    }

#navEZPagesTOC ul {

    margin: 0;

    padding:  0.5em 0em;

    list-style-type: none;

    line-min-height: 1.5em;

    }

#navEZPagesTOC ul li {

    white-space: nowrap;

    }

#navEZPagesTOC ul li a {

    padding: 0em 0.5em;

    margin: 0;

    }

#navMainSearch, #navCategoryIcon {

    margin:5px 5px 0 0px;

    }

#navEZPagesTop {

    }

/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;*/

    }

.content {

	margin:0;

	}

.alert {

    color: #FF0000;

    margin-left: 0.5em;

	margin-right:5px;

    }

.advisory {}

.important {

    font-weight: bold;

	margin:5px;

    }

.notice {}

.rating{}

.gvBal {

    float: right;

    }

#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {

    padding: 0em;

    }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {

    font-size: 0.9em;

    }

/Shopping Cart Display/

.tableHeading TH {

    }

.tableHeading, #cartSubTotal {

  }

.tableRow, .tableHeading, #cartSubTotal {

    min-height: 2.2em;

    }

.cartUnitDisplay, .cartTotalDisplay {

    text-align: right;

    padding-right: 0.2em;

    }

#scUpdateQuantity {

    width: 2em;

    }

.cartQuantity {

    width: 4.7em;

    }

.cartNewItem {

    color: #444444;

    position: relative;  /*do not remove-fixes stupid IEbug*/

    }

.cartOldItem {

    /*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;

}

#cartBoxListWrapper ul, #ezPageBoxList ul {

    list-style-type: none;

    }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {

    margin: 0;

    padding: 0.2em 0em;

    } 

.totalBox {

    width: 5.5em;

    text-align: right;

    padding: 0.2em;

    }

.lineTitle, .amount {

    text-align: right;

    padding: 0.2em;

    }

.amount {

    width: 5.5em;

    }

/Image Display/

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

    }

/sideboxes/

.columnLeft {}

.columnRight {}

.sideBoxContent {

    }

.rightBoxHeading {

    margin: 0em;

    background-color: #663366;

    padding: 0.2em 0em;

    }

h3.leftBoxHeading a:hover {

    color: #FFFF33;

    text-decoration: none;

    } 

h3.rightBoxHeading a:hover {

    color: #FF0000;

    text-decoration: none;

    }

.rightBoxContent {

    margin-bottom: 1em;

    }

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {

   width:auto;

    }

.categoryListBoxContents a {text-decoration:none; color:#FFFFFF; text-transform:uppercase; text-align:center;}

.cartTotalsDisplay{

font-size: 10px;

}

#bannerboxHeading {

    background-color: #0000CC;

}

#upProductsHeading {

    text-align: left;

    }

#upDateHeading {

    text-align: right;

    }

/misc/

.back {

    float: left;

    }

.forward {

    float: right;

    }

.bold {

    font-weight: bold;

    }

.rowOdd {

    min-height: 1.5em;

    vertical-align: top;

    }

.rowEven { padding:5px 5px 5px 5px;

    min-height: 1.5em;

    vertical-align: top;

    }

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 {

    min-height: 2em;

    }

#siteMapList {

    width: 90%;

    float: right;

    }

.ratingRow {

    margin: 1em 0em 1.5em 0em;

    }

LABEL#textAreaReviews {

    font-weight: normal;

    }

/!!!!!!!!!/

#gvFaqDefaultMainContent{margin:10px 15px 0 15px;}

#gvFaqDefaultContent{margin:0 5px 0 5px;}

#reviewsDefaultNoReviews{margin:0 5px 5px 5px;}

#createAcctSuccessMainContent{ margin:5px;}

.main_block {margin:20px;}

.ee {text-decoration:line-through;}

/* --------------- PRICES --------------- */

.normalprice {}

.normalprice, .productSpecialPriceSale {

}

.normalprice {

color:#000000; font-size:14px; line-height:normal; font-weight:bold; text-decoration:line-through; line-height:20px;

}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale {

color:#CA0C13; font-size:14px; line-height:normal; font-weight:bold; line-height:20px;

}

.productSpecialPriceSale {

text-decoration:line-through;

}

.productPriceDiscount {color:#000000; display:none;}

/* --------------- BUTTONS --------------- */

.buttonRow, .buttonRow2 {padding:7px 0px; margin:0;}

.buttonRow input, .buttonRow2 input, .buttonRow3 input {border:none; padding:0; background:none;}

#un .buttons {

text-align: right; 

margin-top: 10px;

}

#un dl.pageresults {

margin: 20px 0 0 0;

padding: 0;

}

#un dd {

margin: 0;

padding: 0;

}

#un form {

padding: 0;

}

#un fieldset {

border: 1px solid #9a9a9a;

margin: 0 0 10px 0;

padding: 10px;

}

#un legend {

border: 1px solid #9a9a9a;

background-color: #abbbd3;

padding: 5px;

}

#un label.block {

display: block;

color: #930;

margin-top: 7px;

}

#un label.inline {

display: inline;

color: #930;

}

#un form.control, #un form.moveto {

margin: 0 0 30px 0;

padding: 0;

}

#un form.control fieldset {

border: 0;

margin: 2px 0 1px 0;

padding: 0;

}

#un form.control label {

display: block;

color: #000;

margin-top: 0px;

}

#un form.control div.single {

padding: 3px 5px;  

}

#un form.control div.multiple {

padding: 3px 5px; 

float: left; 

}

#un form.control div.multiple label {

display: block;

}

#un div.clearleft {

padding: 0; 

margin: 0; 

clear:left; 

}

#un .s {

width: 50px;

}

#un .m {

width: 100px;

}

#un .l {

width: 175px;

}

#un .xl {

width: 300px;

}

#un table.productlist {

width: 100%;

border: 1px solid #9a9a9a;

}

#un table.productlist tr.heading {

height: 25px;

background: #abbbd3;

background-image: url(../images/tile_back.jpg);

background-repeat: repeat-x;

color: #fff;

font-size: x-small;

}

#un .footnote {

color: #666;

font-size: x-small;

padding-top: 0;

margin-top: 20px;

}

#un table.productlist th {

padding: 2px;

}

#un table.productlist th.right {

text-align: center;

}

#un table.productlist th.center {

text-align: center;

}

#un table.productlist td {

border-top: 1px solid #9a9a9a;

padding: 2px;

}

#un table.productlist td.odd {

}

#un table.productlist td.odd-right {

text-align: right;

}

#un table.productlist td.odd-center {

text-align: center;

}

#un table.productlist td.even {

background-color: #eff4f8;

}

#un table.productlist td.even-right {

background-color: #eff4f8;

text-align: right;

}

#un table.productlist td.even-center {

background-color: #eff4f8;

text-align: center;

}

#un div.tableheading {

height: 25px;

background: #abbbd3;

background-image: url(../images/tile_back.jpg);

background-repeat: repeat-x;

color: #fff;

font-size: x-small;

font-weight: bold;

border: 1px solid #9a9a9a;

padding: 3px 6px 0px 6px;

}

#un div.wishlist-even {

margin: 0px 0px 0px 0px;

padding: 10px; 

border: 1px solid #9a9a9a;

border-top: 0px;

background-color: #eff4f8;

}

#un div.wishlist-odd {

margin: 0px 0px 0px 0px;

padding: 10px; 

border: 1px solid #9a9a9a;

border-top: 0px;

}

#un img.productlist {

margin: 0px 15px 15px 0px;

float: left;

}

#un div.wishlistfields {

margin: 10px 0px 0px 0px;

padding: 10px 0px; 

border-top: 1px dotted #9a9a9a;

}

#un ul {

list-style: none none outside;

padding-left: 0em;

margin-left: 0px;

margin-top: 0px;

}

#un ol {

padding-left: 2.2em;

margin-left: 0px;

margin-top: 0px;

text-indent: -0.4em;

}

#un ol li {

line-height: 1.4em;

}

#un .inputrequirement {

color: #379;

}

#un p.inputrequirement {

text-align: right;

}

#un .notabene {

color: #379;

font-weight: bold;

}

#un .price {

font-weight: bold;

}

/*

label.tabbed-m {

display: inline;

float: left; 

width: 7em; 

text-align: left;

clear: left;

}

*/

Please Help Me!
THANKS.

13 Jun 2011, 10:36 AM
#3
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Background Image on the Categories Box

A far better way of soliciting help would be to just put up a URL to your site. No-one will have the time to wade through this (lengthy) stylesheet, but using FIREBUG will quickly determine the controlling CSS element, and that would indicate a solution.

In fact, use Firefox with the Firebug plugin, and you'll be able to do it yourself in a few minutes.

13 Jun 2011, 10:56 AM
#4
bloob avatar

bloob

New Zenner

Join Date:
May 2010
Posts:
14
Plugin Contributions:
0

Re: Background Image on the Categories Box

Yes!
Link: https://www.rarehorrordvds.com

Thanks.

14 Jun 2011, 5:06 PM
#5
bloob avatar

bloob

New Zenner

Join Date:
May 2010
Posts:
14
Plugin Contributions:
0

Re: Background Image on the Categories Box

When I tried to change an image or Color on the Categories box, are changed all the colors of the banners box.
Instead I have to insert the picture only in the box of the Category.

Please HELP ME!!
Thanks.