how can i specify a background image for centerBoxHeading

im trying to customise at template and would like to specify a background image for centerBoxHeading i have added the relavent items to the style sheet but cant seem to find what file or where in the file to put the call for it
also im not good at php so im quite sure what the call command should be
any help much apprciated

here is the stsyle sheet i have edited so u can see what i have done so far

/*
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers |
// | |
// | http://www.zen-cart.com/index.php |
// | |
// | Portions Copyright (c) 2003 osCommerce |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license, |
// | that is bundled with this package in the file LICENSE, and is |
// | available through the world-wide-web at the following url: |
// | http://www.zen-cart.com/license/2_0.txt. |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to |
// | [email protected] so we can mail you a copy immediately. |
// +----------------------------------------------------------------------+
// $Id: stylesheet.css 277 2004-09-10 23:03:52Z wilt $
*/

BODY {
background-color: #326DB8; /#e5edf5;/
color: #000000;
margin: 0px;
margin-bottom: 10px;
padding: 0px;
font: 11px Verdana, Arial, sans-serif;
}

.centershop {
padding: 5px 0px 5px 0px;
margin: 0px auto;
position: relative;
text-align: center;
width: 95% !important;
}

TD.main, P.main {
font-size: 13px;
line-height: 1.5;
}

A {
color: #428dff;
text-decoration: none;
}

A:hover {
color: #ffb062;
text-decoration: underline;
}

FORM {
display: inline;
}

.banners {
padding: 5px;
}

.bannerspic {
padding: 0px;
}

/HEADER CSS/

TABLE.header {
background: #ffffff url(../images/header_bg.gif) no-repeat;
width: 100% !important;
text-align : center;
}

TABLE.headerNavigation {
background: #abbbd3;
background-image: url(../images/header_06.gif);
background-color: #ffffff;
width: 100% !important;
}

TD.headerNavigation {
width: 100% !important;
position: relative;
vertical-align:middle;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color:#000000; /* the line between Home "|" Login at the top */
letter-spacing:1px;
padding: 5px;
}
TD.headerNavigationimg{
position: relative;
padding: 0px;
}

TD.breadCrumb {
font-size: 10px;
font-weight: bold;
color: #9a9a9a;
padding: 3px;
border-bottom: 1px dotted #9a9a9a;
}

TD.headerNavigation A, TD.headerNavigation A:visited, .sideBoxHeading A, td.footertop a, .centerboxheading A {
font-weight: bold;
color: #000000;
}

TD.headerNavigation A:hover, .sideBoxHeading A:hover, td.footertop a:hover, .centerboxheading A:hover {
color: #0000ff;
}

TR.headerError {
background: #ff0000;
}

TD.headerError {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}

TR.headerInfo {
background: #00ff00;
}

TD.headerInfo {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}

/SIDEBOX CSS/

.column_box_spacer_left {
height: 10px;
}

.column_box_spacer_right {
height: 10px;
}

.column_box_spacer_single {
height: 10px;
}
/* change the column_left_pic as well /
.column_left{
background: #e5edf5; /#ffffff;*/
padding: 6px 6px 6px 6px;
}

.column_left_pic{
background: #e5edf5; /#ffffff;/
padding: 2px;
}

.column_right{
background: #e5edf5; /#ffffff;/
padding: 6px 6px 6px 6px;
}

.column_right_pic{
background: #e5edf5; /*#ffffff; */
padding: 2px;
}

/* columns. If changeing the column_right change column_right_pic as well */

.boxText {
font-size: 13px;
line-height: 125%;
}

.sideBoxContent, .centerboxcontent {
line-height: 125%;
padding: 4px;
border-left:1px solid #000000;
border-right:1px solid #000000;
}

.sideBox, .centerbox {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #ffffff;
border:1px solid #9a9a9a;
margin-bottom: 15px;
}

.infoBoxNotice {
background: #FF8E90;
}

.infoBoxNoticeContents {
background: #FFE6E6;
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
}

TD.sideBoxHeading, TD.centerboxheading {
height: 20px;
padding-left: 5px;
}

.sideBoxHeading, .productListing-heading, .centerboxheading {
font-size: 12px;
font-weight: bold;
color: #000000; /#000000;/
padding: 3px;
}

TR.sideBoxHeading, TD.productListing-heading, TR.centerboxheading {
background: #abbbd3;
background-image: url(../images/header_06.gif);
}

.sideBoxFooter, .centerboxfooter {
background: #abbbd3;
background-image: url(../images/header_06.gif);
}

SPAN.newItemInCart {
color: #ff0000;
font-weight: bold;
}

/center main section
-----------------------------------/
TD.pageHeading, DIV.pageHeading, h1 {
font-size: 16px;
font-weight: bold;
color: #9a9a9a;
padding-top: 11px;
}

/********** center column ************/
.center_column {
background-color: #ffffff;
padding: 8px;
}
.column_center_pic{
background: #ffffff;
padding: 0px;
}

/************* end column center pics ************/

.main_page{
width: 100% !important;
background-color: #ffffff;
/* border-right: 1px solid #9a9a9a;/
/ border-left: 1px solid #9a9a9a;*/
padding: 0px;
}

.plainBox, .plainbox-description {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
background: #ffffff;
border: 1px solid #9a9a9a;
margin-bottom: 15px;
padding: 5px;
}

.plainBoxHeading {
font-size: 12px;
font-weight: bold;
padding: 11px 5px 5px;
}
/* footer
--------------*/

TABLE.footer {
background: #ffffff;
text-align: center;
font-size: 10px;
/* border-right: 1px solid #9a9a9a;/
/ border-left: 1px solid #9a9a9a;/
/ border-bottom: 1px solid #9a9a9a;*/
}

TR.footertop {
background: #abbbd3;
background-image: url(../images/header_06.gif);
font-size: 11px;
}

TD.footertop{
padding: 5px;
}

TD.footertopimg{
padding: 0px;
}

TD.footerbottom {
padding: 5px;
}

/miscellaneous areas
-------------------------------------/
TD.infoBox, SPAN.infoBox {}

TD.cartBox {
background: #eff4f8;
font-size: 10px;
padding: 3px;
border: 1px dotted #ffb062;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #ffffff;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #eff4f8;
}

.errorBox { background: #ff797c; color: #ffffff; font-weight: bold; }
.stockWarning { color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { color: #70d250; text-decoration: underline; }
.productListing-heading {
border-bottom: 1px solid #9a9a9a;
}

TD.productListing-data {
font-size: 10px;
}

td.pageresults a {
color: #0000FF;
}

td.pageresults a:hover {
background: #FFFF33;
}
td.pageresults {
font-size: 10px;
}
TR.subBar {
background: #f4f7fd;
}

TD.smallText, SPAN.smallText, P.smallText {
font-size: 10px;
}

TD.accountCategory {
font-size: 13px;
color: #aabbdd;
}

TD.fieldKey {
font-size: 12px;
font-weight: bold;
}

TD.fieldValue {
font-size: 12px;
}

TD.tableHeading {
font-size: 12px;
font-weight: bold;
}

CHECKBOX, INPUT, RADIO, SELECT {
font-size: 11px;
}

TEXTAREA {
width: 100%;
font-size: 11px;
}

.greetUser {
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}

SPAN.greetUser {
color: #f0a480;
font-weight: bold;
}

TABLE.formArea {
background: #f1f9fe;
border: 1px solid #7b9ebd;
}

TD.formAreaTitle {
font: bold 12px Verdana, Arial, sans-serif;
}

SPAN.markProductOutOfStock {
color: #c76170;
font: bold 12px Verdana, Arial, sans-serif;
}

span.normalprice {
text-decoration: line-through;
}

SPAN.productSpecialPrice {
color: #ff797c;
}

span.productSpecialPriceSale {
color: #ff797c;
text-decoration: line-through;
}

SPAN.productSalePrice {
color: #FF0000;
}

SPAN.productPriceDiscount {
font-size: 10px;
color: #FF0000;
}

SPAN.errorText {
color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { color: #8c8c8c; }
.checkoutBarCurrent { color: #000000; }

/* message box */

.messageBox { }
.messageStackError, .messageStackWarning { background-color: #ff797c; color: #ffffff; padding: 2px; border: 1px solid #9a9a9a; }
.messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }
.messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #FFFF00; }

/* input requirement */

.inputRequirement {
color: #ff0000;
font-size: 10px;
}

span.coming {
color: #ff797c;
}

/* checkout totals */
TD.ot-subtotal-Text, TD.ot-cod-fee-Text, TD.ot-total-Text, TD.ot-group-pricing-Text, TD.ot-gv-Text, TD.ot-loworderfee-Text, TD.ot-shipping-Text, TD.ot-subtotal-Text, TD.ot-tax-Text, TD.ot-coupon-Text {
font-weight: bold;
}
TD.ot-subtotal-Amount, TD.ot-cod-fee-Amount, TD.ot-total-Amount, TD.ot-group-pricing-Amount, TD.ot-gv-Amount, TD.ot-loworderfee-Amount, TD.ot-shipping-Amount, TD.ot-subtotal-Amount, TD.ot-tax-Amount, TD.ot-coupon-Amount {}

/* product_info attribute comments */

.ProductInfoComments, TD.ProductInfoComments, SPAN.ProductInfoComments {
color: #ff0000;
font-size: 9px;
line-height: 1.0;
text-align : left;
font-weight: bold;
padding-top: 6px;
border-top: 1px solid #9a9a9a;
}

/* General alert span class */
TD.alert, SPAN.alert {
color: #FF0000;
font-weight: bold;
}

/* General alert span class */
TD.alertBlack, SPAN.alertBlack {
color: #000000;
font-weight: bold;
}

/* popup tables */
TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {
background-color: #ffffff;
margin: 6px;
padding: 6px;
font: 11px Verdana, Arial, sans-serif;
}

/* categories_description */
TABLE.categoriesdescription {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
background: #D0D0D0;
border:1px solid #9a9a9a;
}

TD.categoriesdescription {
font-size: 11px;
line-height: 1.0;
}

/* categories box parent and child categories and extra links */
A.category-top, A.category-links {
color: #428dff;
text-decoration: none;
}
A.category-subs, A.category-products {
color: #428dff;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}

/* attribute images table /
TABLE.products-attributes-images {
/ width: 100%; /
/ border: 1px solid #9a9a9a; */
float: left;
padding: 2px;
}

/***************************** for footer roundness *********************/

#bot_corner_img {
padding: 0px;
}
#top_corner_img {
padding: 0px;
}

/*************************** for the Amazon categories *****************/
TD.smallText, SPAN.smallText, P.smallText {
font-size: 13px;
padding: 0px 0px 8px 8px;
}

SPAN.tiny {
font-size: 10px;
}

/************************** space between tables *************************/

.empty_space {
background-color: #326DB8;
}

I'm assuming you want to block color or background the bits tat say Featured, Specials , New etc ?

Like on my test site ? https://www.tapes-direct.co.uk/newshop/

with the blue grad bars ?

I think i edited the tpl_columnar_display.php in Common at line 18 ish to have a div around the title :

<div id="titletag" class="titletag">
<?php echo $title; ?></div>

then added that class to the style

.titletag{
	color: #FFFF00;
	background-color: #000066;
	background-image: url(../images/blu_grad.gif);
	text-align: left;

and uploaded the image to the templates/yourtemplate/images folder.

It works for me .

what i actually what is to use a gif image that i have created that would sit behind the text for example it would make up a bar behind the text "New Products For September" and behind "Featured Products" ect in the center setion of my site

heres an example http://www.terabytecomputers.co.uk/zen/

ignore the awful look fo the site i was just using some spare hosting space to try zen out before i took the plunge and started developing it for my new site

errr giess i should read post properly lol yes what u were suggerting is pretty much what i want lol

i already have this bit in my css

TR.sideBoxHeading, TD.productListing-heading, TR.centerboxheading {
background: #abbbd3;
background-image: url(../images/header_06.gif);
}

.sideBoxFooter, .centerboxfooter {
background: #abbbd3;
background-image: url(../images/header_06.gif);
}

but i just dont know where to put the call for it or how to format the call (like i said i cant write php):blush:

btw nice looking site u have there:thumbsup:

tried what you said but it didnt add an image at all

finally managed to sort it by replacing my css file with 1 from a different template and then tweaking it a little

crazycucumber:

I'm assuming you want to block color or background the bits tat say Featured, Specials , New etc ?

Like on my test site ? https://www.tapes-direct.co.uk/newshop/

with the blue grad bars ?

I think i edited the tpl_columnar_display.php in Common at line 18 ish to have a div around the title :

To give the "New Products", "Featured Products", etc a background image, use this css:

.centerBoxHeading {
     background: url(../images/image.gif);
}

You may have to mess with the padding to make the text line up properly. Also, if you're using a fluid width site, you can make the header resize using the sliding doors technique. It involves 2 images and 'grows' as you increase the width of the browser.

Hey guys, soz to revive this old thread but i just wanted to say thanks to crazycucumber as he solved a problem i had, nice one, which i'd have done a google search 7 hours ago :P

Also thanks to the other guys on here, some well useful info,

Peace out guys.

ethanhunt:

just wondering how you made your site tapes-direct.co.uk to full size window for zen cart following your browser size? the default won't resize the window even if you make your browser full screen.

You set this in your CSS style sheet of your template:

#mainWrapper {
background-color: #fff;
text-align: left;
width: 100%;
vertical-align: top;
}

Set width to 100%, i know this is old thread but it may help people searching through google.

Cheers,
Lee.