Can I Use An Image For the Sidebox Header?

The short answer is yes. You can use one of two methods to achieve the result.

First method:

Install the Images for Titles mod from Free Addons, following the instructions in its readme.
Upload an image file for each sidebox heading you want to substitute, named (for instance) boxhead-categories.gif in the case of the Categories sidebox.
Save the image in /includes/templates/CUSTOM/buttons/ENGLISH/.
If you want to use other than .gif files for the images, edit the define in/includes/languages/ENGLISH/extra_definitions/CUSTOM/image_titles_defines.php.

This method automatically removes the [more] that follows a replaced heading link; but it does require that the same image type (gif, jpeg, png) be used for all replaced heading images in an area.

Second method:

Using an image editor, create your image sets with a name for each sidebox you want to change. Upload to your server and save the images in /includes/templates/CUSTOM/buttons/ENGLISH/.

In your /includes/languages/CUSTOM/english.php find this line of code:

define('BOX_HEADING_CATEGORIES', 'Categories'); 
Change it as follows:
define('BOX_HEADING_CATEGORIES', zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/' . 'your_image.gif', 'Your alt & title text for heading')); 
In your /includes/languages/CUSTOM/english.php find this line of code:
define('BOX_HEADING_LINKS', '  [more]'); 
Change it as follows:
define('BOX_HEADING_LINKS', ''); 
This method requires another edit which globally removes the [more] that follows all heading links; but it does allow total flexibility in image type used for each replaced heading.
In practice, heading images will usually be of the same type for consistency.

 

Replacing background images for one or all sidebox headings:

You may want to keep the standard heading text, but change the background images.
If you want to replace the default Zen Cart background image to be used for all the sideboxes use an image editor to create your image and save it to
/includes/templates/CUSTOM/images/ and upload it to your server.

Now open your stylesheet.css, find and edit the following rules:

.leftBoxHeading { 
  margin: 0em;
  background: url(../images/your_background_image.jpg) no-repeat left top #ff6699;
  padding: 0.5em 0.2em;
}
.rightBoxHeading {
  margin: 0em;
  background: url(../images/your_background_image.jpg) no-repeat left top #ff6699;
  padding: 0.2em 0em;
}
If you want a different background image for one sidebox heading, add to your stylesheet below the previous rules:
#categoriesHeading { 
  margin: 0em;
  background: url(../images/your_categories_background_image.jpg) no-repeat left top #ff6699;
  padding: 0.2em 0em;
}
Change the image file name in each of the URL property values, save the stylesheet and upload the image files to /includes/templates/CUSTOM/images/ on your serve
  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

How can I find out what version of Zen Cart or PHP or MySQL I'm using?

To find out what version of Zen Cart or PHP or MySQL you are currently using, you can simply go...

Getting a BLANK PAGE? Here's the answer ...

If you're getting a blank page when trying to browse to a certain page on your store, or after...

What's New in the Upcoming v2.0 release?

Database Abstraction Layer and Sql CacheThe abstraction layer has been re-factored to include a...

Image Preparation - How-to

I've seen several posts where people obviously aren't quite sure about the best way to set up...

Some tips to modify stylesheet

1. Download Web Developer extension for FireFox here2. Install & restart FireFox. You should...