How to change the Who's Online title to be an image?

I'm trying to make an image appear for the title of Who's Online sidebox but I'm not having much luck. Currently it just has text 'Who's Online' but I want that to be an image

I've been following these instructions - http://www.zen-cart.com/wiki/index.php/Top_10_questions#Method_2 but the Who's Online section of english.php looks different to the instructions and even when I follow the instructions for another sidebox as a test, it still doesn't appear.

Create your heading image, making it the same width as the column or sideboxes. (You can see the settings in ADMIN >>> CONFIGURATION >>> LAYOUT SETTINGS).

We make the images 35 pixels HIGH, but you can make it thinner or thicker. (SEE BELOW)

SAVE your image as a JPG.. call it whos_online_sb.jpg

FTP that image to your TEMPLATE'S images folder (NOT the main images folder where you keep product images).

Then, at the BOTTOM of stylesheet.css, add the following:

#whosonlineHeading {
background-color: transparent;
background-position: center top;
background-repeat: no-repeat;
color: transparent;
font-size: 0px;
height: 35px;
background-image: url("../images/whos_online_sb.jpg");
}

(You will see in the css: height: 35px;... remember what I said above about how thick or thin your image is... This value will need adjusting accordingly).

See examples of all the sideboxes with images HERE (NB... site is still in early stages of development.)

I see that the wiki still has the old version of that tutorial. There are also two other methods for swapping text for images in headings, and neither of them requires individual template PHP files to be edited. The current version in Tutorials is Can I Use An Image For the Sidebox Header?

Thank you both for all of your time and help. I haven't tried this yet but will give it a go and hopefully I will work it out.

This is just what i have been looking for.

Schoolboy can you use this code for all the sideboxes?

If so how do i find out which each sidebox is called

ie.

#whosonlineHeading {

Thank you

The method we use has had some interesting comments, as there is a debate as to whether it affects SEO - particularly as it uses {display:none} to hide the TEXT element of the headers.

Some people say that Search Engines will penalise what may be an attempt to HIDE text from people, yet have the text appear in the HTML. It is considered "cloaking" which is a big no-no for SEO.

However, we have not seen our method as having any adverse effect on SEO, and have even found the {display:none} declaration being used on Google...

You can use our technique for ALL sideboxes, because the principle is the same.

To find out the style ID's of each sidebox header, you should use the Firefox FIREBUG tool (get it from mozilla), or you could look at the source code of your page.

We use it on a few sites... here is the relevant CSS we use. Look at it and you should see how we get the effect we are after.

The FIRST PART is a GLOBAL declaration to get rid of standard behaviour in the sidebox headers, and the SECOND PART individually declares the image for each ID listed in the first part.

/* - - - - - SIDEBOX HEADINGS WITH IMAGES AND NO TEXT - MAY HAVE TO CREATE NEW IMAGES IF NEW/ADDITIONAL SIDEBOXES ARE MADE ACTIVE - - - - - -*/

/* - - - FIRST PART - - - */

#categoriesHeading, #languagesHeading, #reviewsHeading, #reviewsHeading a, #reviewsHeading a:visited, #informationHeading, #moreinformationHeading, #whatsnewHeading, #whatsnewHeading a, #whatsnewHeading a:visited, #ezpagesHeading, #extralinksboxHeading, #manufacturersHeading, #shoppingcartHeading, #ccacceptHeading, #searchHeading, #currenciesHeading, #socialsideboxHeading, #productnotificationsHeading, #tellafriendHeading, #comodoHeading, #whosonlineHeading, #bestsellersHeading {
	color: transparent;
	font-size: 0px; /* --- makes them invisible in MSIE - Stupid MSIE bugfix -----*/
	height: 30px;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: transparent;
	}

/* - - - SECOND PART - - - */

#languagesHeading {
	background-image: url(../images/languages_sb.png);
}
#bestsellersHeading {
	background-image: url(../images/best_sellers_sb.png);
}
#whosonlineHeading {
	background-image: url(../images/whosonline_sb.png);
}
#currenciesHeading {
	background-image: url(../images/currency_sb.png);
}
#socialsideboxHeading {
	background-image: url(../images/social_network_sb.png);
}
#productnotificationsHeading {
	background-image: url(../images/notify_sb.png);
}
#tellafriendHeading {
	background-image: url(../images/tell_a_friend_sb.png);
}
#comodoHeading {
	background-image: url(../images/ssl_sb.png);
}
#categoriesHeading {
	background-image: url(../images/categories_sb.png);
}
#reviewsHeading {
	background-image: url(../images/reviews_sb.png);
}
#informationHeading {
	background-image: url(../images/information_sb.png);
}
#moreinformationHeading {
	background-image: url(../images/moreinformation_sb.png);
}
#whatsnewHeading {
	background-image: url(../images/whatsnew_sb.png);
}
#ezpagesHeading {
	background-image: url(../images/ezpages_sb.png);
}
#searchHeading {
	background-image: url(../images/search_sb.png);
}
#manufacturersHeading {
	background-image: url(../images/manufacturershead_sb.png);
}
#shoppingcartHeading {
	background-image: url(../images/shoppingcart_sb.png);
}
#ccacceptHeading {
	background-image: url(../images/ccaccepthead_sb.png);
}

Thank you very much :D