I have a method that uses just the CSS to hide the text and display an image instead, so this method needs no code changes - and if you later want to revert to the text headings, its a matter of either "commenting out" or deleting the relevant css declarations.
The method involves:
- Creating suitable images for each sidebox, making sure that they are a standard height and width (where width does not exceed the sidebox width setting you have specified in your admin>>>configuration>>>layout settings...Column Width Left Boxes and Right Boxes.
Give these images suitable names (categorieshead.jpg , etc...) and FTP them to your template's images folder.
- Creating the CSS declarations, and making sure these are appended to the BOTTOM of stylesheet.css so they override earlier declarations governing sidebox headings.
The css looks like this:
/* - - - - - SIDEBOX HEADINGS WITH IMAGES AND NO TEXT - JUST CREATE NEW IMAGES FOR ALL ACTIVE SIDEBOXES - - - - - -*/
/* - - - - PART ONE. DETERMINE THE ID FOR ALL RELEVANT SIDEBOXES AND APPEND TO THIS LIST - - - */
/* - - - - WHERE HEADING IS A LINK BE SURE TO INCLUDE THE LINK AND VISITED ID - - - - eg: #whatsnewHeading a, #whatsnewHeading a:visited */
#categoriesHeading, #reviewsHeading, #reviewsHeading a, #reviewsHeading a:visited, #informationHeading, #moreinformationHeading, #whatsnewHeading, #whatsnewHeading a, #whatsnewHeading a:visited, #ezpagesHeading, #extralinksboxHeading {
color: transparent;
font-size: 0px; /* --- makes text headings invisible in MSIE - Stupid MSIE behaviour -----*/
height: 30px; /* - - HEIGHT OF YOUR IMAGES */
background-position: top left;
background-repeat: no-repeat;
background-color: transparent;
}
/* - - PART TWO. NOW FOR EACH SIDEBOX LISTED ABOVE - CALL ITS IMAGE FROM YOUR TEMPLATES IMAGE FOLDER - - */
#categoriesHeading {
background-image: url(../images/categorieshead.jpg);
}
#reviewsHeading {
background-image: url(../images/reviewshead.jpg);
}
#informationHeading {
background-image: url(../images/informationhead.jpg);
}
#moreinformationHeading {
background-image: url(../images/moreinformationhead.jpg);
}
#whatsnewHeading {
background-image: url(../images/whatsnewhead.jpg);
}
#ezpagesHeading {
background-image: url(../images/ezpageshead.jpg);
}
#extralinksboxHeading {
background-image: url(../images/extralinkshead.jpg);
}