[b]preview:[/b] [url=http://profiles.friendster.com/97631908]click here[/url] [b]Edited: June 2009[/b] and still working... August 2009 [b]Customized Navigation or Banner Area[/b] -- Top Banner -- Friendster Logo w/ background above ur banner. -- Banner -- Customized Mainnav below ur banner with Rollover and Shake. -- Extra Banner below your mainnav [b]Image View[/b] Top Banner logo w/ Background Banner Customized mainnav Extra Banner [img]http://i43.tinypic.com/akxr9d.jpg[/img] [b]what you need[/b] Top Banner = a banner either made of image or text type Logo background = a divider image Banner = an image banner Customized mainnav = Buttons, Emoticons or Bullets and an Extra image Extra Banner = an image banner background image = for backgrounds on mainnav and extra banner [img]http://i44.tinypic.com/2zg6w4j.jpg[/img] [b]sizes[/b] you can make any height sizes on banners as long as its width don't exceed 800px. [b]but for now lets use what i'm using on my page (see the images above).[/b] Top Banner = 700 x 90 text banner Logo background = 250 x 20 divider image Banner = 800 x 260 image banner Customized mainnav = 4 small buttons with a 90 x 32 size each and 4 larger buttons with a 96 x 38 size each and Extra image with 250 x 32 size in the center. -emoticons or bullets. Extra Banner = 700 x 110 background image = any size of animated or gif images [b]IMPORTANT:[/b] -- your mainboxes and sideboxes must not exceed its default width -- must not have any other navigation code in css or js that may conflict with the navigation area... First... [b]CSS Support[/b] --- put in your main css extension/external file. edit at your liking... color,images, etc. [quote][b]/* Top Banner */[/b] #banneradrow { background: transparent; align: center; } [b]/* Friendster Logo */[/b] #logo { background-color: transparent; background-image:url([b]PUT YOUR Logo Background URL HERE[/b]); background-attachment: scrollable; background-repeat: no-repeat; background-position: bottom center; border: 0px solid #333333; padding-top:2px; padding-bottom:2px; padding-left: 0px; padding-right:0px; margin-left:0; margin-right:0px; margin-top:0px; margin-bottom:4px; } [b]/* Banner */[/b] #navigation { width:800 !important; height:260 !important; width:100%; background: url([b]PUT YOUR Banner URL HERE[/b]); background-attachment: scrollable; backgroud-repeat:no-repeat; text-align: center; align: center; background-color: transparent; border:1px solid #555555; display:block !important; overflow: hidden; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; } #navBg { text-align:center; align:center; overflow:hidden; } [b]/* Customized Navigation */[/b] #mainnav { width:800px !important; text-align: center; align: center; border: 1px solid #333333; background-color: transparent; background-image:url([b]PUT YOUR Background Image URL HERE[/b]); background-attachment: scrollable; background-repeat: repeat; background-position: center; padding-left: 0px; padding-right:0px; padding-top:5px; padding-bottom:5px; margin-left:0; margin-right:0px; margin-top:7px; margin-bottom:7px; } [b]/* Shake Image css support */[/b] .shakeimage { position:relative; } [b]/* areas to hide */[/b] #mainnav .right {display:none !important;} #mainnav div div {display:none !important;} #mainnav .mainfoldericon {display:none !important;} #navLang {display:none !important;} #navigation div {background:transparent !important;} #navdivider {display:none !important;} #subnav {display:none !important;} #subnav_search {display:none !important;} #navBar {display:none !important;} #marketing_bg {display:none !important;} #marketing{display:none !important;} #navdivider {display:none !important;} #surfer {display: none !important;} #search {display:none !important;} #search form {display:none !important;} #sponsorsAd {display: none !important;} .languagePanel {display: none !important;} .banner_ad_fix {display:none !important;} .secondary_links {display:none !important;} .primary_links {background:transparent !important;}[/quote] Next: [b]JScript or javascript[/b] --- put in your main extension/external js file. [b]//banner area codes[/b] [quote][b]//putting mainnav below banner[/b] var kino; var onik; kino = document.getElementById("navigation").parentNode; onik = document.getElementById("mainnav"); kino.appendChild(onik); [b]//putting logo above banner[/b] var noki; var inok; inok = document.getElementById("logo"); noki = document.getElementById("navBg").parentNode; noki.parentNode.insertBefore(inok,noki); [b]//top banner[/b] var bannertop=banneradrow.getElementsByTagName("td")[0]; var topbanner="<div class ='moshpit' align='center'>"+ "<center><img src=\"[b]PUT YOUR Top Banner URL HERE[/b]\" border=\"0\"></center>"+ "</div>"; bannertop.innerHTML=topbanner; bannertop.style.height="auto";bannertop.style.overflow="hidden"; [b]//customized mainnav with rollover image and shake script[/b] var buttons=document.getElementById("mainnav"); var mainnavbuttons="<div class ='pitmosh' align='center'>"+ "<center><table width='98%' border='0' cellspacing='0' cellpadding='0'>"+ "<tr>"+ "<td align='center'><img src='PUT URL OF Emoticons or Bullets HERE'></td>"+ "<td align='center'><a href=\"http://www.friendster.com/\" onMouseOver=\"chgImg('home', 'image2')\" onMouseOut=\"chgImg('home', 'image1')\" target='_self'><img name='home' src=\"[b]PUT URL OF small Home 1 Button HERE[/b]\" border=\"0\" class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\"></a></td>"+ "<td align='center'><img src='PUT URL OF Emoticons or Bullets HERE'></td>"+ "<td align='center'><a href=\"http://profiles.friendster.com/user.php\" onMouseOver=\"chgImg('page', 'image4')\" onMouseOut=\"chgImg('page', 'image3')\" target='_self'><img name='page' src=\"[b]PUT URL OF small Page 1 Button HERE[/b]\" border=\"0\" class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\"></a></td>"+ "<td align='center'><img src='PUT URL OF Emoticons or Bullets HERE'></td>"+ "<td align='center'><img src='[b]PUT URL OF Extra Image HERE[/b]'></td>"+ "<td align='center'><img src='PUT URL OF Emoticons or Bullets HERE'></td>"+ "<td align='center'><a href=\"http://www.friendster.com/gallery.php\" onMouseOver=\"chgImg('search', 'image6')\" onMouseOut=\"chgImg('search', 'image5')\" target='_self'><img name='search' src=\"[b]PUT URL OF small Search 1 Button HERE[/b]\" border=\"0\" class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\"></a></td>"+ "<td align='center'><img src='PUT URL OF Emoticons or Bullets HERE'></td>"+ "<td align='center'><a href=\"http://www.friendster.com/logout.php\" onMouseOver=\"chgImg('logout', 'image8')\" onMouseOut=\"chgImg('logout', 'image7')\" target='_self'><img name='logout' src=\"[b]PUT URL OF small logout 1 Button HERE[/b]\" border=\"0\" class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\"></a></td>"+ "<td align='center'><img src='PUT URL OF Emoticons or Bullets HERE'></td>"+ "</tr>"+ "</table></center></div>"; buttons.innerHTML=mainnavbuttons; buttons.style.height="auto";buttons.style.overflow="hidden"; [b]//extra banner below mainnav[/b] //you can edit the width percentage depending on the size of your extra banner. var extrabanner; try { extrabanner=document.createElement("div"); }catch (e) { extrabanner=document.createElement("<div>"); } extrabanner.setAttribute("style","text-align:center;"); extrabanner.innerHTML="<table width='90%' align='center'><div style='background:url([b]PUT YOUR Background Image URL HERE[/b]) repeat fixed center; border:1px solid #444444;'><br><center><img src=\"[b]PUT URL OF YOUR Extra Banner HERE[/b]\"></center><br></div></table><br>"; document.getElementById("mainnav").parentNode.appendChild(extrabanner);[/quote] [b]//rollover image script[/b] [quote]//for image hovering effects if (document.images) { image1=new Image; image1.src="[b]PUT URL OF small Home 1 Button HERE[/b]"; image2=new Image; image2.src="PUT URL OF larger Home 2 Button HERE"; image3=new Image; image3.src="[b]PUT URL OF small Page 1 Button HERE[/b]"; image4=new Image; image4.src="PUT URL OF larger Page 2 Button HERE"; image5=new Image; image5.src="[b]PUT URL OF small Search 1 Button HERE[/b]"; image6=new Image; image6.src="PUT URL OF larger Search 2 Button HERE"; image7=new Image; image7.src="[b]PUT URL OF small Logout 1 Button HERE[/b]"; image8=new Image; image8.src="PUT URL OF larger Logout 2 Button HERE"; } function chgImg(name, image) { if (document.images) { document[name].src = eval(image+".src"); } }[/quote] [b]//shake image script[/b] [quote]//for shaking images var rector=4 var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector } else if (a=){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 }[/quote] [b]How to compile js codes[/b] [quote]function onProfileLoad() { [b]//banner area codes here[/b] //your addboxes and other codes here [b]}[/b] [b]//rollover image script here[/b] /* WVM TRACKER SCRIPT */ if (typeof TRACKER == "undefined") { TRACKER = {}; } etc... etc... /* END OF TRACKER SCRIPT */ //your other codes here [b]//shake image script here[/b] //your other codes here[/quote] that's it!! hope you gets... its been edited.. just follow the steps one by one... btw... you can also replace the banners with [b]embeds or flash[/b]... and don't be confused on the [b]expanding text with image[/b] at my banner... it's just an another trick not included here... Credits also to... Angell DeVille, SwitPotato and feruzz

Last edited by Refresh/Reload (2009-08-05 21:47:37)