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.

Nav Bar hover ( custom buttons)

View previous topic View next topic Go down

In progress Nav Bar hover ( custom buttons)

Post by Luis Ferreira on January 9th 2016, 2:16 pm

Forum version : Phpbb2
Position : Administrator
Concerned browser(s) : Google Chrome
Who the problem concerns : all
Forum link : http://gamemunity.team-talk.net/


I have this code to change image when hover but it only works on the regular buttons, how can i do to costum buttons like "http://gamemunity.team-talk.net/h6-twitch" and soo ?


Code:
#i_icon_mini_message{width:86px;height:32px;background:url(http://i21.servimg.com/u/f21/18/88/10/81/messag11.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://i68.servimg.com/u/f68/18/88/10/81/5654610.png) no-repeat 0 0;}

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by SLGray on January 9th 2016, 7:33 pm

Have you fixed your issue?  I noticed all the buttons have a hover effect in the navigation menu.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by Luis Ferreira on January 11th 2016, 6:16 pm

So i made this code, its kinda buggy but i will correct it later

Code:
a.mainmenu:hover{
    background-color: #FF7F50
    border: 1px solid black;
    opacity: 0.99;
    filter: alpha(opacity=100)
}
 


its stay like this (the orange underline) :



Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by 10spetter10 on January 11th 2016, 7:04 pm

You can try something like this to select the other links
Code:
a.mainmenu[href*="/h6-twitch"] img
.

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by Luis Ferreira on January 11th 2016, 8:03 pm

like this ?

Code:
a.mainmenu[href*="/h6-twitch"] {
width:86px;
height:32px;
background:url(http://i21.servimg.com/u/f21/18/88/10/81/messag11.png) !important no-repeat 0 0;
}
a.mainmenu[href*="/h6-twitch"]:hover {
width:86px;
height:32px;
background:url(http://i68.servimg.com/u/f68/18/88/10/81/5654610.png) !important no-repeat 0 0;
}
 


doesn't work @10spetter10

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by 10spetter10 on January 11th 2016, 8:42 pm

In your first code you work with the images so you should add
Code:
img
after the code I sent. But I'm not fully understanding why, do you just want an orange border when you hover the button?

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by Luis Ferreira on January 11th 2016, 10:19 pm

an underline but i only can with that code idk why

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by Luis Ferreira on January 23rd 2016, 12:04 pm

bump

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: Nav Bar hover ( custom buttons)

Post by Rhino.Freak on January 23rd 2016, 2:06 pm

@Luis Ferreira wrote:like this ?

Code:
a.mainmenu[href*="/h6-twitch"] {
width:86px;
height:32px;
background:url(http://i21.servimg.com/u/f21/18/88/10/81/messag11.png) !important no-repeat 0 0;
}
a.mainmenu[href*="/h6-twitch"]:hover {
width:86px;
height:32px;
background:url(http://i68.servimg.com/u/f68/18/88/10/81/5654610.png) !important no-repeat 0 0;
}
 

This code should work but first make SURE that you haven't added any image for custom links you added in Admin Panel.
Remove image from there and THEN use this code. I suggest to get rid of !important too.
If you have an image already, this is a BACKGROUND image so it won't show up as it's hidden underneath it.

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

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