|
Separators are always nice way to separate menu items when the menu items are in horizontal manner. We know that the menus are generated in core and we only get classes and suffixes directly in templates. However, these classes are not enough to handle some kind of stylish ways to do the things.
For example you might have seen horizontal menus as follows,
home | about us | services | contact us
CSSifying the above behaviour may be like setting the pipe character or pipe character in image. Adding pipe character is complex task. However, adding background image of pipe character is easy with css classes.
The effect can be obtained with following similar code,
background : url(../images/pipechar.png) top right no-repeat;
However, the problem is that the pipe character image will be set to last item also. Hence it will be looking like following,
home | about us | services | contact us |
Notice the last pipe character. Hence we need to remove that to make it better and perfect. For this kind of think generally designers use a technic called "first item" and "last item" in UL LI css tag. So setting the first LI with class "firstItem" and setting last LI with class "lastItem" can help arrange hiding or removing the last background image of last item.
For example, we can set something like,
ul.menu li.lastItem
{
background : none;
}
Ok, Tell me how to do it.
Yes, i hear you.
Joomla gives option of overriding almost any output of modules or components from custom templates itself. We can modify the output of mod_login, mod_latestnews or com_content in anyway we want so the look and feel will be more designer specific and not Joomla specific.
First copy the /modules/mod_mainmenu/tmpl/default.php To /templates/any_of_your_template/html/mod_mainmenu/default.php
If html folder is not available in template, create it please. In the same way you can create mod_mainmenu folder and then you can copy default.php to the new place.
This default.php is the magic place where you can handle the output of any menu. Please note the word "any menu" which means it can handle vertical, horizontal or list menu.
For more information, here is a clear blog post that describes how to do it,
I will be updating this post once i get my own version of custom menu hack for this purpose. Until then, please play on your own way with the above link. |
Web Arch Joomla template (3011)
