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.

Blue Hover Navbar

View previous topic View next topic Go down

Blue Hover Navbar

Post by DustyBones on January 19th 2013, 6:56 pm




Want a Navbar where the buttons change when you hover your cursor over the buttons?
The buttons, coding and instructions for install are all here to make it easy for you.
Or you can use one set or another like they are without using the coding.

Sample


The Buttons
Regular or Static Nav Buttons








Hover Nav Buttons








Font: Verdana, bold
Font Size: 11
Font Color: Normal buttons; d4d4fb, rgb (212, 212, 251).
Hover buttons; fff99d, rgb (255, 249, 157)
Font Anti Aliasing Method: Sharp
Blank Image:
Normal buttons;
Hover buttons;

Download package of graphics and psd file

110 KB
Install Instructions
Spoiler:
Go to Administration Panel/Display/Pictures and Colors/Pics management/General Explore Tab and remove all your navbar images.
Then go to Administration Panel/Display/Pictures and Colors/Colors/CSS Stylesheet and paste the CSS code below into the text box.

Load the buttons at your Image Host Server and put the Image URL's in the appropriate line of code.
Use the "#i_icon_mini_BUTTON NAME" line for your static or normal buttons.
Use the "#i_icon_mini_BUTTON NAME:hover" line for your hover buttons.
The button sizes have already been put in the coding for these buttons.

Also go to Administration Panel/Display/Homepage/Headers & Navigation/Page Headers and under Display only images in the navbar, click YES
CSS Code
Spoiler:
Code:
 #i_icon_mini_index{width:92px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_index:hover{background:url(IMAGE URL HERE) no-repeat 0 0;}

    #i_icon_mini_calendar{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_calendar:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_gallery{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_gallery:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_faq{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_faq:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_search{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_search:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_members{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_members:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_groups{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_groups:hover{background:url(IMAGE URL HERE) no-repeat  0 0px;}

    #i_icon_mini_profile{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_profile:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_message{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_message:hover{background:url(IMAGE URL HERE) no-repeat 0 0;}

    #i_icon_mini_new_message{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_new_message:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_register{width:89px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_register:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_login{width:92px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_login:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_logout{width:92px;height:34px;background:url(IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_logout:hover{background:url(IMAGE URL HERE) no-repeat  0 0;}

Enjoy!
Handcrafted by:
DustyBones
avatar
DustyBones
Active Poster

Male Posts : 1228
Reputation : 520
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Re: Blue Hover Navbar

Post by koolkat96 on January 20th 2013, 7:52 am

These are good!
avatar
koolkat96
Forumember

Female Posts : 584
Reputation : 7
Language : English
Location : Bangalore, India

http://houkago-tea-time.forumakers.com/

Back to top Go down

Re: Blue Hover Navbar

Post by CodyDeathHammer on January 20th 2013, 10:41 am

wow nice so awesome i am gonna use them
avatar
CodyDeathHammer
Forumember

Male Posts : 147
Reputation : 1
Language : English

Back to top Go down

Re: Blue Hover Navbar

Post by Mike on February 22nd 2013, 12:05 am

Your proposal has been accepted.
avatar
Mike
Hyperactive

Male Posts : 4243
Reputation : 468
Language : English, HTML, CSS
Location : Loveland, Colorado

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