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.

NavButton hover image

View previous topic View next topic Go down

In progress NavButton hover image

Post by Macca_96 on March 15th 2013, 11:52 pm

Im trying to create rollover images for my navbar buttons. Each button hover image will be different.

What are the selectors in each one(Forum, Register, Profile etc)?


http://apexevolution.forumotion.com

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by levy on March 15th 2013, 11:56 pm

Hello , you will find all in that post : http://help.forumotion.com/t119328-blue-hover-navbar


levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

In progress Re: NavButton hover image

Post by Macca_96 on March 16th 2013, 1:35 am

Ok now i have added new buttons, the bar is on 2 lines and there is no "force navbar to be on 1 line" option (i thought there would be) Sad How can i force that?

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by Derri on March 16th 2013, 2:30 am

Can you provide a link to your forum please?

Have you tried centering the navbar?


Derri
Administrator
Administrator

Male Posts : 8355
Reputation : 571
Language : English & Basic French
Location : Scotland, United Kingdom

Back to top Go down

In progress Re: NavButton hover image

Post by Macca_96 on March 16th 2013, 2:53 am

The link is in my opening post and the bar is set to centre. btw im still having trouble with the hover images

EDIT: When I enter images directly into the css after deleting images in the Headers and Navagation tab, I can see the name of the link (the "alt"(i think its the alt or name))

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by Sanket on March 16th 2013, 5:39 am

On your forum, the hover seems to be working fine. What is the problem? That all the images are not in one line? Well if the width of the image itself is too big, then it will go onto the next line probably. Decrease the width of the images then.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

In progress Re: NavButton hover image

Post by Macca_96 on March 16th 2013, 7:09 am

You havent seen the problem cause i set it back to how it was. The problem was in the edit I did in my previous post

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by Sanket on March 16th 2013, 7:12 am

Please provide the codes you added on your forum & also put them on your forum, so we see what the problem is.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

In progress Re: NavButton hover image

Post by Macca_96 on March 16th 2013, 9:56 am

Code:

 #i_icon_mini_index{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/001ind11.png) no-repeat 0 0;}
    #i_icon_mini_index:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/101ind11.png) no-repeat 0 0;}
 
    #i_icon_mini_faq{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/008faq10.png) no-repeat 0 0;}
    #i_icon_mini_faq:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/108faq10.png) no-repeat  0 0;}
   
#i_icon_mini_search{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/009sea10.png) no-repeat 0 0;}
    #i_icon_mini_search:hover{background:url(http://i74.servimg.com/u/f74/18/06/14/84/109sea10.png) no-repeat  0 0;}
   
#i_icon_mini_members{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/002mem10.png) no-repeat 0 0;}
    #i_icon_mini_members:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/102mem10.png) no-repeat  0 0;}
   
#i_icon_mini_groups{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/003use10.png) no-repeat 0 0;}
    #i_icon_mini_groups:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/103use10.png) no-repeat  0 0px;}
#i_icon_mini_profile{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/004edi10.png) no-repeat 0 0;}
    #i_icon_mini_profile:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/104edi10.png) no-repeat  0 0;}
#i_icon_mini_message{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/005mes10.png) no-repeat 0 0;}
    #i_icon_mini_message:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/105mes10.png) no-repeat 0 0;}

    #i_icon_mini_logout{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/th/010log10.png) no-repeat 0 0;}
    #i_icon_mini_logout:hover{width:144px;height:22px;background:url(http://i74.servimg.com/u/f74/18/06/14/84/110log10.png) no-repeat  0 0;}

http://apexevolution.forumotion.com/

As you can see the image sizes are all funny for some reason. I want them all the same size as the hover. But the index is working correctly :/

h and i got 2 custom buttons there too. How do i add them?

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by Sanket on March 16th 2013, 1:24 pm

Image sizes are funny, because the actual image url size are varying.

About custom navigations, can you add a image first. I see only text there.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

In progress Re: NavButton hover image

Post by Macca_96 on March 16th 2013, 11:58 pm

The roller images are the same dimension to the regular images so I dont know what is going on there.

I need to know what selectors to use for the custom images so I can add them to the style sheet

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by Sanket on March 17th 2013, 9:04 am

There are no selectors for the custom images that you add in the navigation bar.
http://help.forumotion.com/t105986-a-hover-on-a-custom-navigation-bar-button#691930
That would have probably worked, if the url were from the forum itself & not from youtube as it is on your forum currently.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

In progress Re: NavButton hover image

Post by Macca_96 on March 17th 2013, 9:21 am

Oh bummer.

As for the sizing, we managed to fix that just wish we could use the same effect on the custom links.

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

In progress Re: NavButton hover image

Post by Sanket on March 17th 2013, 9:23 am

I was trying to find a fix, couldn't find one.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

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