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.
|
