Cufon Problem - Unwanted Effects - PLEASE HELP

[tcraw1010]

Greetings Experts:

 

I am working on a Joomla 1.5 based site and am using the kc_cufon plugin (http://www.keashly.net/typography/kc...nt-replacement) for my main navigation menu items - which works perfectly. It's a mega-menu structure and, unfortunately, the cufon seems to be affecting my sub-navigation items upon mouse hover/rollover - which is an unwanted effect. I want the sub items (within the drop-down) to be Arial font.

 

Here is the url to my WIP: www.musicians-marketplace.com/zeo2

 

The Main Navigation menu is across the top (i.e. Guitars-Drums-Keyboards, etc.). Note the sub-navigation items when you rollover with your mouse - the font changes to the "League Gothic" font I specified for the main navigation items.

 

 

Here is the CSS for the top level nav items . . .

 

#ja-mainnav ul.level0 li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #000;
font-weight: 200;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 28px;
text-transform: uppercase;
}

#ja-mainnav ul.level0 li a:hover,
#ja-mainnav ul.level0 li a:active,
#ja-mainnav ul.level0 li a:focus 
#ja-mainnav ul.level0 li:hover a,
#ja-mainnav ul.level0 li.sfhover a,
#ja-mainnav ul.level0 li.havechildsfhover a,
#ja-mainnav ul.level0 li.havechild-activesfhover a {
color: #00F;
}

#ja-mainnav ul.level0 li.havechild:hover a,
#ja-mainnav ul.level0 li.havechild:focus a,
#ja-mainnav ul.level0 li.havechild:active a {
}

#ja-mainnav ul.level0 li a.active,
#ja-mainnav ul.level0 li a.active:hover,
#ja-mainnav ul.level0 li a.active:active,
#ja-mainnav ul.level0 li a.active:focus {
}


ul.level0 li.mega li.mega {
text-align: left;
float: none !important;
}

 

 

and here is the CSS for the font for the subvav items . . .

 

#ja-mainnav ul.level0 li ul li {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
border-bottom-width: 1px;
border-right-style: none;
border-bottom-style: none;
border-bottom-color: #E7E7E7;
}

#ja-mainnav ul.level0 li ul li.group {
background-image: none;
border: 0px;
padding-bottom: 1px;
}

/* Category Sub Items --- */
#ja-mainnav ul.level0 li ul a {
border-right: none;
margin: 0;
height: auto;
line-height: normal !important;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
color: #333 !important;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
}

#ja-mainnav ul.level0 li.havesubchild,
#ja-mainnav ul.level0 li.havesubchild-active {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
}

#ja-mainnav ul.level0 li ul a:hover,
#ja-mainnav ul.level0 li ul a:active,
#ja-mainnav ul.level0 li ul a:focus,
#ja-mainnav ul.level0 ul li.over,
#ja-mainnav ul.level0 ul li.sfhover,
#ja-mainnav ul.level0 ul li.havesubchildsfhover,
#ja-mainnav ul.level0 ul li.havesubchild-activesfhover {
color: #54992F !important;
}
/* Styling ---*/
ul.level1 li.mega a.mega {
background: none;
border: 0;
font-weight: normal;
padding: 0px;
}

ul.level1 li.mega a.mega span.menu-title {
background: none;
padding: 0;
font-size: 110%;
color: #000;
}

ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
}

 

 

I have tried to specify the font for the sub-nav items using the cufon plugin and utilizing the relative css classes - but it does not seem to work.

 

Any thoughts on how to overcome this issue so that the sub-nav items display with the Arial font I want them to?

 

 

TOM

[tcraw1010]

Anyone ??

 

Anyone ??

 

 

[tcraw1010]

Anyone ??

 

Anyone ??

 

 

[falkencreative]

Well, this is the actual cufon code:

 

Cufon.replace("#ja-mainnav ul.level0 li a", { fontFamily: "League Gothic", hover: true });Cufon.replace("#ja-mainnav ul.level0 li ul a", { fontFamily: "Arial", hover: true })

I believe you would need to reset sub items to use Arial on hover. I think it would be

 

#ja-mainnav ul.level0 li ul a:hover { font-family: Arial, Helvetica, sans-serif; }

but I would really need to try it out to be sure.

 

I also think you may not need the second Cufon statement: "Cufon.replace("#ja-mainnav ul.level0 li ul a", { fontFamily: "Arial", hover: true }" -- I believe that affects sub items (though I imagine you will still need to specify Arial for subitems on hover.)

[tcraw1010]

Well, this is the actual cufon code:

 

Cufon.replace("#ja-mainnav ul.level0 li a", { fontFamily: "League Gothic", hover: true });Cufon.replace("#ja-mainnav ul.level0 li ul a", { fontFamily: "Arial", hover: true })

I believe you would need to reset sub items to use Arial on hover. I think it would be

 

#ja-mainnav ul.level0 li ul a:hover { font-family: Arial, Helvetica, sans-serif; }

but I would really need to try it out to be sure.

 

I also think you may not need the second Cufon statement: "Cufon.replace("#ja-mainnav ul.level0 li ul a", { fontFamily: "Arial", hover: true }" -- I believe that affects sub items (though I imagine you will still need to specify Arial for subitems on hover.)

 

 

Since I'm using a plugin, where the CSS selectors are specified within the plugin's parameters, where (in what file) are the actual cufon statements that I need to try to enter (can you tell from looking at it?)

 

I tried specifying

#ja-mainnav ul.level0 li ul a:hover { font-family: Arial, Helvetica, sans-serif; }

 

but it did not work.

 

 

I'm thinking, perhaps, that the "#ja-mainnav" designation is linking level0 and level1 (assuming "level0"controls the main nav items and "level1" controls the subnav items) - thereby causing the unwanted mouseover effect. So, what I'm wondering is if there's some kind of code fix or modification I can use to "unlink" the font relationship between level0 and level1, while still maintaining the mega menu functionality.

 

 

Grasping at straws ??

[falkencreative]

It looks like nav headers have a .menu-title class applied to them. That makes me think that adjusting your Cufon statement may fix your problem:

 

Cufon.replace("#ja-mainnav .menu-title", { fontFamily: "League Gothic", hover: true });

 

As far as I understand it, you only want the nav headers (Guitar/Bass/Drums, etc) using cufon, and all things within the dropdown menu be in Arial?

[tcraw1010]

As far as I understand it, you only want the nav headers (Guitar/Bass/Drums, etc) using cufon, and all things within the dropdown menu be in Arial?

That is EXACTLY correct . . . I just need to figure out (or help with) how to configure things to make that happen.

 

[falkencreative]

That is EXACTLY correct . . . I just need to figure out (or help with) how to configure things to make that happen.

 

Did you try the code I posted above? (removing the existing Cufon code, and replacing it with what I posted?)

[tcraw1010]

The problem is I'm using a plugin for Joomla (see original post), where the CSS selectors are specified within the plugin's parameters.

 

Are you able to tell where (i.e. in what file) the actual cufon statements are that I need to try to modify?

In other words, can you tell using Firebug or the like?

[falkencreative]

Are you able to tell where (i.e. in what file) the actual cufon statements are that I need to try to modify?

In other words, can you tell using Firebug or the like?

I can't unfortunately. Firebug only shows me the final rendered code, not which code is included in which files. All I know - via Firebug - is that the Cufon code is added to the <head> section of each page.

 

I'm not sure how much I can help you with this, short of having you PM me login details for Joomla and letting me looking around. You may also want to check to see if there is any support available for that specific plugin -- emailing the plugin creator, FAQs, support forums, etc.

[tcraw1010]

Thanks Ben - I really do appreciate your help.

 

I'll look into it further (when I have a little more time (i.e. when I'm not trying to work on this stealth while at work))

 

 

TOM