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 May 7th 2012, 1:11 am

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 May 9th 2012, 11:46 pm; edited 1 time in total

Jellydonut
Forumember

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

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. on May 7th 2012, 12:05 pm

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

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on May 7th 2012, 11:55 pm

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

Jellydonut
Forumember

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

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. on May 8th 2012, 7:58 am

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

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

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on May 9th 2012, 11:46 pm

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

Jellydonut
Forumember

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

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on May 10th 2012, 3:05 am

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)

Jellydonut
Forumember

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

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut on May 10th 2012, 4:00 am

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.

Jellydonut
Forumember

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

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. on May 10th 2012, 10:50 am

It will stay open.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
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