Solved

Cufon script and active state

Posted on 2011-03-23
6
1,193 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
  • 4
  • 2
6 Comments
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
got it!
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 11

Author Closing Comment

by:Amanda Watson
Comment Utility
Thank you so much for you help
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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
Comment Utility
Yes I sorted it out thank you by following your examples.

Thanks again for your help
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now