Snippet: CSS Rounded Corners - CSS - X-Cart Snippets - X-Cart Mods

This is one easy way to achieve rounded corners with X-Cart.

This is for v4.3.x

Add this CSS...

/*--------------------------------------------------------
MENU & DIALOG ROUNDED BORDERS
--------------------------------------------------------*/
/*--------- MENUS ----------*/
.mborders { width: 100%; margin-bottom: 10px; }
.mborders h3 { margin: 0; font-size: 1.3em; text-transform: none; font-weight: bold; padding: 0 5px 5px 5px; }
.mtop, .mbottom { display: block; background: transparent; font-size: 1px; }
.mb1, .mb2, .mb3, .mb4 { display: block; overflow: hidden; }
.mb1, .mb2, .mb3 { height: 1px; }
.mb2, .mb3, .mb4 { background: #fff; border-left: 1px solid #666; border-right: 1px solid #666; }
.mb1 { margin: 0 5px; background: #666; }
.mb2 { margin: 0 3px; border-width: 0 2px; }
.mb3 { margin: 0 2px; }
.mb4 { height: 2px; margin: 0 1px; }
.mboxcontent { display: block; border: 0 solid #666; border-width: 0 1px; height: auto; background: #fff; }
* html .mboxcontent { height: 1px; }
.mboxpadding { padding: 3px 5px 3px 5px; background: #fff; }
.mboxpadding p { margin: 0 0 10px 0; }
/*--------- DIALOGS ----------*/
.dborders { width: 100%; margin-bottom: 10px; }
.dborders h2 { margin: 0; font-size: 1.5em; text-transform: none; font-weight: bold; padding: 0 5px 5px 5px; }
.dtop, .dbottom { display: block; background: transparent; font-size: 1px; }
.db1, .db2, .db3, .db4 { display: block; overflow: hidden; }
.db1, .db2, .db3 { height: 1px; }
.db2, .db3, .db4 { background: #fff; border-left: 1px solid #666; border-right: 1px solid #666; }
.db1 { margin: 0 5px; background: #666; }
.db2 { margin: 0 3px; border-width: 0 2px; }
.db3 { margin: 0 2px; }
.db4 { height: 2px; margin: 0 1px; }
.dboxcontent { display: block; border: 0 solid #666; border-width: 0 1px; height: auto; background: #fff; }
* html .dboxcontent { height: 1px; }
.dboxpadding { padding: 3px 5px 3px 5px; background: #fff; }
.dboxpadding p { margin: 0 0 10px 0; }
/*--------- COLOURS ----------*/
.menu_colour { background: #666; color: #fff; }
.dialog_colour { background: #666; color: #fff; }
.blank { background: #fff; }
.filled { background: #eee; }

If you want to preserve the admin dialog/menus...

{if $usertype eq "A" || ($usertype eq "P" && $active_modules.Simple_Mode ne "")}
Admin Code
{else}
Customer Code
{/if}

Dialog Boxes: skin1/customer/dialog.tpl

<div class="dborders"> 
<b class="dtop"><b class="db1"></b><b class="db2 dialog_colour"></b><b class="db3 dialog_colour"></b><b class="db4 dialog_colour"></b></b> 
<div class="dboxcontent"> 
<h2 class="dialog_colour">{$title}</h2> 
<div class="dboxpadding">{$content}</div> 
</div> 
<b class="dbottom"><b class="db4"></b><b class="db3"></b><b class="db2"></b><b class="db1"></b></b> 
</div>

Menu Boxes: skin1/customer/menu_dialog.tpl

<div class="mborders">
<b class="mtop"><b class="mb1"></b><b class="mb2 menu_colour"></b><b class="mb3 menu_colour"></b><b class="mb4 menu_colour"></b></b>
<div class="mboxcontent">
<h3 class="menu_colour">{$title}</h3>
<div class="mboxpadding">{$content}</div>
</div>
<b class="mbottom"><b class="mb4"></b><b class="mb3"></b><b class="mb2"></b><b class="mb1"></b></b>
</div>

These are additional templates...

Rounded Boxes: skin1/customer/dialog_blank.tpl

<div class="dborders">
<b class="dtop"><b class="db1"></b><b class="db2 blank"></b><b class="db3 blank"></b><b class="db4 blank"></b></b>
<div class="dboxcontent">
<div class="dboxpadding blank">{$content}</div>
</div>
<b class="dbottom"><b class="db4 blank"></b><b class="db3"></b><b class="db2 blank"></b><b class="db1"></b></b>
</div>

Rounded Boxes with a Filled Colour: skin1/customer/dialog_filled.tpl

<div class="dborders">
<b class="dtop"><b class="db1"></b><b class="db2 filled"></b><b class="db3 filled"></b><b class="db4 filled"></b></b>
<div class="dboxcontent">
<div class="dboxpadding filled">{$content}</div>
</div>
<b class="dbottom"><b class="db4 filled"></b><b class="db3 filled"></b><b class="db2 filled"></b><b class="db1"></b></b>
</div>

See also this freebie mod