Solved

Help me my hover and active colors on my menu

Posted on 2011-03-13
28
508 Views
Last Modified: 2012-05-11
Hi There,
If you go to this page for example
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?

I just want it to stay its active color regardless of whether you hover over it or not?
0
Comment
Question by:Amanda Watson
  • 13
  • 6
  • 5
  • +1
28 Comments
 

Expert Comment

by:KirschgruenToby
ID: 35123885
you may want to check the  DOM manipulation in you JavaScript.
0
 
LVL 1

Expert Comment

by:JerseyFoo
ID: 35124128
In /templates/rt_equinox_movies_j15/css/style1.css

Near the top -- under a {,  change color: #0085b2;  to color: #7B7A77;

This will keep the links a gold color "regardless of whether you hover over it or not" as you requested.

And additionally if basic web dev isn't too difficult for you, you can also delete the respective pseudo-class as this will cancel it out.

If you would only like to do this to the links on top, disregard the above and append the attached code to the top of your css file.
.menu_topmain a {
	color:  #7B7A77;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 0px 0px 2px 6px;
	position: relative;
}

Open in new window

0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35124681
Hi There,
Doing any of JerseyFoo changes didn't work .

I suspect KirschgruenToby is correct and its something to do with my cufon script...I just don't know how to fix it?

<script type = 'text/javascript'>

Cufon.replace('#mod-top a', { color: '#0085b2', fontFamily: 'trajan', fontSize: '13px',
hover: {
        color: '#666666'
    }});
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('#current', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
</script>
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35125198
you have 3 css properties of the anchor tag
a:link, a:visited and a:hover
so use
.menu_topmain a:link, .menu_topmain a:visited { color:"desired color when not hovering"}
.menu_topmain a:hover { color:"desired color on mouse over"}
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35125464
Hi dwkd I don't think that will solve the problem.

The current state is working correctly and the hovers etc, but its simply the current state doesn't go back AFTER you have hovered
KirschgruenToby: can you help at all with what you mentioned?
0
 
LVL 1

Expert Comment

by:JerseyFoo
ID: 35125474
After you made the change, did you refresh?
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35125525
Yes, many times infact...I have been working on some changes on the site for most of the day
0
 

Expert Comment

by:KirschgruenToby
ID: 35127311
Well, look:

Standard Class on load is

<li class="item1">

when you click a link your JS manipulates the class and id of the clicked element to

<li id="current" class="active item1">

Now, if you hover again your JS switching back to

<li class="item1">

You should check your Javascript (rokzoom.js).
By the way: Is there a special reason why you are using a JavaScript to generate such a simple menu? This would work lovely with pure CSS :-)
0
 

Expert Comment

by:KirschgruenToby
ID: 35127360
Sorry. rokzoom.js is incorrect. My mistake. you should check cufon-yui.js
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35132941
ok intuitively without look at your js cufon function I'd say this scenario is whats going on:

cufon changes the color to gold from blue when you're on that page from the menu
also cufon changes hover color from GOLD to GRAY
the reason it doesn't return back to gold is that because cufon mouseout no longer includes the function that checks to see what page are you on and replace it with gold
does this make sense?
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35132969
ok, so how would I go about fixing this?

I would love to have used CSS but I needed to use this cufon stuff for the font
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35133016
well I recommend using typekit.com for your font actually, this is the best solution imo out there

but with cufon
it's either two things .. the function has the bug i explained in previous post .. or a more likely scenario: you might not be using the function correctly or as it is meant to be used. Is there any documentation with this?
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35134810
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 11

Author Comment

by:Amanda Watson
ID: 35134827
Could it be the tags I am using?

Is there a better way to get the current state to show in cufon?
0
 

Expert Comment

by:KirschgruenToby
ID: 35135609
@font-face {
font-family: 'YourFontNameRegular';
src: url('YourFontName-webfont.eot');
src: url('YourFontName-webfont.woff') format('woff'), 
       url('YourFontName-webfont.ttf') format('truetype'), 
       url('YourFontName-webfont.svg#webfontrwSM9VT7') format('svg');
font-weight: normal;
font-style: normal;
}

body {
font-family:YourFontNameRegular
}

Open in new window


Something like this should work on IE5+, FF2+, O10+

If you wonder how to convert your font in the neccessary and mentioned formats in the code above, please check http://www.fontsquirrel.com/fontface/generator

On the body tag you might want to define another Font-Family (Arial....) for falling back purposes.

Best,
Toby
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35136072
Just to be clear, are you suggesting I don't use cufon for anything anymore and simply convert over to this method?

Also when you have the body tag there, would I also need to add all my tags that I have in my cufon script as well?
0
 

Expert Comment

by:KirschgruenToby
ID: 35136112
Yes, i would give it a try. I don't see a need to use a javaScript solution.

You do not need to apply font-family[...]  to the body tag. Just use it at you would use it anytime. Apply it to whatever you want.   a, div, p ...

best
toby
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35136449
ok thanks, I was hoping I could find a solution to fix the existing problem as changing all my templates is not ideal in this scenario

Can anyone help me figure out why it is happening with the current set up?
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35138867
Ok first try removing that span inside the anchor tags and styling everything without spans.. lets solve this outward from inside the anchor since that's where the problem is..and we'll go from there
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35142242
Right, I have to figure out how to get rid of the spans...then I will need to change my css tags
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35143997
add the attached line of code underneath your last cufon line ( Cufon.replace('#current', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});  )
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35144859
which code am I supposed to add underneath ( Cufon.replace('#current', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});  )???
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35148617
weird ..sorry about that, i did attach a snippett, i guess it didn't like it:)
add this:

Cufon.replace('#current a:link', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('#current a:visited', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('#current a:hover', { color: '#666666', fontFamily: 'trajan', fontSize: '13px'});

if it doesn't like that add it with the span:

Cufon.replace('#current a:link span', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('#current a:visited span', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('#current a:hover span', { color: '#666666', fontFamily: 'trajan', fontSize: '13px'});
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35173869
Hi there,
Neither of those changes make a difference.
As soon as you hover it goes to back to the blue.
I am sure it has to do with the DOM but I don't understand that at all??

Gosh this would be good to figure out how to fix, or even if its possible to fix?
0
 
LVL 11

Accepted Solution

by:
Amanda Watson earned 0 total points
ID: 35204492
0
 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 35230176
The problem was solved with another thread
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This video teaches users how to migrate an existing Wordpress website to a new domain.

743 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

13 Experts available now in Live!

Get 1:1 Help Now