Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

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

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 09-10-2007, 07:29 PM
 
typologist typologist is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 51
 

Default 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!!
__________________
4.1.8 Gold (Unix)
Reply With Quote
  #2  
Old 09-10-2007, 09:56 PM
  Vacman's Avatar 
Vacman Vacman is offline
 

X-Adept
  
Join Date: Sep 2005
Location: Torrance, CA
Posts: 792
 

Default Re: Pure CSS Rounded Boxes! (no images, no tables)

Could you post a link showing an example of this?
__________________
Carl Tice

X-Cart 4.6.6
X-Payments 3.0
ReBOOT 3.4.1

PHP 5.6.30
MySQL 5.6.35
Linux 2.6.32-042stab120.18
ionCube PHP Loader v4.7.3
Perl 5.10.1
Reply With Quote
  #3  
Old 09-11-2007, 03:40 AM
 
typologist typologist is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 51
 

Default Re: Pure CSS Rounded Boxes! (no images, no tables)

Here it is a sample of how your boxes will look. Of course you can edit how it looks in the CSS.
Click image for larger version

Name:	rounded-box.gif
Views:	1583
Size:	2.2 KB
ID:	556
__________________
4.1.8 Gold (Unix)
Reply With Quote
  #4  
Old 09-23-2007, 11:56 AM
 
cyberdriveway cyberdriveway is offline
 

Advanced Member
  
Join Date: Aug 2004
Location: California
Posts: 32
 

Default Re: Pure CSS Rounded Boxes! (no images, no tables)

Thanks for posting.
__________________
Tyson McPherson
X-Cart version 4.1.8
PHP 4.3.9
MySQL server 4.1.12-log
MySQL client 4.1.12
Web server Apache/2.0.52 (Red Hat)
Operation system Red Hat 3.4.6-2
Reply With Quote
  #5  
Old 09-23-2007, 04:32 PM
 
apanda apanda is offline
 

Member
  
Join Date: Sep 2007
Posts: 24
 

Default Re: Pure CSS Rounded Boxes! (no images, no tables)

THANK YOU for posting this!!!

You saved me from a lot of .
__________________
X-Cart Pro v4.1.8 [Linux]
Reply With Quote
  #6  
Old 09-23-2007, 09:42 PM
 
dsoong dsoong is offline
 

Advanced Member
  
Join Date: Jan 2007
Posts: 94
 

Default Re: Pure CSS Rounded Boxes! (no images, no tables)

Thanks for sharing. Have you tried this with FireFox?
Reply With Quote
  #7  
Old 09-23-2007, 09:58 PM
 
dsoong dsoong is offline
 

Advanced Member
  
Join Date: Jan 2007
Posts: 94
 

Default 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
Reply With Quote
  #8  
Old 09-24-2007, 07:43 AM
 
ramdial ramdial is offline
 

Advanced Member
  
Join Date: Jul 2003
Posts: 59
 

Default Re: Pure CSS Rounded Boxes! (no images, no tables)

Thank you for this mod!!
__________________
xcart4.3.2
CDSEO
Reply With Quote
  #9  
Old 09-24-2007, 03:43 PM
 
Andrew Gadsden Andrew Gadsden is offline
 

Member
  
Join Date: Aug 2006
Location: Portsmouth, UK
Posts: 20
 

Default 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.
__________________
Andrew Gadsden
xcart 4.1.8 [unix]

http://www.allabouttea.co.uk

The home of Tea on the Web - forum members please use code XCART-77 for a 10% discount!
Reply With Quote
  #10  
Old 09-26-2007, 07:46 AM
 
jmell jmell is offline
 

Senior Member
  
Join Date: Sep 2003
Posts: 127
 

Default 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
__________________
X-Cart 4.1.9
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 03:43 PM.

   

 
X-Cart forums © 2001-2020