friendsterTalk - Friendster Forum

the ff are my own version wakoko
dont blame anyone   if this is malabo
tutorial base from original teaching of ka Paul
again i just modify this to make it work again and improve it as well...

SS:


PREVIEW HERE

just refresh the page sowee to all firefox user... i inserted block fx for this sample wakoko...

INSTRUCTIONS #1:
1. Copy the CSS codes and EDIT it on a NotePad  play with its properties...
change the position of the new_main_navigation,
newperofileinfo,etc to change the positions of the boxes.....
i did not change the original id names given by ka Paul..

2. Save the file as myfile.css
3. Upload it to any web hosting site (e.g., www.freewebtown.com)

/* NEW BOXES CSS CODE */
#new_main_navigation {position: absolute; width: 714px; height: 22px; left: 270px; top: 53px;}

#new_navigation {position: absolute; width: 180px; height: 206px; left: 790px; top: 115px; overflow:auto;}

#newprofileinfo {position: absolute; width: 450px; height: 206px; left: 380px; top: 90px; overflow:auto;}

#newcommentbox {position: absolute; width: 220px; height: 240px; left: 380px; top: 320px; overflow:auto;}

#newtestimonialbox {position: absolute; width: 440px; height: 240px; left: 520px; top: 320px; overflow:auto;}


#new_main_navigation a {border: 2px outset #FFFFFF; height:20px;
background-color:#006699 ;  padding: 3 3 2 3!important}

#new_main_navigation a:hover {border: 2px inset #FFFFFF;height:20px;
background-color: #006699; padding: 3 3 2 3!important;font-weight:bold;color:#ffffff}

#new_navigation a{color:#006699;background: url('') !important;padding-left:8px;width:70;
background-repeat: no-repeat !important;
background-position: left !important;
background-attachment:scroll!important;
}

#new_navigation a:hover{color:#ffffff;}



/* FriendsterMagic - Editable CSS Properties */
/* Master Background */
body {background:#336699;}
body {
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #336699;
scrollbar-dark-shadow-color: #336699;
scrollbar-track-color: #336699;
}

/* Master Links */
a:link {color:#cceeff;text-decoration:none;font-family:Trebuchet MS;font-weight:bold;}
a:visited {color:#cceeff;text-decoration:none;font-family:Trebuchet MS;font-weight:bold;}
a:hover {color:#fffffff;text-decoration:none;font-family:Trebuchet MS;font-weight:bold;}


/* New Main Nav Links */
.nav1 a {font-size:12px;}

/* New Nav Links */
.nav2 a {font-size:12px;}

#newcommentbox a {
font-size: 11px;
font-weight:bold;
font-family: Arial, Sans-serif;
color: #FFFFFF! important;
width :120;margin-right:20
}

#newcommentbox a:hover {font-size: 9px;
font-weight:bold;
font-family: Arial, Sans-serif;
color: #FFFFFF! important;
}

#newcontainer {position: absolute; width: 100px; height: 100px; left:0px; top:0px;}

/* Master Text */
body {color:#ffffff;font-family:Trebuchet MS;}
p {color:#cceeff;font-family:Trebuchet MS;font-weight:bold;}
h2 {color:#ffffff;font-family:Trebuchet MS;}


.so {display:none;}
.more {display:none;}
.evenrow {background-color:transparent;}


                     

/* FriendsterMagic -CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
font-weight:bold;
border: 2px outset #FFFFFF;
background-color:#006699;
color:#ffffff;
font-family: Arial, Sans-serif;
text-decoration: ;
width:150px;height:12px;
margin-left:30; margin-right:0;
margin-top:0; margin-bottom:0;
margin-top:3px; padding-left:0;
padding-right:0; padding-top:2; padding-bottom:0;
}

#controlPanelButtons a:hover {
background-color: #006699;
border:2px inset #FFFFFF;
color:#cceeff;
font-family: Arial, Sans-serif;
text-decoration:
font-size: 9px!important;
font-weight:bold; padding-left:0;
padding-right:0; padding-top:2;
padding-bottom:0;
}


/* FriendsterMagic VIEW ALL LINK*/

.viewall { text-align: center !important;color:#996600!important }
.viewall a {
color:#ffffff;
font-family: Arial, Sans-serif;
font-size: 11px;
font-weight:bold;
border: 2px outset #FFFFFF;
background-color:#006699;
width:95px;height:20px;
margin-left:30; margin-right:0;
margin-bottom:0; margin-top:2px;
padding-left:1; padding-right:1;
padding-top:3;
padding-bottom:1;
}

.viewall a:hover {
color:#ffffff;
font-family: Arial, Sans-serif;
font-size: 9px;
font-weight:bold;
border: 2px inset #FFFFFF;
background-color:#006699;
text-decoration: ;
width:95px;height:20px;
margin-left:30; margin-right:0;
margin-bottom:0; margin-top:2px;
padding-left:1; padding-right:1;
padding-top:3; padding-bottom:1;

}

.editlink { display: none !important; }

/* FriendsterMagic - resize friend photo */
.friends.flogrid75 .ir img {width:120px !important;height:120px !imporant;border:none;}
.friends.flogrid75 .ir {width:120px !important;height:120px !imporant;margin-top:5px;background-color:transparent;}

/* FriendsterMagic - center friend photo */
.friends.flogrid75 {margin-left: 8px;padding-right:0px !important;width:0px;}
.friends.dr {display: none;}

#content_controlpanel_1_1 {width:300px !important;}
#myframe {height:3000 !important;}
#cboxdiv {margin-top:5px;}
#credits, #shoutbox {display:none}


/* FriendsterMagic -user query bullet */
.q 
  background: url('') no-repeat center left !important;
  color: #F0FFFF;
  text-transform: lowercase;
  padding-left:25px; padding-right:0;
  padding-top:0; padding-bottom:0
}

/* FriendsterMagic -user data bullet */
.data a {
background:url('') no-repeat fixed left center;
height:13px;
text-align:center;
color: #F5FFFA ;
text-decoration: ;
padding-left:18px;
padding-right:0px;
padding-top:0px;
padding-bottom:2px
}
.data a:hover {
background:url('') no-repeat fixed left center;
height:13px;
text-align:center;
color: #F5FFFA ; 
padding-left:18px;
padding-right:0px;
padding-top:0px;
padding-bottom:2px

}

INSTRUCTIONS #2:
1: Copy the JS codes and EDIT it on a NotePad
2. Save the file as myfile.js
3. Upload it to any web hosting site (e.g., www.freewebtown.com)

/*******************************
Do not remove this headings!
Coded by - ka Paul
Improved by - switpotato™
FriendsterMagic.net-Friendsterforum.com
*******************************/

//this will be your new_main_navigation
var box_1 = "<a href=\"javascript:onClick=get_properties_3('content_6')\">More About Me</a>&nbsp;&nbsp;"; //you may alter &nbsp; with a <br> tags if you want a line break
var box_2 = "<a href=\"javascript:onClick=get_properties_3('content_0')\">Main Profile</a>&nbsp;&nbsp;";
var box_3 = "<a href=\"javascript:onClick=get_properties_3('content_18')\">Testimonials</a>&nbsp;&nbsp;";
var box_4 = "<a href=\"javascript:onClick=get_properties_1('content_10')\">Media Box</a>&nbsp;&nbsp;";
var box_5 = "<a href=\"javascript:onClick=get_properties_1('content_2')\">Friends</a>&nbsp;&nbsp;";
var box_6 = "<a href=\"javascript:onClick=get_properties_1('content_1')\">Gallery</a>&nbsp;&nbsp;";
var box_7 = "<a href=\"javascript:onClick=get_properties_1('shoutbox')\">Shoutbox</a>&nbsp;&nbsp;";
var box_8 = "<a href=\"javascript:onClick=get_properties_1('credits')\">Credits</a>&nbsp;&nbsp;";
var new_main_nav = box_1+box_2+box_4+box_5+box_6+box_7+box_8;

//this will be your new_navigation
var nav_1 = "<a href=\"http://www.friendster.com/\">Home</a><br><br>"; //you may alter <br> tag with a &nbsp; if you want a space
var nav_2 = "<a href=\"http://www.friendster.com/user.php\">Profile</a><br><br>";
var nav_3 = "<a href=\"http://www.friendster.com/friends.php\">Friends</a><br><br>";
var nav_4 = "<a href=\"http://www.friendster.com/explore.php\">Explore</a><br><br>";
var nav_5 = "<a href=\"http://www.friendster.com/reviews/\">Reviews</a><br><br>";
var nav_6 = "<a href=\"http://www.friendster.com/blogs.php\">Blogs</a><br><br>";
var nav_7 = "<a href=\"http://friendstermagic.net\">Forum</a><br><br>";
var nav_8 = "<a href=\"http://www.friendster.com/logout.php\">Log Out</a><br><br>";
var new_navigation = nav_1+nav_2+nav_3+nav_4+nav_5+nav_6+nav_7+nav_8;

//this will be your new html container
function show_main_content() {
var html_1 = "<div id=\"newcontainer\" align=\"center\">";
var html_2 = "<img border=\"0\" src=\"IMAGE URL HERE\" width=\"1000\" height=\"600\">";
var html_3 = "<div id=\"new_navigation\"></div>";
var html_4 = "<div id=\"newprofileinfo\"></div>";
var html_5 = "<div id=\"newfriendbox\"></div>";
var html_6 = "<div id=\"newcommentbox\"></div>";
var html_7 = "<div id=\"newtestimonialbox\"></div>";
var html_8 = "<div id=\"new_main_navigation\"></div>";
var html_9 = "<div id=\"newphotobox\"></div>";
var html_10 = "</div>";
var show_box_info_content = html_1+html_2+html_3+html_4+html_5+html_6+html_7+html_8+html_9+html_10;
window.document.getElementById('footer_container').innerHTML = show_box_info_content;
}

//this will show the contents for each new boxes
function get_item_box() {
var main_box_1 = window.document.getElementById('content_0').innerHTML;
var main_box_2 = window.document.getElementById('content_2').innerHTML;
var main_box_3 = window.document.getElementById('content_1').innerHTML;
var main_box_4 = window.document.getElementById('content_10').innerHTML;
var main_box_5 = window.document.getElementById('content_18').innerHTML;


var show_box_info_1 = main_box_1;
var show_box_info_2 = main_box_2;
var show_box_info_3 = main_box_3;
var show_box_info_4 = main_box_4;
var show_box_info_5 = main_box_5;

var show_nav_1 = "<center><span class=\"nav1\">"+new_main_nav+"</span></center>";
var show_nav_2 = "<center><span class=\"nav2\">"+new_navigation+"</span></center>";

window.document.getElementById('new_main_navigation').innerHTML = show_nav_1;
window.document.getElementById('new_navigation').innerHTML = show_nav_2;
window.document.getElementById('newprofileinfo').innerHTML = show_box_info_1;
window.document.getElementById('newcommentbox').innerHTML = show_box_info_4;
window.document.getElementById('newtestimonialbox').innerHTML = show_box_info_5;
}

//this box will show the gallery, shoutbox ,media and credits
function get_properties_1(id) {
document.getElementById('newcommentbox').innerHTML=document.getElementById(id).innerHTML
}

//this box will show the testimonial
function get_properties_2(id) {
document.getElementById('newtestimonialbox').innerHTML=document.getElementById(id).innerHTML
}


//this box will show the profile info and more about me
function get_properties_3(id) {
document.getElementById('newprofileinfo').innerHTML=document.getElementById(id).innerHTML
}

//do not alter anything here
document.write('<meta http-equiv="imagetoolbar" content="no">') ;
document.write('<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">') ;
document.write('<style type=text/css>table#flo_wrapper {display:none} #footer {display:none}</style>');


//you may add some onLoad functions here just place a semicolon with them ( ; ) when adding one
document.write('<body onload="show_main_content();get_item_box()">') ;



//place credits here, make sure that you place them in one single line.. u may add but pls dont remove the original mssg
document.write('<span align="center" id="credits"><br><br><br><br><font color="#FFFFFF"><b>CREDITS</b></font><br><b>Creation by:</b><br><br><b><a target="_blank" href="http://www.friendsterforum.com/forum/index.php">switpotato</a></b></font><br><br><a target="_top" href="http://www.friendstermagic.net"><img border="0" src="http://i147.photobucket.com/albums/r299/switpotato/switpotatologo.gif" alt="Switpotato" width="88" height="30"></a><br><br><br><br><br></font><font face="Arial Narrow" size="1"><b><a target="_top" href="http://www.friendstermagic.net">FriendsterMagic.net</a></b></font><font face="Arial Narrow" size="2"><br><br><a target="_top" href="http://www.friendstermagic.net"><img border="0" src="http://www.freewebtown.com/friendstermagic/images/logo.jpg" alt="FriendsterMagic.net" width="88" height="30"></a><br><br><br><br></font></span>') ;


//place cbox here, just replace the complete SRC if you want to use your own cbox
document.write('<span id="shoutbox"><div align="center" id="cboxdiv"><iframe frameborder="0" width="500" height="170" src="http://www2.cbox.ws/box/?boxid=1400000&boxtag=7661&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxform" style="border: #FFFFFF 3px dashed;border-bottom:0px;" id="cboxform"></iframe><br><iframe frameborder="0" width="500" height="70" src="http://www2.cbox.ws/box/?boxid=1400000&boxtag=7661&sec=form" marginheight="2" marginwidth="2"  scrolling="no" allowtransparency="yes" name="cboxmain" style="border: #FFFFFF 3px dashed;" id="cboxmain"></iframe></div></span>') ;

note: some non-crosover/ css tweak can be apply too to crossover
like moving gallery. .. friends... statusbar efex .. etc....
just try to experiment see w/c codes are compatible with  crossover...


INSTRUCTIONS #3:
1. Make sure to compile  your CSS and JS as one file. (example below)

var script = document.createElement("script");
script.type = "text/javascript";script.src = "JS URL HERE";
document.getElementsByTagName("head")[0].appendChild(script);

var css = document.createElement("link");
css.type = "text/css";
css.rel = "stylesheet";css.href = " CSS  URL HERE";
css.media = "screen, print";document.getElementsByTagName("head")[0].appendChild(css);

2. Save your final work as myfile.TXT or myfile.SWF this time.
3. Get the complete URL then GENERATE.. use any working linker available




u are all free to use this...but dont repost this tutorial to any forum or site w/o any permission...remember rippers are just around the corner

Last edited by switpotato (2008-03-15 02:52:14)