X-Cart forums - Pure CSS Rounded Boxes! (no images, no tables)

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)

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

Thanks-made the changes and works great in Firefox 3.5 but I lose the left and right borders (but not the bottom border) in IE 8-any idea why?

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

JWait

Thanks again-got the IE8/Firefox problem worked out; it was a couple missing spaces between the "solid" and "color" hex number.

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

Is the code on page 1 of this post suitable for my v4.1.11 website?

The reason I want to replace my rounded corner images and boxes with pure CSS rounded boxes is to improve page load speeds and remove unnecessary images. The menus should look exactly the same as they do now. Is this worthwhile?

I am not very good at css, but I could follow the step by step instructions on page 1 if they still work.

Please help!

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

Hello.

thank you for your post.

Did anyone try it with 4.23 of 4.3?

Are there any mod to make side bar menu with rounded corner?
Are there any other posts on same topic?

thank you.

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

Quote:

Originally Posted by JWait

It is a great mod and should work with 4.2 without any problems.

did anyone tryid it with 4.23?
I have some problem.
I need ot have BG color and cusotm rounded image for header.
Aslo it break side border almost at the end of each blockhttp://www.webredesignpro.com/images/ROUNDED-CSS.jpg

Could you be so kind and give me some advice.

thank you.

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

Quote:

Originally Posted by PhilJ

Been asked for this many times, so I have this mod available if anyone's interested. Makes the job very easy, with minimal markup.

Please post link to I we can see it.
Is it paid or free mode?

Do you have demo?

thank you.

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

Just need a little help-this mod workes perfect for me in IE8 but when I use Firefox 3.5 the bottom border of the center boxes is seperated from the rest of the box. This doesn't happen on the home page, just any subcategory page and only in the center box-the right and left vertical boxes display fine in both IE8 and Firefox. You can see this in action at: http://www.icai-online.com/series-1-1-1.5-2hp/. The code has been checked several times and I can't find any bad code and it does work correctly in IE.

Anybody have this problem? Any help would be appreciated.

Thanks

Wayne

Here's a screen shot: http://forum.x-cart.com/attachment.php?attachmentid=1833&stc=1&d=126490986 3

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

Try adding a break tag to the bottom div, like this

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}<br /></div>





</div>

<b class="xbottom">

<b class="xb4"></b>

<b class="xb3"></b>

<b class="xb2"></b>

<b class="xb1"></b>

</b>

</div>

{/if}

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

JWait

I tried adding the break tag-it didn't fix the problem. Here is my dialog.tpl 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}
 </p></div>
</div>
<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>
</div>
{/if}

If you see anything that would fix the problem I'd appreciate it.

Thanks!

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

JWait

Found the problem-it was the </p> tag in the middle of the code; thanks for taking a look.