| Add Images To Box Headings | Last Update: 10th August, 2005
Article ID: 44 |
- Introduction
- Solution
- Heading Text Replacement
- Use Of Cascading Style Sheets
Introduction
Images can be added to each box displayed in the left and right side columns, where the same image is used for all boxes or where different images are used for different boxes.
Solution
- Heading Text Replacement
- Use Of Cascading Style Sheets
Heading Text Replacement
The simple method of having images in the box heading is to replace the heading text value with an image.
This can be done by editing the main language file in the
includes/languages/ directory, for example
includes/languages/english.php.
To replace the Categories box heading with an image, the heading title definition of
BOX_HEADING_CATEGORIES will need to be changed from:
define('BOX_HEADING_CATEGORIES', 'Categories');
To:
define('BOX_HEADING_CATEGORIES', '<img src="images/a_graphic_image.gif">');
Use Of Cascading Style Sheets
The advanced method of having images in the box heading is to create CSS definitions for each box where an image is to be shown.
The following example concentrates on the Categories box and needs the following three files to be modified:
includes/classes/boxes.php
includes/boxes/categories.php
stylesheet.css
The following code should be added to
includes/classes/boxes.php at the very bottom of the page right before the ending ?> tag:
class infoBoxHeadingCategories extends tableBox {
function infoBoxHeadingCategories($contents) {
$this->table_cellpadding = '0';
$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'width="100%" class="infoBoxHeadingCategories"',
'text' => $contents[0]['text']));
$this->tableBox($info_box_contents, true);
}
}
The code above creates a new class called
infoBoxHeadingCategories which will be used in the Categories box.
The following code in
includes/boxes/categories.php:
new infoBoxHeading($info_box_contents, true, false);
should be replaced with:
new infoBoxHeadingCategories($info_box_contents, true, false);
As the new
infoBoxHeadingCategories class uses a new stylesheet definition just for the Categories box, the following needs to be added to the
stylesheet.css file:
TD.infoBoxHeadingCategories {
background: #33c3d3;
background-image: url('images/some_graphic.gif');
background-repeat: no-repeat;
}
This new class in the stylesheet can have the font, size, spacing, etc. set according to css styles.
