Pure CSS Rounded Boxes! (no images, no tables)

typologist · #1 09-10-2007, 07:29 PM

Rounded boxes are a very cool feature in any design. Most of them use images or tables to achieve this effect, but this solution is only CSS based, and all browsers compatible. I Adapted from Nicholls boxes code. Enjoy:

To replace only your sideboxes:

1. In skin1.css and in skin1_admin.css add this:

Code:

/*Round corner sideboxes*/

.xrounded h1, .zrounded h1 {
margin:0; 
font-size:1.2em; 
padding:0 8px 3px 8px; 
border-bottom:1px solid #d0d0d0;
}
.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 #d0d0d0;
border-right:1px solid #d0d0d0;
}
.xb1 {
margin:0 5px; 
background:#d0d0d0;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #d0d0d0; 
border-width:0 1px; 
height:auto;
background:#fff;
}

div.xboxcontent div{
padding: 0 4px 0 8px;

}

* html .xboxcontent {
height:1px;
}

.color_a {
background: #A5D3FF; /* Change the top part color here*/
color:#000;
}

2. In menu.tpl, replace all the code with this:

Code:

<div class="xrounded">
<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">{if $link_href}<a href="{$link_href}">{/if}{$menu_title}{if $link_href}</a>{/if}</h1>
<div><p>
{$menu_content}</p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

To replace your dialog boxes (center boxes):

1. Do step one above, if not done.
2. In dialog.tpl, replace all the code with this:

Code:

  
{* $Id: dialog.tpl,v 1.25 2005/12/20 08:50:49 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<div class="xrounded">
<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">{$title}</h1>
<div>{$content}
&nbsp;</p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
{/if}

To replace your product list boxes (boxes around each product thumb):

1. Do step one at the beggining of this post, if not done.
2. In customer/main/products_t.tpl, replace this:

Code:

  
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
    <td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
    </td>
</tr>
</table>

with this:

Code:

  
<div class="xroundedthumb">
<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">{if $link_href}<a href="{$link_href}">{/if}{$menu_title}{if $link_href}</a>{/if}</h1>
<div><p>
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}    </p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

3. In skin1.css add this (below the code in step1):

Code:

.xroundedthumb h1, {
margin:0; 
font-size:1.2em; 
padding:0 8px 3px 8px; 
}
.xroundedthumb p, {
margin:0; 
padding:5px 0; 
font-size:10px;
line-height:125%;
}
.xroundedthumb {
background: transparent; 
width:100%; 
float:left; 
margin:0 0 15px 0;
line-height:125%;
}

I replaced all the tables with divs, to improve speed and control. Remember that you can further edit the css to use another font color, size, box width, etc. Hope it helps!!