Friendster Overlay

do  you want to personalize your friendster layout?

Some of my friends asked me how did I edit the layout of my friendster profile. I even got messages from strangers asking how to put overlays. Hence, I decided to put it here in my blog (it’s also one way for me to boost the traffic in my blog lolz).

Putting a friendster overlay is relatively easy. Read on.

To personalize your friendster profile using pre-made overlay, follow these steps:

Step 1: Hi-jack the Template for your Background Image

Download this image (right click the image then click Save Picture As…) –> background.jpg <– and use it as template. It is easier to use this image as template ‘coz of the pre-made layout of the menu and main display area. Make sure not to alter the actual size of the image(800×610).

Step 2: Editing the Background Image

Edit the downloaded image using adobe photoshop or any image editing program you’re familiar with. You can add layers and play with opacity to make sure that your design will not block the space provided for your friendster menu and main display area. Note: we will only change the design and not the layout. If you wish to change the layout, then you have to manually change the javascript code later on.

Apply the design that you want. Don’t forget to put FRIENDSTER.COM in your design ‘coz after all, this is still friendster and not your own website. If you dont know how to design, then haaayz fine, hit back and I’ll try to find time to help you. The fastest way to reach me is thru YM: lhon_519, but you have to do the succeeding steps by yourself okay?!

Step 3: Hosting your Background Image

When you’re satisfied with your background image, it’s time to save and upload it to any hosting site of your choice. Your hosting site must support hot sync (it will display 100% of your image, not resized, and will not prompt you to open or save the image instead of displaying it in your browser). One good example of a hosting site is geocities.com since all of us have yahoo ID. Just sign up using your yahoo id, then upload your files. You’ll need to upload more files later. After uploading, copy the URL of your image.

Step 4: Creating CSS file

Copy the CSS code below and paste it in notepad. Make sure to chage PUT YOUR IMAGE URL HERE with the URL of your image (example: http://www.geocities.com/myaccount/background.jpg). Do not remove the quotes! You can play with the colors of your CSS code for it to complement your design. I already provided the link so it’ll be easy for you to get the color code that’ll match your design. After editing, save your file as myfile.css

/* START OF CSS CODE */

html, body {
   background-color: #fdfdfc;
   margin-top: 20px;
   margin-bottom:20px;
   color: #000033;       /* FS Text field color */
   scrollbar-face-color: #E6E6FA;
   scrollbar-3dlight-color: #E6E6FA;
   scrollbar-darkshadow-color: #ffffff;
   scrollbar-shadow-color: #E6E6FA;
   scrollbar-highlight-color: #ffffff;
   scrollbar-track-color: #E6E6FA;
   scrollbar-arrow-color: #ffffff;
}
table.mainbg {
   background-color: #000000;
   background-image: url(’  PUT YOUR IMAGE URL HERE ‘);
   background-position: center top;
   background-repeat: no-repeat;
}
div#mymain_navi {
   text-align: center;
   font-size: 11px;
   font-family: Verdana;
}
div#mymain_frame {
   text-align: center;
   margin-left: 6px;
}
a:link, a:active, a:visited {
   text-decoration: none;
   color: #000000;
}
a:hover {
   text-decoration: none;
   color : #ffffff;
}

/* END OF CSS CODE */

Step 5: Hosting your CSS file

Upload your myfile.css to your hosting site. Copy the URL of your myfile.css (example: http://www.geocities.com/myaccount/myfile.css).

Step 6: Creating javascript file

Copy the javascript code below and paste it in notepad. Make sure to chage PUT YOUR MYFILE.CSS URL HERE with the URL of your image (example: http://www.geocities.com/myaccount/myfile.css). If you changed the layout of your background, then you have to change width and height of the code below. Do not change it if you dont know how to code javascript. This code includes giving credit to ehem for making it easy for you. I hope it’s not a big deal on your part.

/* START OF JAVASCRIPT CODE */

function loadLayout(){
var alterwithThis =
‘<center>\n<table cellpadding=”0″ cellspacing=”0″ style=”‘
+ ‘width: 800px; height: 610px” class=”mainbg”>\n<tr>\n<td>’
+ ‘&nbsp;</td>\n<td>&nbsp;</td>\n<td style=”height: 128px”>’
+ ‘&nbsp;</td>\n</tr>\n<tr>\n<td>&nbsp;</td>\n<td valign=”t’
+ ‘op”>\n<div id=”mymain_navi”></div></td>\n<td style=”heig’
+ ‘ht: 23px”>&nbsp;</td>\n</tr>\n<tr>\n<td></td>\n<td></td>’
+ ‘\n<td style=”height: 13px”></td>\n</tr>\n<tr>\n<td style’
+ ‘=”height: 310px”></td>\n<td valign=”top” style=”height: ‘
+ ‘310px”>\n<div id=”mymain_frame” style=”width:524px; heig’
+ ‘ht:310px; overflow:auto;”></div></td>\n<td style=”height’
+ ‘: 310px”></td>\n</tr>\n<tr>\n<td style=”width: 227px; he’
+ ‘ight: 101px;”></td>\n<td style=”width: 528px; height: 10′
+ ‘1px;”></td>\n<td style=”height: 101px; width: 43px”></td’
+ ‘>\n</tr>\n</table>\n</center>’;
window.document.getElementById(’footer_container’).innerHTML = alterwithThis;

var Rcontent =
“<a href=\”http://www.friendster.com/\”>Home</a> | “
+”<a href=\”javascript:onClick=revealContent(’content_0′)\”>Profile</a> | “
+”<a href=\”javascript:onClick=revealContent(’content_6′)\”>About Me</a> | “
+”<a href=\”javascript:onClick=revealContent(’content_1′)\”>Gallery</a> | “
+”<a href=\”javascript:onClick=revealContent(’content_2′)\”>My Friends</a> | “
+”<a href=\”javascript:onClick=revealContent(’content_18′)\”>Testimonials</a> | “
+”<a href=\”javascript:onClick=revealContent(’content_10′)\”>Media Box</a> | “
+”<a href=\”javascript:onClick=revealContent(’credits’)\”>Credits</a>”;
window.document.getElementById(’mymain_navi’).innerHTML = Rcontent;

var showThisone1 = document.getElementById(’content_0′).innerHTML;
window.document.getElementById(’mymain_frame’).innerHTML = showThisone1;
}
function revealContent(id) {
document.getElementById(’mymain_frame’).innerHTML = document.getElementById(id).innerHTML
}
document.write(’<body onload=”loadLayout()”>’);
document.write(’<style>table#flo_wrapper,#credits {display:none} #footer_container {display:table !important}</style>’);
document.write(’<span id=”credits”><div id=”creditsHolder”><br/><br/><br/>Special thanks to <A HREF=”http://www.lhondiloy.i.ph”><u><i>Lhon Diloy</u></i></A><br/><br/>Also, thanks to Paul M. for the code generator.</div></span>’);
document.write(’<link href=”  PUT YOUR MYFILE.CSS URL HERE ” rel=”stylesheet” type=”text/css”>’);

/* END OF JAVASCRIPT CODE */

Step 7: Hosting your JS file 

Upload your javascript code to your hosting site. Copy the URL of your myscript.js (example: http://www.geocities.com/myaccount/myscript.js).

Step 8: Applying the Layout in your Friendster profile

Copy the code below and paste it in Describe Who You Want to Meet section of your friendster profile. Make sure to chage PUT YOUR MYSCRIPT.JS URL HERE with the URL of your myscript.js. Make sure to remove any code/previous layout code in the Customize CSS section, otherwise, the code below will be erased when you log out.

<script src=’ PUT YOUR MYSCRIPT.JS URL HERE ‘></script>

Whew, actually making this blog entry is more difficult than editing the friendster layout. I hope you learned something and goodluck!