I was reading around
http://www.cssplay.co.uk/boxes/snazzy2.html and in a moment of experimentation did the following...
i added this to the bottom of my css file
.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background: transparent;
width:153px;
float:left;
margin:0 3px;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:220; /* was auto */
}
* html .xboxcontent {
height:1px;
}
.color_a { /* menu top */
background:#B64926; /* was c9ba65 */
color:#fff;
}
.color_b {
background:#CC5200; /* was d4d8bd */
color:#fff;
}
.color_c {
background:#FFF0A5;
color:#fff;
}
.color_d {
background:#FFB03B; /* was b2ab9b */
color:#fff;
}
and then changed my menu.tpl to
<table width="155" border="0">
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">{$menu_title}</h1>
<p>{$menu_content}<br></p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</table>
and bingo, i had a new menu with rounded corners.
encouraged by how easily it happened i changed dialogue.tpl to
<div class="zsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_d"></b><b class="xb3 color_d"></b><b class="xb4 color_d"></b></b>
<div class="xboxcontent">
<h1 class="color_d">{$title}</h1>
<br />
{$content}
<br />
<br class="clear" />
<p>The end</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
i wont pretent to understand all of it , and all credit to stu at css play . he would like it referenced if you use it , or a donation !
an interesting side effect is its seems very fast. the contents seem to continue to inherit styles from existing css . its pretty much cross browser, but you do need to fiddle with padding a little, and i have used tables here and there to get things to stay still !
you can see the effects on
www.sunrisedirect.co.uk , its live , so no ordering please.i am no graphic designer , so there is still a lot of that to do.
From an SEO perspective, googles text cache shows it reading straight down the page , quite neat really.
anyway , i thought i'd share it.