customized shoutout with navigation+other features

actually, i already posted this code before but it was locked due to friendster updates
so...it's back!!!

features of the code:

navigation in your shout out
it can detect your browser and the version
it can detect your date
it can detect the viewer's name and user id.

here's the code:




Code:
[qoute]function shoutoutcus(){
var wakoko="<div align='left'><font color= #ffffff>My Navigation:</font></div> <marquee style='width:85%px;border:2px solid #ffffff; direction='left' scrollamount='2' onmouseover='this.stop()' onmouseout='this.start()'><input type='button' value='Home' style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com'\"> <input type='button' value='My Profile'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://profiles.friendster.com/user.php'\"> <input type='button' value='My Friends'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com/friends.php'\"> <input type='button' value='Explore'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://www.friendster.com/explore.php'\"> <input type='button' value='Search'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com/gallery.php'\"> <input type='button' value='Invite'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com/invite.php'\"> <input type='button' value='Messages'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com/messages.php'\"> <input type='button' value='Settings'style='background-color:transparent;border:none;font-family:georgia MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com/editaccount.php'\"> <input type='button' value='Log Out'style='background-color:transparent;border:none;font-family:verdana MS;font-weight:bold;font-size:12;color:#ffffff;' onClick=\"top.location.href='http://friendster.com/logout.php'\"> </marquee><br><div align='left'><font color= #ffffff><strong>Hi</font></strong> <b><font color= lightgreen><strong>"+pageViewerFName+"</strong></color></b><br><font color= #ffffff><strong>your ID is </strong></font><b><font color=lightgreen><strong>"+pageViewerID+"</strong></color></font><br><strong><font color=#ffffff>and the time and date there is</font> <font color='lightgreen'>"+Date()+"</font></strong><br><font color=#ffffff>your browser is </font><font color=lightgreen>"+navigator.appName+" "+navigator.appVersion+"</font></color><br><font color= #ffffff><strong>Welcome to my page!This is </strong></font><font color=red><strong><blink>NOT</blink></font></strong><font color=#ffffff><strong> an Overlay as you might think...enjoy viewing my profile!</strong></font><br><font color= #ffffff><strong>Drop some comment for me thanks...</font></strong><br></div>";

document.getElementById('cpShoutoutBox').style.height='260';
document.getElementById('cpShoutoutBox').style.overflow='auto';
document.getElementById('cpShoutoutBox').innerHTML="<table width='100%'><tr><td align='center'>"+wakoko+"</td></tr></table>";[/qoute]

}setTimeout("shoutoutcus()",1000);
just copy and then paste it on your js codes.

you can edit this code:



Code:
#ffffff
this is what we call hexadecimal color...this one is white.you can change it to any hex color that you want.

additional: to make the custom shout out transparent...you should have a css code to make your shout out box transparent...here's the code:



Code:
/* TRANSPARENT SHOUT OUT */

[qoute].somsg { background-image:url('none') !important; color:#ffffff ; background-color:transparent ! Important; }
.so {background-image:url('none') !important; background-color:transparent ! Important ; }
.soc { background-image:url('none') !important; background-color:transparent ! Important ; }
#delShoutoutForm {background-image:url('none') !important; background-color:transparent ! Important ; }
#cpShoutoutBox { background-image:url('none') !important; background-color:transparent ! Important ; }
#shoutoutForm { background-image:url('none') !important; background-color:transparent ! Important ; }
.disabled normal { background-image:url('none') !important; background-color:transparent ! Important ; }
.divider { background-image:url('none') !important; background-color:transparent ! Important ; }
.fakeLink { background-image:url('none') !important; background-color:transparent ! Important ; }
.sol {background-image:url('none') !important; background-color:transparent ! Important ; }
.sob { background-image:url('none') !important; background-color:transparent ! Important ; }
.commonbox .imgblock75 { background-image:url('none') !important; background-color:transparent ! Important }
.ir { background-image:url('none') !important; background-color:transparent ! Important }
.flogridp .flogriditem { background-image:url('none') !important; background-color:transparent ! Important }
.dr { background-image:url('none') !important; border:none ! Important }
.fitem1wrapper { background-image:url('none') !important; background-color:transparent ! Important }
.controlpanel .so a, .minicontrolpanel .so a { color: #ffffff !important; }[/qoute]

.flogridp .flogriditem { background:transparent url() no-repeat; }
put the transparent shout out code on your css codes...then that's it!!!...