Thursday 8 March 2012

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;



}

1 comment:

Frank Martin said...

that is really great.
i like that because Joomla websites are easy to develop.


facebook apps | iphone apps