
[b]Cedits:[/b][url]http://blog.itookia.com/post/How-to-create-VISTA-style-toolbar-with-CSS.aspx[/url]

[b]School: Friendstertalk Univesity[/b]

[b]Requirements:[/b][quote]no newbie questions
if you have this in your css: [b]#marketing {display:none;}[/b]
[b]#marketing_bg {display:none;}[/b] just remove it..[/quote]

[b]The screenshot[/b][align=center]Click to enlarge[/align]
[url=http://i36.tinypic.com/29bf3uo.png][img]http://i36.tinypic.com/29bf3uo.png[/img][/url]

[b][url=http://profiles.friendster.com/ezekielclarion]THE LIVE PREVIEW[/url][/b] [i]patients of loading

[/i]
[i]lets begin....[/i]

[b]Code[/b]
[b]1st step[/b]

background
[img]http://i289.photobucket.com/albums/ll215/ezekielpics/friendster/toolbar.gif[/img]

left hover
[img]http://i289.photobucket.com/albums/ll215/ezekielpics/friendster/toolbarleft.png[/img]

right hover
[img]http://i289.photobucket.com/albums/ll215/ezekielpics/friendster/toolbarright.png[/img]

[b]2nd step[/b]
Put this inside your css file and just edit the bolded part with the images above..
[quote]/* VISTA TOOLBAR */
img{
border: 0pt;
}
#bottom_div{
width: 520px;
height: 150px;
background-color: #b9d1ea;
clear:both;
}
#vista_toolbar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}
#vista_toolbar ul {
background-image:url( [b]BACKGROUND[/b] );
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:815px;
}
#vista_toolbar li {
display:inline;
padding:0;
}
#vista_toolbar a {
color:#FFF; /* need because it will use default link color */
float:left;
padding:0 3px 0 3px; /* left 3 px because of left.png image */
text-decoration:none;
}
#vista_toolbar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}
#vista_toolbar a span img {
border:none;
margin:8px 4px 0 0;
}
/* show picture when mouse over link */
#vista_toolbar a:hover{
background: url( [b]LEFT HOVER[/b] ) no-repeat left center;
}
#vista_toolbar a:hover span {
background:url( [b]RIGHT HOVER[/b] ) no-repeat right center;
}
#vista_toolbar a.right {
float:right;
}[/quote]

[b]last step[/b]
the javscript code.. save this codes to your JS file
<">if you want to edit the names and the images.. feel free to change it..
and that's it..
DONE
Last edited by ezekielclarion (2008-08-22 23:04:06)