I love the look of then Joomlashack Lightfast template but I thought it would be nicer with a little touch-up. I thought, What this template needs is another menu replacing the ‘ breadcrumbs pathway’ with the ‘main menu’? If you follow this tutorial you should get something like the picture below.
For starters in your index.php find the following code:
require($mosConfig_absolute_path.”/templates/js_lightfast/csstabmenus.php”);
?>
</head>
<body>
<div id=”wrap”>
<div id=”wrap-inner”>
<div class=”topbar”><?php mosGetTabMenu(‘topmenu’);?>
<h1><a href=”index.php” title=”<?php echo $mosConfig_sitename; ?>”><?php echo $mosConfig_sitename; ?></a></h1>
</div>
<div id=”headerleader”><?php mosLoadModules ( ‘user3′,-3 ); ?></div>
<div id=”path”><div class=”pathleft”><div class=”inside”><?php mosPathWay(); ?></div>
And replace it with…NOTE You may need to adjust the path for your own site.
require($mosConfig_absolute_path.”/templates/js_lightfast_black/cssdropmenus.php”);
?>
</head>
<body>
<div id=”wrap”>
<div id=”wrap-inner”>
<div class=”topbar”><?php mosGetTabMenu(‘topmenu’);?>
<h1><a href=”index.php” title=”<?php echo $mosConfig_sitename; ?>”><?php echo $mosConfig_sitename; ?></a></h1>
</div>
<div id=”headerleader”><?php mosLoadModules ( ‘user3′,-3 ); ?></div>
<div id=”path”><div class=”pathleft”><div class=”inside”><?php mosGetDropMenu(‘mainmenu’);?></div>
At this point you need to make a copy of ‘csstabmenus.php’ named ‘cssdropmenus.php’ Then open it in your editor of choice and change to all occurrences of the following:
Now add the following css to your base.css
#navdrop ul{list-style: none;margin: 0;padding: 0;}
#navdrop a{float: none;}
#navdrop li{float: left;height: 20px;margin-bottom: 0;margin-left: 4px;margin-right: 4px;margin-top: 0;padding-bottom: 0;padding-left: 5px;padding-right: 0;padding-top: 0;}
#navdrop li a{color: #fff;display: block;float: left;font: bold 11px/20px Tahoma, Arial;height: 20px;padding-bottom: 0px;padding-left: 0px;padding-right: 5px;padding-top: 0px;text-decoration: none;}
div#navdrop li:hover, div#navdrop li.sfhover{background: url(../images/tmenu_over_l.png) no-repeat bottom left;}
div#navdrop li:hover a, div#navdrop li.sfhover a{background: url(../images/tmenu_over_r.png) no-repeat bottom right;color: #3982FF;}
div#navdrop li.active a{background: url(../images/tmenu_active_r.png) no-repeat bottom right;color: #FFF;}
div#navdrop li.active{background: url(../images/tmenu_active_l.png) no-repeat bottom left;}
The last thing you will want to do is replace these two images to make the menus look correct. They are both attached.
Popularity: 12% [?]
You can receive our articles for free on your email inbox, with more web design, template, CMS and blog tips.
hi…I am looking at my index.php and not finding anything like this code. I really like this idea, and idea why the code is different?
Hi Boomshot
What version of LF are you using? This code was from the 1.x version.
Dave
ahhh it’s the latest….I think its just a module now…what do you think?
foodiewest.com