View Single Post
  #129  
Old 01-29-2009, 08:17 PM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

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

Quote:
Originally Posted by rawle@websonet.com
rounded boxes is nice. How do i accomplish this in x-cart 4.2?

4.2 is kind of tricky, but I am working on it. But it is not easy, and the code below doesn't make it work. Read under the code posted for an explanation.

Here is what I have so far....

skin1/customer/menu_dialog.tpl (for the menu boxes)
Code:
{* $Id: menu_dialog.tpl,v 1.4 2008/11/24 09:23:19 max Exp $ vim: set ts=2 sw=2 sts=2 et: Mods - replaced entire contents to make rounded boxes *} <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" align="center">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1> <div class="content{if $additional_class} {$additional_class}{/if}">{$content}</div> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b> <b class="xb2"></b><b class="xb1"></b></b> </div>

skin1/customer/dialog.tpl (for the center boxes)
Code:
{* $Id: dialog.tpl,v 1.8 2008/11/26 06:31:47 cray Exp $ vim: set ts=2 sw=2 sts=2 et: Mods - replaced entire contents to make rounded boxes *} {if $printable ne ''} {include file="dialog_printable.tpl"} {else} <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 $printable ne 'Y'} title-with-sort-row{/if}">{$title}</h1> <div class="dialog-search-sort-bar"> {if $selected eq '' && $direction eq ''} {include file="customer/search_sort_by.tpl" selected=$search_prefilled.sort_field direction=$search_prefilled.sort_direction url=$products_sort_url} {else} {include file="customer/search_sort_by.tpl" url=$products_sort_url} {/if} </div> <div class="content{if $additional_class} {$additional_class}{/if}">{$content}</div> </div> <b class="xbottom"> <b class="xb4"></b> <b class="xb3"></b> <b class="xb2"></b> <b class="xb1"></b> </b> </div> {/if}

There are several templates that use "lists" to get the items to display. I know that categories.tpl, and help.tpl have them, and manufacturers.tpl probably does also. Anyway, I had to "convert" the <ul>s and <li>s to use simple <br /> tags to get the boxes to close and display correctly. It "works" but I'm not happy with it.

You also have to add the classes posted earlier (post #82) in this thread to your main.css stylesheet. Post #94 deals with a problem in IE that I can't seem to replicate, so you might check there if you run into a problem.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote