Works in IE and Firefox: [u][b]Introduction[/b][/u] In this tutorial I will show you another way how to create custom Banner with Navigation. Img Preview: [img]http://i173.photobucket.com/albums/w76/myparis16/p1-1.jpg[/img] Live Preview: http://profiles.friendster.com/markstestpage [u][b]Requirements[/b] [/u] 1. Banner Picture: like this http://i173.photobucket.com/albums/w76/myparis16/ms_hdrNEW.jpg 2. Your ready made navigation bar: or just use my navigation content, more on that later. [u][b]Step 1[/b][/u] Put this codes in your css. Dont copy the red part: [quote]#navLang, #search, #search form, #marketing, #logo, #subnav, #surfer, #mainnav, .secondary_links{display:none!important;} #navigation{ border:1px solid #000000; background:#000000 url('') center center repeat scroll; } #marketing_bg, #mainnav{ background:transparent url('') center center repeat scroll; } #marketing_bg{ height:[color=red]HEIGHT OF YOUR NAVIGATION BAR. This time i will use 90px[/color]; } #navdivider{ background:transparent url('[color=red]URL OF YOUR BANNER[/color]') center top no-repeat scroll; border:0px solid #000000; height:[color=red]HEIGHT OF YOUR BANNER. This time i will use 390px[/color]; }[/quote] If you test now your page, the output should be like this: [img]http://i173.photobucket.com/albums/w76/myparis16/p2-1.jpg[/img] Notice that there is a blank space, that is for the Navigation Bar. [u][b]Step 2[/b][/u] In your JS file, insert a html content for the id of marketing_bg like this [quote]document.getElementById("marketing_bg").innerHTML = "<div style='background-color:#000000;width:100%;height:90px;background-image: url([color=red][b]BG_IMAGE[/b][/color]);'><table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='center'><a href='http://www.friendster.com/' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/home_1.jpg' border='0' alt='home'></a></td><td align='center'><a href='http://www.friendster.com/photos/[color=red][b]USER_ID[/b][/color]' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/fotos_1.jpg' border='0' alt='Fotos'></a></td><td align='center'><a href='http://www.friendster.com/sendmessage.php?uid=[color=red][b]USER_ID[/b][/color]' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/sendmsg_1.jpg' border='0' alt='Send message'></a></td><td align='center'><a href='http://www.friendster.com/friends/[color=red][b]USER_ID[/b][/color]' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/fans_nav.jpg' border='0' alt='Join group'></a></td><td align='center'><a href='http://friendster.com/myparis' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/downloads_1-1.jpg' border='0' alt='Downloads'></a></td><td align='center'><table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='center' style='font-family:Geneva, Arial, Helvetica, sans-serif; font-size:8px; color:#FFFFFF'>CLICK TO VOTE</td></tr><tr><td align='center'><a href='http://top.friendster-tweakers.com/'><img src='http://top.friendster-tweakers.com/button.php?u=emo_mark16' alt='Friendster Top Profiles' border='0' /></a></td></tr></table></td></tr></table></div>";[/quote] [u][b]Finish Product[/b][/u] [img]http://i173.photobucket.com/albums/w76/myparis16/p3-1.jpg[/img] [u] [b]Reminders[/b][/u] Make sure that you didn't hide this id's in your css file [color=red][b]#marketing_bg #navdivider[/b][/color] Thats all. not sure if this will work on your profile but mines work.

Last edited by myparis (2008-05-07 14:52:56)