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.

Code Hover Buttons Into Nav Bar Buttons

View previous topic View next topic Go down

Solved Code Hover Buttons Into Nav Bar Buttons

Post by JenniferSPN15 on November 15th 2014, 3:08 am

Hey! I want to know how I can code a hover image over the nav bar buttons. I have the designs made, and also hover animations made, but there is not a hover image set up in the image/design seciton of the admin panel. How can I code this in the css?


Last edited by JenniferSPN15 on November 15th 2014, 5:08 am; edited 1 time in total

JenniferSPN15
New Member

Posts : 8
Reputation : 1
Language : english

http://live-the-worldwide.forumotion.com

Back to top Go down

Solved Re: Code Hover Buttons Into Nav Bar Buttons

Post by Ange Tuteur on November 15th 2014, 3:38 am

Hello JenniferSPN15,

You are wanting the navbar images to change on hover ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code Hover Buttons Into Nav Bar Buttons

Post by JenniferSPN15 on November 15th 2014, 4:07 am

yes please. so when your cursor hovers over the images in the navbar the hover image replaces it.

JenniferSPN15
New Member

Posts : 8
Reputation : 1
Language : english

http://live-the-worldwide.forumotion.com

Back to top Go down

Solved Re: Code Hover Buttons Into Nav Bar Buttons

Post by Ange Tuteur on November 15th 2014, 4:16 am

Okay, what you'll need to do is place the images in the CSS. You'll use these codes in the stylesheet :
Administration Panel > Display > Colors > CSS stylesheet
Code:
/* Index / Home */
#i_icon_mini_index{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(/img.gif) no-repeat 0 0;}

/* Portal */
#i_icon_mini_portal{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(/img.gif) no-repeat 0 0;}

/* FAQ */
#i_icon_mini_faq{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(/img.gif) no-repeat 0 0;}

/* Search */
#i_icon_mini_search{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(/img.gif) no-repeat 0 0;}

/* Members */
#i_icon_mini_members{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(/img.gif) no-repeat 0 0;}

/* Groups */
#i_icon_mini_groups{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(/img.gif) no-repeat 0 0px;}

/* Profile */
#i_icon_mini_profile{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(/img.gif) no-repeat 0 0;}

/* PM message */
#i_icon_mini_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(/img.gif) no-repeat 0 0;}

/* PM new message */
#i_icon_mini_new_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(/img.gif) no-repeat 0 0;}

/* Logout */
#i_icon_mini_logout{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(/img.gif) no-repeat 0 0;}

/* Register */
#i_icon_mini_register{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(/img.gif) no-repeat 0 0;}

/* Login */
#i_icon_mini_login{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(/img.gif) no-repeat 0 0;}

Each one is marked with a comment above it, so you know what button it modifies. You can replace /img.gif by the URL of your image. The first is the default image, and the second is the hover image.

The width and height in the first rule can be adjusted to the dimensions of your image.

So it works, you need to remove the current navigation icones in pics management :
Administration Panel > Display > Pics management > Advanced > general / explore

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code Hover Buttons Into Nav Bar Buttons

Post by JenniferSPN15 on November 15th 2014, 4:59 am

Alright, it works!! Thank you very much!! Very appreciated Smile This is solved!

JenniferSPN15
New Member

Posts : 8
Reputation : 1
Language : english

http://live-the-worldwide.forumotion.com

Back to top Go down

Solved Re: Code Hover Buttons Into Nav Bar Buttons

Post by Ange Tuteur on November 15th 2014, 5:10 am

You're welcome

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.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