Создадим новый бокс таким образом, чтобы при его отображении использовались как можно меньше табличных элементов. Допустим, создадим бокс для отображения инфорации о мазагине (about.php)

В простейшем виде бокс можно сделать следующим образом.

<tr><td>
<?php
$about_header=array();
$about_content=array();
$about_footer=array();
$about_header[]=array('text'=>'About Text');
$about_content[]=array('text'=>'content');
$about_footer[]=array('align'=>'left','text'=>tep_draw_separator('pixel_trans.gif','100%','1'));
new infoBoxHeading($about_header,false,false);
new infoBox($about_content);
new infoBoxFooter($about_footer,true,true);
?>
</td></tr>

Для того, чтобы минимизировать количество табличных элементов, следует обратиться к классу tableBox. Конструктор класса выглядит следующим образом:

function tableBox($contents, $direct_output = false).

В функцию передаются параметры отображаемого контента, а так же переменная $direct_output, которая определяет – необходимо ли  сразу выводить текст формируемого бокса, или только вернуть его. Как правило используется прямой вывод. Теперь, разъясним использование переменной $contents. Эта переменная содержит в себе массив элементов, каждый из которых представляет собой ассоциативный массив элементов, описывающих как производить отображение заданного компонента таблицы. Каждый из элементов таблицы может содержать три описания своих свойств: params, align, text. Следут заметить, что элемент align – это частность от params – поэтому его можно смело опускать. Вместе с тем, если единственным параметром отображения элемента есть его выравнивание – то есть смысл его использовать – для уменьшения количества кода и улучшения его читаемости. Содержимое params описывает свойства элемента <td> таблицы, с помощью которого отображается это содержимое. В нем можно использовать любые, описанные в HTML или CSS  описания, доступные для этого элемента. С помощью элемента text – задается то, что отображается в элементе таблицы. Говоря языком HTML – это все, что помещается между тегами <td> и </td>. Например, для того, чтобы задать отображение текста «текст» красным цветом, в параметре $contents нужно передать элемент:

$contents[]=array(‘params’=>’style=”{color:red;}”’,’text’=>’текст’);

Будет сформирована следуюшая строка:

<tr><td style="{color:red;}">content</td></tr>

Есть особенность использования базового класса связанная с тем, как в нем можно задать создание элементов не в строчку, а в виде матрицы. Когда в переменную $contents добавляется ассоциативный массив – предполагается, что передаваемые элементы – это одна строка. Таким образом, чтобы задать, к примеру матрицу из 3х3 элементов необходимо чтобы каждый элемент контента состоял из трех элементов, каждый из которых является массивом. Проще это продемонстрировать.

$matrix[]=array( array('text'=>'1'), array('text'=>'2'),array('text'=>'3'));
$matrix[]=array(array('text'=>'4'),array('text'=>'5'),array('text'=>'6'));
$matrix[]=array(array('text'=>'7'),array('text'=>'8'),array('text'=>'9'));

Такой код создаст таблицу:

Итак, теперь мы готовы к тому, чтобы построить собственный бокс. Но... тут кроется одна незадача, связанная с самим шаблоном. Дело в том, что размеры элементов углов и фона бокса различны. Так, размер верхнего левого угла – 20х34, правого верхнего – 28х32, фона заголовка:1х32, нижнего левого и правого угла – 40х9, а размер фона трейлера 1х9. Это при том, что поле контента должно ограничивается 8 пикселами слева и 12-ю справа. Таким образом, при существующих размерах элементов бокса в лучшем случае можно построить бокс с полями контента, ограниченного слева 20-ю и справа 28-ю пикселями. Т.е. построенный бокс будет разительно отличаться от исходных. К тому же размер кода HTML в результате будет меньше исходного примерно на 20%. Следует признать, что для построения своего бокса на указанных выше условиях элементы отображения необходимо переделывать.

Тем не менее, представляет собой интерес создание своего бокса с точки зрения кода. Для создания бокса необходимо создать новый класс, породив его от tableBox. Пример кода, создающего корректное изображение, но с большими полями слева и справа приведен ниже. Для упрощения рисуется простой бокс без стрелки в правом-верхем углу.

<tr><td>
<?php
class myBox extends tableBox{
var $matrix=array();
function myBox($header,$content){
$image_path=DIR_WS_TEMPLATES.TEMPLATE_NAME.'/images/infobox/';
$this->table_cellpadding=0;
$matrix[]=array(
array('params'=>'class=infoBoxHeading',
'text'=>tep_image($image_path.'corner_right_left.gif','','40px','32px')),
array('params'=>'align="center" background="'.$image_path.'background.gif" width="100%" class="infoBoxHeading"',
'text'=>$header),
array('params'=>'class="infoBoxHeading"nowrap',
'text'=>tep_image($image_path.'corner_right.gif').tep_image($image_path.'no_arrow_right.gif'))
);
$matrix[]=array(
array('params'=>'width="8px" style="{background:#FBFCFD url(\''.$image_path.'box_bg_l.gif\') repeat-y left top;}"',
'text'=>tep_image($image_path.'pixel_trans.gif')),
array('params'=>'class="boxText" ',
'text'=>$content),
array('params'=>'style="{background:#FBFCFD url(\''.$image_path.'box_bg_r.gif\') repeat-y right top;}"',
'text'=>tep_image($image_path.'pixel_trans.gif'))
);
$matrix[]=array(
array('params'=>' class="infoBoxHeading" ',
'text'=>tep_image($image_path.'corner_left_flip.gif')),
array('params'=>' background="'.$image_path.'backgroundfb.gif" width="100%" ',
'text'=>tep_image($image_path.'pixel_trans.gif')),
array('params'=>' class="infoBoxHeading" nowrap',
'text'=>tep_image($image_path.'corner_right_flip.gif','','28px','9px'))
);
$this->tableBox($matrix,true);
}
}

new myBox(‘Header’,’Content’);
?>
</td></tr>

Таким образом можно задать собственное отображение бокса с уменьшенным количеством кода процентов на 20-ть. Но, для того чтобы эти боксы выглядели «красиво» необходимо переделать размеры угловых элементов (ширина элементов слева 8px, а справа – 12px).