Jump to content
StudioWeb Forums

Cufon Problem - Unwanted Effects - PLEASE HELP


Recommended Posts

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

Link to post
Share on other sites

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.)

Link to post
Share on other sites

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 ?? :(

Link to post
Share on other sites

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?

Link to post
Share on other sites

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?

Link to post
Share on other sites
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...