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)

mrerotic 09-05-2009 01:11 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
hmmm... please :) 4.2 please

PhilJ 09-06-2009 02:55 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Been asked for this many times, so I have this mod available if anyone's interested. Makes the job very easy, with minimal markup.

ARW VISIONS 10-26-2009 08:38 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
use this for 4.2 menus

<div class="menu-dialog{if $additional_class} {$additional_class}{/if}">

<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}{$title}{if $link_href}</a>{/if}</h1>
<div>
{$content}</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>

JWait 10-26-2009 01:57 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
or (for v4.2.x)....

Code:

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="menu-list content{if $additional_class} {$additional_class}{/if}">{$content}<br /></div>
</div>
<b class="xbottom">
<b class="xb4 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb2 color_a"></b>
<b class="xb1"></b></b>
</div>


The difference is the "additional classes" and the break tag at the end. Sometimes its needed, and sometimes its not. Yoou can tell you need one if you have a "blank" spot at the bottom of your rounded box.

You can use the same code for your customer/dialog.tpl and customer/menu_dialog.tpl. Just remember, it will screw up your checkout page, the one were it asks if you are a returning customer or a new one. What I did was use the original customer/dialog.tpl (renamed to flc-dialog.tpl) and called it in skin1/modules/Fast_Lane_Checkout/checkout_0_enter.tpl.

You can also change the colors between the two (menu and main page dialog) by adding the classes xboxcontent2 (for the main background) and color_b (use it at the bottom instead of color_a), making them whatever color you choose (everything else is the same).

Tim CDN 11-15-2009 07:38 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Great info for 4.2

Quick question though, when I implemented the code my menu items changed from:

Left justified with no bullets

to

Centered with bullets

Any ideas?

JWait 11-18-2009 04:31 PM

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

Originally Posted by Tim CDN
Great info for 4.2

Quick question though, when I implemented the code my menu items changed from:

Left justified with no bullets

to

Centered with bullets

Any ideas?


Its probably the "additional class" thing. If you look at your .xboxcontent class in your stylesheet it probably doesn't have any settings for "li" or "ul" (those are called in the tpl for the particular "box" you are working on).

wplume 12-13-2009 09:09 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Great mod-just can't figure out how to completely fill the boxes with a backround color-it seems to come up short at the bottom of all the boxes. Any ideas?

www.icai-online.com

Tim CDN 12-13-2009 09:12 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Probably the border colour of the menu, change the border to the same as the background

wplume 12-13-2009 09:30 PM

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

Thanks for the quick response. I changed the border-left: 1px & border-right: 1px colors to the same color as the background color in the xboxcontent string and it made no difference-any other idea's?

Thanks

JWait 12-14-2009 03:45 AM

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

Originally Posted by wplume
Great mod-just can't figure out how to completely fill the boxes with a backround color-it seems to come up short at the bottom of all the boxes. Any ideas?

www.icai-online.com


What I did was add

.color_b {
background:#000; /* Change the bottom part color here*/
}

to my skin1.css and modified my menu.tpl so that at the bottom it is

<b class="xbottom"><b class="xb4 color_b"></b><b class="xb3 color_b"></b>
<b class="xb2 color_b"></b><b class="xb1"></b></b>
</div>

You shouldn't have to mess with your borders.


All times are GMT -8. The time now is 07:52 PM.

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