[Tim CDN]

Hi all

I have been working on a solution, and have compiled some code that is working well.

Here you go!

Add this to the bottom of skin1/main.css

.xrounded h1, .zrounded h1 {
margin:0; 
font-size:1.0em; /* Change menu header font size */
padding:0 8px 3px 8px; 
border-bottom:1px solid #464141;
}
.xrounded p, .zrounded p {
margin:0; 
padding:5px 0; 
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent; 
width:100%;   /* Adjust the width here */
float:left; 
margin:0 0 15px 0;
line-height:125%;
}
.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 #464141;
border-right:1px solid #464141;
}
.xb1 {
margin:0 5px; 
background:#464141;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}
.xboxcontent {
display:block;
border:0 solid #464141; 
border-width:0 1px; 
height:auto;
background:#f8f8f9;
}
.xboxcontent ul {
  list-style: none;   /* This removes the bullets and indent from the ul style */
  padding: 10px 0px 0px 0px;
  margin: 0px;
}
.xboxcontent ul a{
  text-decoration: none;
}
div.xboxcontent div{
padding: 0px 4px 0 8px;
}
.xboxcontentmain {
display:block; 
border:0 solid #464141; 
border-width:0 1px; 
height:auto;
background:#fff;
}
div.xboxcontentmain div{
padding: 10px;
}
* html .xboxcontent {
height:1px;
}
.color_a {
background: #464141; /* Change menu header colour and text colour */
color:#fff;
}
.color_a a{
color:#fff; /* This changes the colour of the Help menu link and removes the underline */
text-decoration: none;
}

Change the code in skin1/menu_dialog.tpl to this:

<div class="xrounded{if $additional_class} {$additional_class}{/if}">
<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 {if $additional_class} {$additional_class}{/if}">
<h1 class="color_a">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>
<div class="menu-list content{if $additional_class} {$additional_class}{/if}">{$content}<br /></div>
</div>
<b class="xbottom">
<b class="xb4 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb2 color_a"></b>
<b class="xb1"></b></b>
</div>

Change the code in skin1/dialog.tpl to this:

<div class="xrounded{if $additional_class} {$additional_class}{/if}">
<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="xboxcontentmain {if $additional_class} {$additional_class}{/if}">
<h1 class="color_a">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>
<div class="xboxcontentmain {if $additional_class} {$additional_class}{/if}">{$content}<br /></div>
</div>
<b class="xbottom">
<b class="xb4 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb2 color_a"></b>
<b class="xb1"></b></b>
</div>