Cufon script and active state

Hi There,
I am using a cufon script for my menu font as you can see here
http://lisablue.com.au/index.php?option=com_content&view=article&id=54&Itemid=58

You will notice the active color is gold in the top menu.

However if you then hover over it and move off it, it turns blue again?

How can I fix this please while still using my cufon script?

I just want it to stay its active color regardless of whether you hover over it or not?
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?
 
mreuringCommented:
It should work just fine if you stop defining your styling in Cufon-statements.

I did a quick and dirty test in which I created the required CSS-rules to set the 'active' color and hover/normal states. Then I changed your Cufon replace statements as per the attached code. Simply 'enable' hover on the menu-items and let Cufon figure out the colors, that's all there is to it :) Notice that I removed the Cufon.replace statement for the 'active' element and that I changes the first Cufon replacement by removing the 'color' attribute (which will allow Cufon to pick it up from your CSS) and setting hover to true (which will allow Cufon to pick up the correct color from CSS).
Cufon.replace('#mod-top a', { fontFamily: 'trajan', fontSize: '13px',
hover:true});
Cufon.replace('ul.menu', { color: '#0085b2', fontFamily: 'trajan', fontSize: '16px',
hover: {
        color: '#666666'
    }});
Cufon.replace('#topmodules', { color: '#0085b2', fontFamily: 'trajan', fontSize: '17px',
hover: {
        color: '#666666', fontSize: '17px'
    }});
Cufon.replace('h3', { color: '#0085b2', fontFamily: 'trajan', fontSize: '24px'});
Cufon.replace('h4', { color: '#0085b2', fontFamily: 'trajan', fontSize: '20px'});
Cufon.replace('h5', { color: '#0085b2', fontFamily: 'trajan', fontSize: '16px'});
Cufon.replace('#mod-top a:visited span', { color: '#0085b2', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('a.mainlevel_collections ', { color: '#0085b2', fontFamily: 'trajan', fontSize: '13px',
hover: {
        color: '#666666', fontSize: '13px'
    }});
Cufon.replace('#active_menu_collections ', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('#sidecol #current a span, #topmodules #active_menu, ', { color: '#9E8E5A', fontFamily: 'trajan' , fontSize: '17px'});

Open in new window

0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Thank you so much, that has worked for me.

Are you able to see why its not working on this page for my sub menus?
http://lisablue.com.au/index.php?option=com_content&view=article&id=92&Itemid=211

You can see if you hit PUBLIC RELATIONS, the current works, however the rollover and the main color are back to front

It is supposed to work the same way it does on this page here
http://lisablue.com.au/index.php?option=com_content&view=article&id=53&Itemid=85

except its back to front?
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
got it!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Amanda WatsonWeb DeveloperAuthor Commented:
Thank you so much for you help
0
 
mreuringCommented:
Seems we live in polar opposite time-zones :) Do I understand correctly that the follow-up issues were resolved satisfactory?
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Yes I sorted it out thank you by following your examples.

Thanks again for your help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.