X-Cart forums - rounded corners on catagorys

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - rounded corners on catagorys (https://forum.x-cart.com/showthread.php?t=14126)

rounded corners on catagorys

rounded corners on catagorys,seen it on a few sites any idea how its dun :)

anyone no how to do this please?

You might want to be more specific about what you mean...

Give some example URL's etc.

instead of square boxes on catagorys ide like to round the corners :)

What do you mean by "categories"?!
Are you talking the left category column box, the centre category columns, the main category box... What?

Show a URL of an example you mention and I think you will find more help comes your way.

were it says catagories bestseller user online there all surrounded by a square box just wanna round the corners on um all :)

Its not a simple thing. You have to know webdesign to do it. You have to use images in each corder that covers up the squared table border. Employ a web designer to do it for you and add it to your templates.

Once you do one...it's quite easy to do the rest.

You only need basic html really.

We have this in our store and use the following code if you want a tip:

Code:

<table width="155"  border="0" cellspacing="0" cellpadding="0" background="/style/ct/images/menu_bg.jpg">

<tr>

<td width="13">[img]/style/ct/images/menu_left.gif[/img]</td>

<td><font class="DialogTitle">Products</font></td>

<td width="15" align="right">[img]/style/ct/images/menu_right.gif[/img]</td>

</tr>

</table

There are two ways to do the round corner on menu:

1. create a left and right corner images, use table to put the images on the right location and other area uses back ground color.

- advantages: less images to load and reduce bandwidth
- disadvantages: html codes will be complicated

2. create an image as a shape of menu top and use it as back ground image.

- advantages: html codes will be very simple
- disadvantages:larger size image to load and increase bandwidth

Quote:

Originally Posted by Yang Xu

1. create a left and right corner images, use table to put the images on the right location and other area uses back ground color.

- advantages: less images to load and reduce bandwidth
- disadvantages: html codes will be complicated

2. create an image as a shape of menu top and use it as back ground image.

- advantages: html codes will be very simple
- disadvantages:larger size image to load and increase bandwidth

I need some help with this myself. Where exactly do I put the html code for the left & right corner images? I've tried putting them in different parts and it always comes out looking funky. Here's the original code (except I took out the dingbats & the menu border):

Quote:

<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuBorder">
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuTitle">{$link_begin}[img]{$ImagesDir}/{if $comment ne ''}{$comment}{else}spacer.gif{/if}[/img]{$link_end}
{if $link_href}
<FONT class="VertMenuTitle">{$menu_title}</FONT>
{else}
<FONT class="VertMenuBoxNewsTitle">{$menu_title}</FONT>
{/if}
</TD>
</TR>
<TR>
<TD class="VertMenuBox">
<TABLE border="0" cellpadding="5" cellspacing="0" width="100%">
<TR>
<TD>{$menu_content}
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>

And this is what I get when I put the codes where I "thought" they went. :roll:
http://www.piercedplanet.com/xcart/home.php

Quote:

<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuBorder">
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD width="15">[img]/top_tab_left.gif[/img]</TD>
<TD class="VertMenuTitle">{$link_begin}[img]{$ImagesDir}/{if $comment ne ''}{$comment}{else}spacer.gif{/if}[/img]{$link_end}
{if $link_href}
<FONT class="VertMenuTitle">{$menu_title}</FONT>
{else}
<FONT class="VertMenuBoxNewsTitle">{$menu_title}</FONT>
{/if}
</TD>
<TD width="15" align="right">[img]/top_tab_right.gif[/img]</TD>
</TR>
<TR>
<TD class="VertMenuBox">
<TABLE border="0" cellpadding="5" cellspacing="0" width="100%">
<TR>
<TD>{$menu_content}
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>

Any help is greatly appreciated! :D