Making a Joomla 2.5 Menu with Rounded buttons in CSS

The target here was to make a menu set in Joomla look a bit nicer and have rounded edges. With the minimal amount of image used.

> The first thing to do is make yourself a button and divide this into 3 bit. * left * middle and * right

Note: the middle bit only needs to be 1pix wide as it will vbe repeated on the x axis ( across )

> secondly we need to make a menu display other than default. The way to do this is to download the folder /modules/mod_menu

COPY THESE FILES

modules/mod_menu/tmpl/default.php

modules/mod_menu/tmpl/default_component.php

modules/mod_menu/tmpl/default_seperator.php

modules/mod_menu/tmpl/default_url.php

and rename them - you can change the name 'default' to your preference. In this example I renamed them to 'rounded'

modules/mod_menu/tmpl/rounded.php

modules/mod_menu/tmpl/rounded_component.php

modules/mod_menu/tmpl/rounded_seperator.php

modules/mod_menu/tmpl/rounded_url.php

Now go through all the documents and find all instances of 'default' and change to 'rounded'

NOW OPEN

modules/mod_menu/tmpl/rounded.php

on line 48

CHANGE

echo '<li'.$class.'>';

to

echo '<li'.$class.'><div class="menuleft"></div><div class="menumiddle">';

on line 74

CHANGE

echo '</li>';

TO

echo '</div><div class="menuright"></div></li>';

NOW ADD THIS CSS to your CSS file

div.menuleft{

background-image:url("images/menuleft.jpg");

background-repeat:no-repeat;

width:3px;

height:25px;

float: left;

}

div.menuright{

background-image:url("images/menuright.jpg");

background-repeat:no-repeat;

width:5px;

height:25px;

float: left;

}

div.menumiddle {

background: url("images/buttonbackground.jpg") repeat-x scroll left center transparent;

display: block;

max-width: 150px;

min-width: 150px;

text-align: center;

height: 25px;

float: left;

}