Navbar CSS Help
3 posters
Navbar CSS Help
How would I go about making it where my navbar images change to different images when they are hovered over by a mouse?
Pendo- Forumember
-
Posts : 217
Reputation : 13
Language : English
Location : USA
Re: Navbar CSS Help
oo this you need some css work
you can view it here :
https://www.youtube.com/watch?v=sN2MWS37l4A&feature=player_embedded
jalokim made it
you can view it here :
https://www.youtube.com/watch?v=sN2MWS37l4A&feature=player_embedded
jalokim made it

--kml--- Forumember
-
Posts : 456
Reputation : 1
Language : english
Re: Navbar CSS Help
Youtube doesn't work on my computer, it's crappy but I'm getting a new one soon. @.@
So could anyone please explain it?
So could anyone please explain it?
Pendo- Forumember
-
Posts : 217
Reputation : 13
Language : English
Location : USA
Re: Navbar CSS Help
The video says:
Delete all the current images for the navbar that are on Pics management.
Set navigation to "images only."
Then go to Colors > CSS and use this:
#i_icon_mini_index {
background-image: url(INSERT URL OF NON HOVER IMAGE);
width: 139px;
height: 107px;
}
#i_icon_mini_index:hover {
background-image: url(INSERT URL OF HOVER IMAGE);
width: 139px;
height: 107px;
}
Notice how it says mini_index.
Change "index" accordingly for each button on the nav bar.
Also, you put the url of the pictures as the correspond with hover.
Change the width and height of the pictures with the above numbers.
You can check a picture's width and height by right clicking it and clicking properties.
Hope this helped.
Delete all the current images for the navbar that are on Pics management.
Set navigation to "images only."
Then go to Colors > CSS and use this:
#i_icon_mini_index {
background-image: url(INSERT URL OF NON HOVER IMAGE);
width: 139px;
height: 107px;
}
#i_icon_mini_index:hover {
background-image: url(INSERT URL OF HOVER IMAGE);
width: 139px;
height: 107px;
}
Notice how it says mini_index.
Change "index" accordingly for each button on the nav bar.
Also, you put the url of the pictures as the correspond with hover.
Change the width and height of the pictures with the above numbers.
You can check a picture's width and height by right clicking it and clicking properties.
Hope this helped.
ecosystem- Forumember
-
Posts : 101
Reputation : 0
Language : Ingles
Location : California
Re: Navbar CSS Help
Thanks, but how do I figure out the classification of each page? Such as 'Index' being the one for forum. Would it just be the page's name?
Pendo- Forumember
-
Posts : 217
Reputation : 13
Language : English
Location : USA
Re: Navbar CSS Help
I think it would be the page's name, but I am not completely sure.
The video gives the following examples:
#i_icon_mini_index
#i_icon_mini_portal
#i_icon_mini_faq
#i_icon_mini_login
I don't know about the other ones, but it would probably just be the page's name. I think we can assume it from those examples.
The video gives the following examples:
#i_icon_mini_index
#i_icon_mini_portal
#i_icon_mini_faq
#i_icon_mini_login
I don't know about the other ones, but it would probably just be the page's name. I think we can assume it from those examples.
ecosystem- Forumember
-
Posts : 101
Reputation : 0
Language : Ingles
Location : California

» Problem getting PM Navbar button onto my navbar
» Generated Navbar To List Navbar
» Navbar Help!
» Navbar.
» Is this possible [Navbar]
» Generated Navbar To List Navbar
» Navbar Help!
» Navbar.
» Is this possible [Navbar]
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum