The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover Navigation

View previous topic View next topic Go down

In progress Hover Navigation

Post by Jellydonut on 7/5/2012, 01:11

Using the search bar, I saw a few threads on this, but it was hard to understand.
How can I make it so when I mouse over a button on the navigation bar, it will change colors? I already have the buttons recolored in the image I want ti to change to, but I don't know how to actually use it. I'm sure it's a code, but I'm really bad with codes, so I'd need to know what I'd have to insert into each code to make it work, if you get what I mean.


Last edited by Jellydonut on 9/5/2012, 23:46; edited 1 time in total
avatar
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. on 7/5/2012, 12:05

Hi

Remove your navigations out of Admin panel and add them all
through CSS. Also go to Display >> Headers and navigations
>> Display only images in nav bar: YES

Do this for the static image:
Code:
#i_icon_mini_index {
background-image: url('IMAGE LINK GOES HERE');
width: XYpx;
height: XYpx;
}

And than this for hover:
Code:
#i_icon_mini_index:hover {
background-image: url('IMAGE HOVER LINK GOES HERE');
width: XYpx;
height: XYpx;
}

Do it for all navigations, just change the end of #i_icon_mini

Like this:
_portal {
_portal:hover {

This is for the rest of navigations:
_profile
_calendar
_gallery
_message
_new_message
_register
_login
_logout
_search
_faq
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on 7/5/2012, 23:55

Thanks!
Do I keep they XYpx; the same, or do I have to insert a length and width amount?
avatar
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. on 8/5/2012, 07:58

@Jellydonut wrote:do I have to insert a length and width amount?

Yes, you have to add your images value instead of X & Y.
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on 9/5/2012, 23:46

Oh, ok
Solved now!

Ek, sorry, I marked it too early.
Is there a way to make it like, fade into the hover image? Forgot to ask that earlier xP
avatar
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on 10/5/2012, 03:05

Is that first one the fade in/out one?
And do I have to do it for every image?
(sorry, I'm REALLY bad with coding)
avatar
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on 10/5/2012, 04:00

Alright, thank you (:
I'll try using these tomorrow maybe. Even though this is solved, would you mind if I left the tread open so I can make sure I don't have any problems with it tomorrow? If I can figure it out, I'll mark it solved then.
avatar
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. on 10/5/2012, 10:50

It will stay open.
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum