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

Here is my code for rounded edges.
If you need more you can read "extra" below.

Code:

<TABLE width=100% border=0 align="center" cellPadding=0 cellSpacing=0 bgColor=#e180d7>

  <TBODY>

    <TR>

      <TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/m1.gif[/img]</TD>

      <TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>

      <TD vAlign=top align=right>[img]{$ImagesDir}/m2.gif[/img]</TD>

    </TR>

    <TR>

      <TD vAlign=top colSpan=3><table width="100%"  border="0" cellspacing="0" cellpadding="10">

          <tr>

            <td><div align="center" class="sub2">{$menu_title} 




            </div>

            <div align="left">{$menu_content}

        




            </div></td>

          </tr>

      </table></TD>

    <TR>

      <TD vAlign=bottom align=left width=4 height=4>[img]{$ImagesDir}/m3.gif[/img]</TD>

      <TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>

      <TD vAlign=bottom align=right>[img]{$ImagesDir}/m4.gif[/img]</TD>

    </TR>

  </TBODY>

</TABLE>

-------------------------------------------------

EXTRA:

I'm no design whizz or anything like that but here is my code for rounded edges on a 2 columed site with 100% height.
It will look like this
http://www.urbanspirit.co.uk/store/pages.php?pageid=4

The corner gifs are named c1-c4 etc and any other gifs are just 1x1 spacers.

The main 2 colums for home.tpl
This includes the rounded edges for the main content section but not the for the menus which are below.

Code:

<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="100%" rowspan="3" valign="top" bgcolor="#FFB1F7"><table width="100%" height="100%" border=0 cellpadding="10" cellspacing="0">

        <tr>

          <td height="100%"><table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">

              <tr>

                <td width="170" valign="top"><TABLE width=100% height="100%" border=0 cellPadding=0 cellSpacing=0>

                    <TR>

                      <TD colSpan=3 vAlign=top>{ include file="customer/categories.tpl" } { include file="customer/menu_cart.tpl" } { include file="modules/Bestsellers/menu_bestsellers.tpl" } {include file="help.tpl"} {if $main ne "catalog" or $current_category.category ne ""} {if $active_modules.Manufacturers ne "" and $config.Modules.manufacturers_menu eq "Y"} { include file="modules/Manufacturers/menu_manufacturers.tpl" } {/if} {include file="customer/special.tpl"} {if $active_modules.Interneka ne ""} { include file="modules/Interneka/menu_interneka.tpl" } {/if} {/if} </TD>

                    <TR>

                      <TD width=4 height=4 align=left vAlign=bottom bgcolor="#e180d7">[img]{$ImagesDir}/XY.gif[/img]</TD>

                      <TD bgcolor="#e180d7">[img]1x1.gif[/img]</TD>

                      <TD height="100%" align=right vAlign=bottom bgcolor="#e180d7">[img]{$ImagesDir}/XZ.gif[/img]</TD>

                    </TR>

                </TABLE></td>

                <td width="10">[img]{$ImagesDir}/spacer.gif[/img]</td>

                <td valign="top"><TABLE width=100% height="100%" border=0 cellPadding=0 cellSpacing=0 class="back">

                    <TBODY>

                      <TR>

                        <TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/c1.gif[/img]</TD>

                        <TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>

                        <TD vAlign=top align=right>[img]{$ImagesDir}/c2.gif[/img]</TD>

                      </TR>

                      <TR>

                        <TD vAlign=top colSpan=3><table width="100%"  border="0" cellspacing="0" cellpadding="10">

                            <tr>

                              <td>{if $main ne "catalog" or $current_category.category ne ""}{include file="location.tpl"}{/if} 




                                {if $main ne "catalog" or $current_category.category ne ""}{/if} {include file="dialog_message.tpl"} {if $active_modules.Special_Offers ne ""} {include file="modules/Special_Offers/customer/new_offers_message.tpl"} {/if} {include file="customer/home_main.tpl"}</td>

                            </tr>

                        </table></TD>

                      <TR></TR>

                      <TR>

                        <TD vAlign=bottom align=left width=4 height=4>[img]{$ImagesDir}/c3.gif[/img]</TD>

                        <TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>

                        <TD vAlign=bottom align=right>[img]{$ImagesDir}/c4.gif[/img]</TD>

                      </TR>

                    </TBODY>

                </TABLE></td>

              </tr>

          </table></td>

        </tr>

    </table></td>

  </tr>

  <tr> </tr>

  <tr> </tr>

</table>

The two gifs named XY and XZ are the bottom half of the last menu box(help).
The last menu box needs to be split in half because if you 100% height it you will get overscroll in mozilla.
This was the only work around i could find.

The top half of the last menu(help) is just a new menu.tpl with the top half code.
I called mine menu2.tpl and called that up in the the last menu (help.tpl)

Menu2.tpl code

Code:

<table width="100%" border=0 cellpadding="0" cellspacing="0">

  <tr>

    <td height="100%" valign="top"><TABLE width=100% border=0 cellPadding=0 cellSpacing=0 bgcolor="#E180D7">

        <TBODY>

          <TR>

            <TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/m1.gif[/img]</TD>

            <TD>[img]1x1.gif[/img]</TD>

            <TD vAlign=top align=right>[img]{$ImagesDir}/m2.gif[/img]</TD>

          </TR>

          <TR>

            <TD height="100%" colSpan=3 vAlign=top><table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="10">

                <tr>

                  <td><div align="center" class="sub2">[img]{$ImagesDir}/spacer.gif[/img]{$menu_title} 




                    </div>

                      <div align="left">{$menu_content} 




                    </div></td>

                </tr>

            </table></TD>

        </TBODY>

    </TABLE></td>

  </tr>

</table>

The last piece of code if for the bog standard menu boxes that don't need stretching (everyone but the last)
I just made another new menu.tpl (menu3.tpl) and called that up for all the menus that need round edges.

Code:

<TABLE width=100% border=0 align="center" cellPadding=0 cellSpacing=0 bgColor=#e180d7>

  <TBODY>

    <TR>

      <TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/m1.gif[/img]</TD>

      <TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>

      <TD vAlign=top align=right>[img]{$ImagesDir}/m2.gif[/img]</TD>

    </TR>

    <TR>

      <TD vAlign=top colSpan=3><table width="100%"  border="0" cellspacing="0" cellpadding="10">

          <tr>

            <td><div align="center">[img]{$ImagesDir}/spacer.gif[/img]{$menu_title}                         




            </div>

            <div align="left">{$menu_content}

            




            </div></td>

          </tr>

      </table></TD>

    <TR>

      <TD vAlign=bottom align=left width=4 height=4>[img]{$ImagesDir}/m3.gif[/img]</TD>

      <TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>

      <TD vAlign=bottom align=right>[img]{$ImagesDir}/m4.gif[/img]</TD>

    </TR>

  </TBODY>

</TABLE>

If anyone has an easier solution please post it :)