How to make your Joomla template keep the menus highlighted.
Joomla Menu Tutorials
Note: Since the writing of this tutorial I have found myself often using another module called Extended Menu. This is a very useful extension but people seem to find it hard to use. I will release a tutorial for it with a link from here soon because it is also capable of making your menus stay highlighted and much more.
Have you ever wanted to have a menu in your Joomla template which stays highlighted when submenu items are selected?
Well now you can!
For example, let's say you have a top menu in Joomla with a link to News. When you click this menu item Joomla will take you to a new page with News on it. Then on the left side you may have another menu which displays the submenus for news such as Updates, Top Stories, News Feeds, etc.
Now the way it works is that when you click News on the top menu it will highlight that menu item. Then when you select News Feeds on the left, for example, it will take you to the News Feeds page and the News Feeds menu item on the left will be highlighted as well as News on the top menu. When you select Top Stories it will highlight and News on the top will stay highlighted and so on.
I have come across this again and since it took me a long time to find the post I thought I would post it here as well because I know I will be running into this again and I am sure you may someday too so I may as well put it here.
How to make your Joomla template keep the menus highlighted.
Step 1 - Put the mysplitcssmenu.php which you can download here (slightly modified to work properly) into your templates directory inside of the template you want to use it on.
Step 2 - In your current Joomla templates index.php just below the line that says:
Add this new line to your template:
Step 3 - In your index.php change the call for the left and top menus as follows:
Change the code for your top menu... it might look something like:
to:
And the left menu just above where it says:
Add this:
Step 4 - The left menu is now the menu items you enter into the Joomla backend as children of the current active top menu. You simply create a new menu item in the main menu and then assign the Parent Item to whichever menu item you want it to appear on.
Step 5 - Edit your template_css.css to your liking.
This is what I did and you can use it as a template for yours if you like:
float:left;
position:absolute;
top:34px;
list-style:none;
width:426px;
text-align:left;
padding:0px;
margin:0px;
}
#navlist #active a:link, #navlist #active a:visited{
float:left;
width:auto;
line-height:20px;
list-style:none;
text-decoration:none;
color:#3e4c77;
background:url(../images/subhead_bgl.gif) repeat-x;
display:block;
padding-left:5px;
padding-right:5px;
}
#navlist #active a:hover {
color: #3e4c77;
background:url(../images/subhead_bgl.gif) repeat-x;
}
#navlist a:link, #navlist a:visited{
float:left;
width:auto;
line-height:20px;
list-style:none;
text-decoration:none;
color: #FFFFFF;
background:url(../images/subhead_bg.gif) repeat-x;
display:block;
padding-left:5px;
padding-right:5px;
border-left:1px solid #769bd5;
}
#navlist a:hover{
color:#3e4c77;
background:url(../images/subhead_bgl.gif) repeat-x;
}
#navlist li {
list-style:none;
float:left;
}
#subnavcontainer ul{
padding:0px;
margin:0px;
list-style:none;
width:100px;
text-align:left;
}
#subnavlist #active a:link, #subnavlist #active a:visited{
float:left;
margin:0px;
padding:0px;
color:#222b4e;
background-color:#e4eeff;
display:block;
width:96px;
text-indent:15px;
line-height:20px;
background-image:url(../images/arrow.png);
background-repeat:no-repeat;
background-position:right;
padding-left:2px;
padding-right:2px;
}
#subnavlist #active a:hover {
color:#222b4e;
background-color:#bacae4;
}
#subnavlist a:link, #subnavlist a:visited{
float:left;
margin:0px;
padding:0px;
color:#222b4e;
background-color:#b1caeb;
display:block;
width:96px;
text-indent:15px;
line-height:20px;
background-image: url('/../images/arrow.png');
background-repeat:no-repeat;
background-position:0px 3px;
padding-left:2px;
padding-right:2px;
}
#subnavlist a:hover{
color:#222b4e;
background-color:#bacae4;
}
#subnavlist li {
list-style:none;
float:left;
width:96px;
margin:0px;
padding:0px;
}
For those of you who want to do cross domain linking like me... or maybe there are other uses, to keep the tabs at the top, place this in your Joomla! root index.php file.
Note the sef url here and if you don't use sef, change it to your frontpage component url like this /index.php?option=com_frontpage&Itemid=1.
$parsed_url=parse_url($url);
$sub_folder = explode('/',$parsed_url['path']);
$domain=$parsed_url['scheme'].$parsed_url['host'];
if ( $url == $domain.'/' || $url == $domain.'' || $url == $domain.'/index.php') {
header("Location: ".$domain."/component/option,com_frontpage/Itemid,1/");
exit;
}
Joomla Module - Top Authors
TY2U.com News
I know it isn't a Joomla template but I thought it would come in handy for someone.
This Joomla! module will display a list of authors and the number of articles they have contributed with the most articles first.
You can set how many authors it shows from the modules parameters in the Joomla! backend.
Joomla Template Marketing Gear 1.1
Template Releases
This Joomla template was updated. There are a couple of minor fixes.
These fixes include:
- keep white background in content editing boxes when editing content in the Joomla backend
- keep white background in print window when you click the print button on a Joomla content item.
- keep search fieldset inside the template body
- added space to separate articles apart
- added space to top and bottom of inner body content
- added separator color for polls, news items, links etc.
- made font for author and dates smaller to keep it visually separate
Simple Joomla Template Released
Template Releases
I have created a new and very simple Joomla template for those of you looking for such a thing.
I named it Marketing Gear as it is geared towards marketing. It includes instructions on how to use it. It comes in 6 different colours.
You can use this extremely simple Joomla template for anything you want. It is open source. You can modify it however you like, change the colours, add extra features, etc.
Simply pick a colour and install it from within the Joomla template manager and set it as default.
For an extra bit of spice you can install all of the templates and assign them to different pages of your Joomla site from within the Joomla template manager.
You can download this from the downloads section.
Free Joomla Templates Cortrivenus 2.0
Template Releases
You asked for the features, and we put them in... Well most of them anyway.
With the ease of built in PHP functions and radical manipulation of the former Cortrivenus template I released for pre-Joomla, you now have the power to alter your sites:
-Title and slogan position and colour.
-Alignment; left, center and right.
-Background colour.
-Header image. Supports tiling of header image. Includes two examples.
-Module position points.
With the help of amazing volunteers, we have developed a unique and easy to understand system where you can quickly alter which module positions appear in each section of the template. Sections are lettered and shown in the diagram that comes with the built in help file.
The help file supports languages and uses a language file so it is easy to translate. Please upload translations to the Translation discussion area at our project so people can also download them here and verify them to be included in the next release.
Thank you!
Ryan
Page 4 of 6
