How Do I Round The Edges On The Menu Boxes
 

How Do I Round The Edges On The Menu Boxes to give the site more than just a boxy look

Do it with a graphic border instead of a table one. You need to edit the template file skin1/menu.tpl

I am new to this and have limited experience. I am designing my own site and would like to know how to round off the edges on the menu boxes too. I understand that I will need to create the image in Photoshop, but do I have to delete the menu header and replace it with a complete graphic or can I insert rounded images in the corners?

Thanks for your understanding.

The best way to do it is to make a 3x3 table in the menu.tpl. insert your images into the corner cells, your menu title in the middle cell of the top row and your content into the middle cell of the 2nd row.

Thanks for your prompt reply longhorn180. I have managed to put in the corners but have lost the CSS for the box. Is that meant to be and do I have to shade manually or can I still use CSS to change colours for both the Titles and shading?

Many thanks.

Did you use the css from the original menu.tpl file? If not you can go to your skin1_original/menu.tpl, copy it from there to your new menu file wherever it needs to be and that should fix it.

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

Thank you for you help - very much appreciated. I have added the corner edges and set the cellspacing and cellpadding to 0 but have now lost the thin border around the main body of the verticalmenu. Would anybody be able to let me know how to get that back?

Many thanks.

Longhorn180 & Yang Xu - thank you for your help. Ignore the last note, I have managed to do it. I was being stuipd and forgot to close the table before inserting the menuborder CSS for the main body of the menu.

Thanks once again.

H

Can you post a link to your site so we can see how the rounded corners came out?

Thanks :)
Lynn