[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)