Navbar code

How can I create this effect on my navbar ?

http://radiosoundall.forumotion.com/index.htm?theme_id=155391

sgeorge its the same as i gave you by the PM.

A.... Ok I asked because this colorizes the bar...

For PhpBB 2:

Code:

a.mainmenu img {
-khtml-opacity : 0.7;
-moz-opacity : 0.7;
filter : alpha(opacity=100);
opacity : 0.7;
}
a.mainmenu:hover img {
-khtml-opacity : 1;
-moz-opacity : 1;
filter : alpha(opacity=70);
opacity : 1;
}

PhpBB 3:

Code:

ul.navlinks a img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Paste to CSS. ACP -> Display -> Colors -> CSS Stylesheet

I got this code from DustyBones' website.

I havw this code... My question is now.. How the buttons are colorized ? Becase this code just makes it transparent....


thank you for responding gangstar and Dumbledore27

sgeorge wrote:I havw this code... My question is now.. How the buttons are colorized ? Becase this code just makes it transparent....


thank you for responding gangstar and Dumbledore27

They will get colourized if you hoover them by mouse (it's called mouse-hoover or mouse-over effect).

This justs makes transoparent the navbar and when you point it with the mouse,it gets normal... It doesn't change color.

and in the site you wrote above it doesn't changes the colour

Look what I mean...

well i don't know what this called, so i cant help

ok thank you !

Well i found the code! but it need some changes with the pictures.

Code:


div.maintitle{color: #000;}
#i_icon_mini_index{width:85px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an10.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an10.png) no-repeat 0 -32px;}
#i_icon_mini_portal{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an13.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an13.png) no-repeat 0 -32px;}
#i_icon_mini_faq{width:86px; height:32px; background:url(http://i39.tinypic.com/2lcuwxk.png) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(http://i39.tinypic.com/2lcuwxk.png) no-repeat 0 -32px;}
#i_icon_mini_search{width:86px; height:32px; background:url(http://i41.tinypic.com/b8vigp.png) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(http://i41.tinypic.com/b8vigp.png) no-repeat 0 -32px;}
#i_icon_mini_members{width:86px; height:32px; background:url(http://i42.tinypic.com/2uxve2q.png) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(http://i42.tinypic.com/2uxve2q.png) no-repeat 0 -32px;}
#i_icon_mini_groups{width:86px; height:32px; background:url(http://i41.tinypic.com/2j2vm6o.png) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(http://i41.tinypic.com/2j2vm6o.png) no-repeat 0 -32px;}
#i_icon_mini_profile{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an16.png) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an16.png) no-repeat 0 -32px;}
#i_icon_mini_message{width:86px; height:32px; background:url(http://i43.tinypic.com/2wodc2q.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://i43.tinypic.com/2wodc2q.png) no-repeat 0 -32px;}
#i_icon_mini_new_message{width:86px; height:30px; background:url(http://i43.tinypic.com/2itstjo.png) no-repeat 0 0;}
#i_icon_mini_new_message:hover{ background:url(http://i43.tinypic.com/2itstjo.png) no-repeat 0 -32px;}
#i_icon_mini_logout{width:41px; height:32px; background:url(http://i42.tinypic.com/wu1fe8.png) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(http://i42.tinypic.com/wu1fe8.png) no-repeat 0 -32px;}
#i_icon_mini_register{width:86px; height:32px; background:url(http://i40.tinypic.com/awrpjs.png) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(http://i40.tinypic.com/awrpjs.png) no-repeat 0 -32px;}
#i_icon_mini_login{width:41px; height:32px; background:url(http://i44.tinypic.com/10nb8xy.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://i44.tinypic.com/10nb8xy.png) no-repeat 0 -32px;}



I think you or im sure, your navbar pictures must be like this.
and delete them from the pics managements.

Yeah ! I think that works if you have the navbar turned off and if you change on the code the image's URLs...

yes so you said that you are a graphic designer xD so make your new navbar like the image above. ;D

Gangstar15 wrote:yes so you said that you are a graphic designer xD so make your new navbar like the image above. ;D

Yeah ! I will ! But....tommorow because I've just formated my PC and I have to reinstall PS...


P.S. : You should be staff right here

Okay d; maybe i will do a set too, but .........tomorrow xD lol ^^

You should be staff right here .... You help so much everyone !

Haha ty ty . but who will accept me ^_^

The have to... You are almost always ONLINE and you help everywhere you can ! Why don't you make a request ?

haha yes im almost 24 hr online xD. and another one told me the same ;D . i will try this out. ;P

Question !

I have to create to images and put them in one ? Like this ? → https://i.servimg.com/u/f64/13/24/64/14/bar_an10.png

Yes!

Yeah Ok... I started creating the navbar but a have a dificulty in creating the glow - flash that has the 2nd image... Like that →

Using Blending options you can set an Inner Glow from the center of the image.

Good idea SiKiN

If you can make that, can u make one for me?! My forum is progameshacking.forumotion.com

well its easy just make nav bar and use the code above xD

Draw a square, right click the layer and hit blending options.

Tick the box that says Bevel.

Button done!

Yes it is done ! Thank you all for the instructions !

yeap, but, here the photoshop have a bug..

I make that text box and start writing..

Nothing is there, but the layer's name is renamed to what i wrote...

Do you find a solution for that?!