Solved

Cufon script and active state

Posted on 2011-03-23
6
1,215 Views
Last Modified: 2012-05-11
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?
0
Comment
Question by:Amanda Watson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
ID: 35200119
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35202317
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35204481
got it!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 35204482
Thank you so much for you help
0
 
LVL 17

Expert Comment

by:mreuring
ID: 35205493
Seems we live in polar opposite time-zones :) Do I understand correctly that the follow-up issues were resolved satisfactory?
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35210055
Yes I sorted it out thank you by following your examples.

Thanks again for your help
0

Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question