|
How to stylize a Joomla menu button with CSS |
In this tutorial we'll see how to customize a Joomla button using Cascading Style Sheet (CSS).
First of all you have to know that there are more posibilities to customize the template. One of them would be integrating a module into a div that has a certain css id and then you can play with the ul, li, a style properties.
 For example, to have a menu like in the left image, you can create a div with the id named "top_menu" and put the <?php mosLoadModules ( 'top' ); ?> tag into it.
The code should look like that.
<div id="top_menu">
<?php mosLoadModules ( 'top' ); ?>
</div>
Read more on how to customize Joomla menu items using CSS »
The CSS code for the menu should look like this (if you've selected Flat list view of the menu in the administrator area at modules > sites modules):
#top_menu {
float: left;
position: relative;
font-size: 11px;
}
#top_menu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}
#top_menu li {
margin: 0px;
padding: 0px;
display: inline;
}
#top_menu a {
display: block;
position: relative;
float: left;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
text-transform: uppercase;
color: #fff;
background: url(../images/link.gif) repeat-x;
}
#top_menu a:hover {
color: #111;
background: url(../images/hover.gif) repeat-x;
}
And... it's done.
The second way you can customize a Joomla using CSS is to "play" with the mainlevel class, which is by default given to Joomla menu items. You can add a Menu class Suffix in the Administration Area > Modules > Site Modules > Main Menu (or another menu you want to customize).
And using these two possibilities to customize the menu items using CSS, you can control the way Joomla menu items behave and look.
|
Joomla Tutorials 
For example, to have a menu like in the left image, you can create a div with the id named "top_menu" and put the <?php mosLoadModules ( 'top' ); ?> tag into it. 
