X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   Pure CSS Rounded Boxes! (no images, no tables) (https://forum.x-cart.com/showthread.php?t=33828)

typologist 09-10-2007 07:29 PM

Pure CSS Rounded Boxes! (no images, no tables)
 
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!! ;)

Vacman 09-10-2007 09:56 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Could you post a link showing an example of this?

typologist 09-11-2007 03:40 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
1 Attachment(s)
Here it is a sample of how your boxes will look. Of course you can edit how it looks in the CSS. 8)
Attachment 556

cyberdriveway 09-23-2007 11:56 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks for posting.

apanda 09-23-2007 04:32 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
=D> THANK YOU for posting this!!!

You saved me from a lot of ](*,).

dsoong 09-23-2007 09:42 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks for sharing. Have you tried this with FireFox?

dsoong 09-23-2007 09:58 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Is class xroundedcenter (used by dialog) not defined? I change it to xrounded and it is working fine in Firefox now. Thanks

ramdial 09-24-2007 07:43 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thank you for this mod!!

Andrew Gadsden 09-24-2007 03:43 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Brilliant, thanks very much. This has been on my list of jobs for a while and you have just saved me loads of time.

jmell 09-26-2007 07:46 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
I put this in my new site. But the featured products top is bad any idea?
http://onlinemacs.com/home.php


All times are GMT -8. The time now is 07:09 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.