Background behind categories

[gjh42]

Two questions before approaching the coding for this:
Do you want the categories box to look like the Kundkorg box above it? That one uses the "left2" style, and might just drop over the categories box naturally (or it might only work for a small box).

If you need to make a new box, will it work to have a fixed width box, or might you ever want to change the width? Fixed width is significantly simpler to code for.

[gjh42]

Playing with an example...

Assume that .ml16 only applies to the categories box (it's certainly the only one in #navColumnOne).

You can test this by searching with the Developers Toolkit (bottom left box) for any other instances of ml16 or left1. I'm not positive this will pick up all occurrences in the output, but it's worth doing.

We can use the existing "left1" style case and modify it, so there will be no need for editing other files, except the location where the box is ended.
For a fixed width box with round corners, find this

case 'left1':
{
$ret = ''.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '7px').'<br>
<div class="ml16"> <span class="title1_txt">'.$text.'</span><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '10px').'<br>
<div class="ml8">';
break;
} 

There are two images used as spacers, which are totally unnecessary - margins on existing classes can do the same job easier.
One new div will be needed to make the second half of the box - say ".ml16Box".

case 'left1':
{
$ret = ''.'<div class="ml16"><div class="ml16Box"><span class="title1_txt">'.$text.'</span><br>'
<div class="ml8">';
break;
} 

In your stylesheet, modify or add

#navColumnOne .ml16 {
    width: xxxpx; /*whatever you want it fixed at - same as other left boxes*/
    margin: 7px 0 0 16px; /*7px top, 16px left*/
    padding-bottom: 13px; /*equal to height of box bottom image*/
    background: url(../images/ml16bottom.gif) bottom center;
    }

#navColumnOne .ml16Box {
    background: url(../images/ml16box.gif) top center;
    }

.ml16Box .title1_txt {
    margin-bottom: 10px;
    }

Make box background images ml16box.gif with the top corners and taller than you ever expect the box to be, and ml16bottom.gif with the bottom corners and only as tall as needed for the corners. Save them in /includes/templates/your_template/images/.