Joomla Templates Club 406,261 posts

[malc Friend malcJoin date: October 2009Posts: 10Downloads:3Uploads:0 Thanked: 1 times in 1 posts]

#147629

I’m using the Dropline menu with different colours as per the default settings. These are important as its easier for users to remember a section/category by its colour. What makes this difficult is the mouseovers of the top menu are always grey.

What I would like to achieve is to get the mouseovers the same colour as each section or category – anyone done this or have an idea how to?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#329591

Hello guy!

I try to custom the ja menu to complete the idea you need. Here is the solution for you:

Now, Add those rules in to the template.css

/**
* Custom ja – top menu
*/
#jasdl-mainnav li.hover a.ja-cyan,
#jasdl-mainnav li a.ja-cyan:hover,
#jasdl-mainnav li a.ja-cyan:focus,
#ja-splitmenu li.ja-cyan a:hover,
#ja-splitmenu li.ja-cyan a:focus,
#ja-cssmenu li a.ja-cyan:hover,
#ja-cssmenu li a.ja-cyan:focus {
background: url(../images/cyan/mainnav-active.gif) repeat-x top #1a8489;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-orange,
#jasdl-mainnav li a.ja-orange:hover,
#jasdl-mainnav li a.ja-orange:focus,
#ja-splitmenu li.ja-orange a:hover,
#ja-splitmenu li.ja-orange a:focus,
#ja-cssmenu li a.ja-orange:hover,
#ja-cssmenu li a.ja-orange:focus {
background: url(../images/orange/mainnav-active.gif) repeat-x top #a15e1b;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-deepblue,
#jasdl-mainnav li a.ja-deepblue:hover,
#jasdl-mainnav li a.ja-deepblue:focus,
#ja-splitmenu li.ja-deepblue a:hover,
#ja-splitmenu li.ja-deepblue a:focus,
#ja-cssmenu li a.ja-deepblue:hover,
#ja-cssmenu li a.ja-deepblue:focus {
background: url(../images/deepblue/mainnav-active.gif) repeat-x top #145077;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-green,
#jasdl-mainnav li a.ja-green:hover,
#jasdl-mainnav li a.ja-green:focus,
#ja-splitmenu li.ja-green a:hover,
#ja-splitmenu li.ja-green a:focus,
#ja-cssmenu li a.ja-green:hover,
#ja-cssmenu li a.ja-green:focus {
background: url(../images/green/mainnav-active.gif) repeat-x top #3f7e15;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-lime,
#jasdl-mainnav li a.ja-lime:hover,
#jasdl-mainnav li a.ja-lime:focus,
#ja-splitmenu li.ja-lime a:hover,
#ja-splitmenu li.ja-lime a:focus,
#ja-cssmenu li a.ja-lime:hover,
#ja-cssmenu li a.ja-lime:focus {
background: url(../images/lime/mainnav-active.gif) repeat-x top #808a17;
color:#FFF;
}

#jasdl-mainnav li.hover a.ja-pink,
#jasdl-mainnav li a.ja-pink:hover,
#jasdl-mainnav li a.ja-pink:focus,
#ja-splitmenu li.ja-pink a:hover,
#ja-splitmenu li.ja-pink a:focus,
#ja-cssmenu li a.ja-pink:hover,
#ja-cssmenu li a.ja-pink:focus {
background: url(../images/pink/mainnav-active.gif) repeat-x top #ab1479;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-red,
#jasdl-mainnav li a.ja-red:hover,
#jasdl-mainnav li a.ja-red:focus,
#ja-splitmenu li.ja-red:hover,
#ja-splitmenu li.ja-red a:focus,
#ja-cssmenu li a.ja-red:hover,
#ja-cssmenu li a.ja-red:focus {
background: url(../images/red/mainnav-active.gif) repeat-x top #9c162e;
color:#FFF;
}
/********/
#ja-subnav ul{
background:#000
}
#ja-subnav ul.ja-cyan {
background: #1a8489;
color:#FFF
}
#ja-subnav ul.ja-orange {
background: #a15e1b;
color:#FFF
}
#ja-subnav ul.ja-green {
background: #3f7e15;
color:#FFF
}

#ja-subnav ul.ja-deepblue {
background: #145077;
color:#FFF
}

#ja-subnav ul.ja-lime {
background: #808a17;
color:#FFF
}
#ja-subnav ul.ja-pink {
background: #ab1479;
color:#FFF
}
#ja-subnav ul.ja-red {
background: #9c162e;
}
#jasdl-subnav a{ color:#FFF !important;}
#ja-subnav .menu-title{
color:#FFF !important;
}

2) You open the file: templatesja_teline_iiilibsmenubase.class.php and find codes at line 24:
[PHP]
var $items = null;
[/PHP]
Replace: [PHP]
var $themesSetting = null;
var $themes = array();
[/PHP]
b) find codes at 275:
[PHP]function genMenuItem($item, $level = 0, $pos = ”, $ret = 0)[/PHP]
[PHP]

function getSectionId ($catid) {
$db =& JFactory::getDBO();
$query = “SELECT section FROM #__categories WHERE id=$catid;”;
$db->setQuery($query);
return $db->loadResult();
}

function getThemeSetting () {
//get the most parent menu id
$query = “select params from #__modules where `module`=’mod_janews2′”;
$database =& JFactory::getDBO();
$database->setQuery($query);
$params = new JParameter($database->loadResult());
$sections = $params->get(‘sections’, ”);
if (!$sections) return ”;

return $sections;
}
function matchingTheme( $sections, $menuitem ){
$urls = parse_url($menuitem->link);
$querystring = $urls[‘query’];
$output = null;
parse_str ($querystring,$output);
$sectionid = 0;
if($output[‘view’]==’section’){
$sectionid = $output[‘id’];
}
else if($output[‘view’]==’category’){
$catid = $output[‘id’];
$sectionid = $this->getSectionId($catid);
}
if($sectionid) {
$sectionids = preg_split(‘/[n,]|<br />/’, $sections);
for ($i = 0; $i < count($sectionids); $i++) {
$temp = split(‘:’,$sectionids[$i]);
if(isset($temp[0]) && $temp[0]==$sectionid) {
return isset($temp[1])? ‘-‘.trim($temp[1]):”;
}
}
} return;
return ”;
}
function genMenuItem($item, $level = 0, $pos = ”, $ret = 0)
[/PHP]
b) find codes at line 317:
[PHP]
// Print a link if it exists
$active = $this->genClass ($tmp, $level, $pos);
[/PHP]
=> replace:
[PHP]
$active = $this->genClass ($tmp, $level, $pos);
if( $this->themesSetting == null ){
$this->themesSetting = $this->getThemeSetting();
}
if( $this->themesSetting ) {
$theme = $this->matchingTheme( $this->themesSetting , $tmp );
if( $theme ){
$active = str_replace( ‘class=”‘, ‘class=”ja’ . $theme . ‘ ‘, $active );
}
}
[/PHP]

3) Open the file templatesja_teline_iiilibsmenudropline.class.php
a) find codes at line 74:
[PHP]
function beginMenuItems($pid=0, $level=0){
if(!$level) echo “<ul>”;
else echo “<ul id=”jasdl-subnav$pid”>”;
}
[/PHP]
Replace:
[PHP]
function beginMenuItems($pid=0, $level=0){
if(!$level) echo “<ul>”;
else echo “<ul id=”jasdl-subnav$pid” class=””.(isset($this->themes[$pid])?$this->themes[$pid]:””).””>”;
}
[/PHP]
b) find codes at line79

[PHP]
function beginMenuItem($mitem=null, $level = 0, $pos = ”){
$active = $this->genClass ($mitem, $level, $pos);
if(!$level) echo “<li id=”jasdl-mainnav{$mitem->id}” $active>”;
else echo “<li id=”jasdl-subnavitem{$mitem->id}” $active>”;
}
[/PHP]
Replace:
[PHP]
function beginMenuItem($mitem=null, $level = 0, $pos = ”){
$active = $this->genClass ($mitem, $level, $pos);
if( $level == 0 ){
if( $this->themesSetting == null ){
$this->themesSetting = $this->getThemeSetting();
}
if( $this->themesSetting ) {
$theme = $this->matchingTheme( $this->themesSetting , $mitem );
if( $theme ){
// $active = str_replace( ‘class=”‘, ‘class=”ja’ . $theme . ‘ ‘, $active );
$this->themes[$mitem->id] = ‘ja’.$theme;
}
}
}

if(!$level) echo “<li id=”jasdl-mainnav{$mitem->id}” $active>”;
else echo “<li id=”jasdl-subnavitem{$mitem->id}” $active>”;
}
[/PHP]

Good luck

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#329592

Here is my chagnes
6718

1 user says Thank You to Saguaros for this useful post

1. korben

[korben Friend korbenJoin date: November 2009Posts: 16Downloads:21Uploads:2 Thanks: 3]

#329638

It’s working great. I just had to enable and desible the JA News II module to have the colours appear. Thank you for your contribution!

[korben Friend korbenJoin date: November 2009Posts: 16Downloads:21Uploads:2 Thanks: 3]

#329640

I just realised that I couldn’t see the changes affected my submenu lvl2. It went white and couldn’t see the links. In the template.css file I changed:
/* Sub Nav (lv2) —*/
#ja-subnav ul li ul {
display: block;
height: auto;
position: absolute;
left: -999%;
background: #FFF;
border: 1px solid #ccc;
padding: 0;
}
to
/* Sub Nav (lv2) —*/
#ja-subnav ul li ul {
display: block;
height: auto;
position: absolute;
left: -999%;
background: #333;
/*border: 1px solid #ccc;*/
padding: 0;
}
and now it’s looking nicer. If anyone needed that, hope I was able to help.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#329919

Fix mistake css:

/**
* Custom ja – top menu
*/
#jasdl-mainnav li.hover a.ja-cyan,
#jasdl-mainnav li a.ja-cyan:hover,
#jasdl-mainnav li a.ja-cyan:focus,
#ja-splitmenu li a.ja-cyan:hover,
#ja-splitmenu li a.ja-cyan:focus,
#ja-cssmenu li a.ja-cyan:hover,
#ja-cssmenu li a.ja-cyan:focus {
background: url(../images/cyan/mainnav-active.gif) repeat-x top #1a8489;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-orange,
#jasdl-mainnav li a.ja-orange:hover,
#jasdl-mainnav li a.ja-orange:focus,
#ja-splitmenu li a.ja-orange:hover,
#ja-splitmenu li a.ja-orange:focus,
#ja-cssmenu li a.ja-orange:hover,
#ja-cssmenu li a.ja-orange:focus {
background: url(../images/orange/mainnav-active.gif) repeat-x top #a15e1b;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-deepblue,
#jasdl-mainnav li a.ja-deepblue:hover,
#jasdl-mainnav li a.ja-deepblue:focus,
#ja-splitmenu li a.ja-deepblue:hover,
#ja-splitmenu li a.ja-deepblue:focus,
#ja-cssmenu li a.ja-deepblue:hover,
#ja-cssmenu li a.ja-deepblue:focus {
background: url(../images/deepblue/mainnav-active.gif) repeat-x top #145077;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-green,
#jasdl-mainnav li a.ja-green:hover,
#jasdl-mainnav li a.ja-green:focus,
#ja-splitmenu li a.ja-green:hover,
#ja-splitmenu li a.ja-green :focus,
#ja-cssmenu li a.ja-green:hover,
#ja-cssmenu li a.ja-green:focus {
background: url(../images/green/mainnav-active.gif) repeat-x top #3f7e15;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-lime,
#jasdl-mainnav li a.ja-lime:hover,
#jasdl-mainnav li a.ja-lime:focus,
#ja-splitmenu li a.ja-lime:hover,
#ja-splitmenu li a.ja-lime:focus,
#ja-cssmenu li a.ja-lime:hover,
#ja-cssmenu li a.ja-lime:focus {
background: url(../images/lime/mainnav-active.gif) repeat-x top #808a17;
color:#FFF;
}

#jasdl-mainnav li.hover a.ja-pink,
#jasdl-mainnav li a.ja-pink:hover,
#jasdl-mainnav li a.ja-pink:focus,
#ja-splitmenu li a.ja-pink:hover,
#ja-splitmenu li a.ja-pink:focus,
#ja-cssmenu li a.ja-pink:hover,
#ja-cssmenu li a.ja-pink:focus {
background: url(../images/pink/mainnav-active.gif) repeat-x top #ab1479;
color:#FFF;
}
#jasdl-mainnav li.hover a.ja-red,
#jasdl-mainnav li a.ja-red:hover,
#jasdl-mainnav li a.ja-red:focus,
#ja-splitmenu li a.ja-red:hover,
#ja-splitmenu li a.ja-red:focus,
#ja-cssmenu li a.ja-red:hover,
#ja-cssmenu li a.ja-red:focus {
background: url(../images/red/mainnav-active.gif) repeat-x top #9c162e;
color:#FFF;
}
/********/
#ja-subnav ul{
background:#000
}
#ja-subnav ul.ja-cyan {
background: #1a8489;
color:#FFF
}
#ja-subnav ul.ja-orange {
background: #a15e1b;
color:#FFF
}
#ja-subnav ul.ja-green {
background: #3f7e15;
color:#FFF
}

#ja-subnav ul.ja-deepblue {
background: #145077;
color:#FFF
}

#ja-subnav ul.ja-lime {
background: #808a17;
color:#FFF
}
#ja-subnav ul.ja-pink {
background: #ab1479;
color:#FFF
}
#ja-subnav ul.ja-red {
background: #9c162e;
}
#jasdl-subnav a{ color:#FFF !important;}
#ja-subnav .menu-title{
color:#FFF !important;
}

[Author]

Posts