Navbar CSS Help

3 posters

Go down

Navbar CSS Help Empty Navbar CSS Help

Post by Pendo February 22nd 2010, 1:54 am

How would I go about making it where my navbar images change to different images when they are hovered over by a mouse?
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

View user profile http://lorecraft.forumotion.com/

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by Pendo February 23rd 2010, 9:15 am

~Bump
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

View user profile http://lorecraft.forumotion.com/

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by --kml-- February 23rd 2010, 12:25 pm

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 What a Face
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

View user profile http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by Pendo February 24th 2010, 12:55 am

Youtube doesn't work on my computer, it's crappy but I'm getting a new one soon. @.@
So could anyone please explain it?
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

View user profile http://lorecraft.forumotion.com/

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by Pendo February 25th 2010, 6:17 am

Bump~~
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

View user profile http://lorecraft.forumotion.com/

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by ecosystem February 25th 2010, 6:47 am

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.
ecosystem
ecosystem
Forumember

Male Posts : 101
Reputation : 0
Language : Ingles
Location : California

View user profile

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by Pendo February 25th 2010, 6:54 am

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?
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

View user profile http://lorecraft.forumotion.com/

Back to top Go down

Navbar CSS Help Empty Re: Navbar CSS Help

Post by ecosystem February 25th 2010, 6:59 am

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.
ecosystem
ecosystem
Forumember

Male Posts : 101
Reputation : 0
Language : Ingles
Location : California

View user profile

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum