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)