Cat Dressing won't get separate boxes as you show (though there is a trick with images I just thought of that could give that appearance), but the rest of the layout is easy.
Since Liberty Flag has a plain background, the image trick could work.
As for "automatic", there will always be a certain amount of individual attention needed. Since the headings are not actual category groups, but attached to the one category below the heading, you need to make sure that category stays the first in its group.
You will need to give each category a sort order. I suggest giving all flags sort orders of 1xx, flagpoles 5xx, street banners 10xx, etc. Be sure of the order you want the groups to display in, as it will be time-consuming to change that later. Skipping top numbers allows a group to be inserted later. Likewise, sort the categories in a group like x00, x05, x10, x15, etc.
Example:
For Flagpoles, move all the subcats up to be top cats, and give them sort orders as desired. Make "Architectural Alum" sort order 500, and in tpl_categories.php, in the switch ($current_path) { section, add a new case block (say Architectural Alum are in cat id 420):```php
switch ($current_path) {
case '23': //replace number with your desired cPath
//$content .= '<hr class="catBoxDivider" />' . "\n"; // to add divider uncomment this line
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n";
break;
case '420': //replace number with your desired cPath
//$content .= '<hr class="catBoxDivider" />' . "\n"; // to add divider uncomment this line
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Architectural Alum</span>' . $disp_block_head) . "\n";
break;
}
You would add to your stylesheet something like:
.catBoxHeading1 {background: #669900 url(../images/your_standard_cat_heading_bg.gif) no-repeat;}
or if you want to have a complete heading image with unusual text, name it cathead420.gif and save in your template's /images/ folder.
