Home
Search
Latest images
Register
Log inKnow About CrossOver Layout
Page 1 of 1
Know About CrossOver Layout
by Admin Wed Jan 16, 2008 6:32 pm
[color=black]HOW TO CREATE A CROSSOVER LAYOUT
How to Make a CrossOver Layout
I know you may find this hard to do. But with intimacy and perseverance, you may able to create your own CrossOver layout with this.
The objective of this is to make us rely on our ownselves.
There is no need of generating or not even to re-generate this if you want to update your friendster account.
The main goal of this tutorial is to let you know how you may modify your friendster account.
PART I: Creating A Layout.
STEP 1. Create an HTML layout or a web page. Set it like this:
STEP 2. At the tag of your html, create atleast seven (7) layers or
How to Make a CrossOver Layout
I know you may find this hard to do. But with intimacy and perseverance, you may able to create your own CrossOver layout with this.
The objective of this is to make us rely on our ownselves.
There is no need of generating or not even to re-generate this if you want to update your friendster account.
The main goal of this tutorial is to let you know how you may modify your friendster account.
PART I: Creating A Layout.
STEP 1. Create an HTML layout or a web page. Set it like this:
- Code:
<html>
<head>
</head>
<body>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div style="position: absolute; width: 100%; height: 100%; z-index: 1" id="newcontainer">
<img border="0" src="[b]URL_OF_YOUR_BACKGROUND_IMAGE[/b]" width="1000" height="900">
</div>
</body>
</html>
STEP 2. At the tag of your html, create atleast seven (7) layers or
tags then POSITION and RESIZE each divs to your taste or base on your layout background image.
STEP 3. When you're done, place an ID for each divs that you'd created. As a starter, i suggest you use the following IDs for each divs:
new_main_navigation (this will be your new main navigation -- More About Me, Main Profile, My Testimonial, My Media Box, etc...)
new_navigation (this will be your new default navigattion -- Home, Profile, Friends, Explore, Search, etc...)
newprofileinfo (this will be your new main profile box and new more about me box)
newfriendbox (this will be your new friend box)
newcommentbox (this will be your new public comment box. this will contain also of your shoutbox and credits)
newtestimonialbox (this will be your new testimonial box and new media box)
newphotobox (this will be your new photo gallery box)
Example:
/!\NOTE: The style properties of each width and height, top and left is base on your layout design... We will use this STYLE later on PART III/!\
STEP 4. Set aside this and we will use it later.
PART II: Creating An External JavaScript File.
The JavaScript below is my NEWLY default codes for friendster.
It creates a NEW SET OF BOXES from which i defined at PART I.
The codes below lets you use your own created boxes replacing the old friendster boxes.
If you will modify the ID of the boxes, it will affect your whole codes. Please be carefull!
You may wish to alter anything on the code as long as you know what you are doing.
/!\For a starter, i suggest you NOT to modify or alter anything on it./!\
STEP 1: Copy the JS code below on a NotePad:
document.write('');
STEP 2: Save this file as script.js
STEP 3: Upload it to any web hosting site (e.g., www.freewebtown.com).
STEP 4: Get the full URL of your js file (e.g., http://www.freewebtown.com/username/script.js).
STEP 5: Replace the URL_OF_JS with the js URL
STEP 6. Set aside this and we will use it later.
STEP 3. When you're done, place an ID for each divs that you'd created. As a starter, i suggest you use the following IDs for each divs:
new_main_navigation (this will be your new main navigation -- More About Me, Main Profile, My Testimonial, My Media Box, etc...)
new_navigation (this will be your new default navigattion -- Home, Profile, Friends, Explore, Search, etc...)
newprofileinfo (this will be your new main profile box and new more about me box)
newfriendbox (this will be your new friend box)
newcommentbox (this will be your new public comment box. this will contain also of your shoutbox and credits)
newtestimonialbox (this will be your new testimonial box and new media box)
newphotobox (this will be your new photo gallery box)
Example:
- Code:
<div id="new_main_navigation" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
<div id="new_navigation" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
<div id="newprofileinfo" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
<div id="newfriendbox" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
<div id="newcommentbox" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
<div id="newtestimonialbox" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
<div id="newphotobox" style="position: absolute; width: ???px; height: ???px; left: ???px; top: ???px;"></div>
/!\NOTE: The style properties of each width and height, top and left is base on your layout design... We will use this STYLE later on PART III/!\
STEP 4. Set aside this and we will use it later.
PART II: Creating An External JavaScript File.
The JavaScript below is my NEWLY default codes for friendster.
It creates a NEW SET OF BOXES from which i defined at PART I.
The codes below lets you use your own created boxes replacing the old friendster boxes.
If you will modify the ID of the boxes, it will affect your whole codes. Please be carefull!
You may wish to alter anything on the code as long as you know what you are doing.
/!\For a starter, i suggest you NOT to modify or alter anything on it./!\
STEP 1: Copy the JS code below on a NotePad:
- Code:
/***************************
Do not remove this headings!
Coded by - ka Paul
pauldemonteverde@yahoo.com
FriendsterMagic.net
***************************/
//this will be your new_main_navigation
var box_1 = "<a href=\"javascript:onClick=get_properties_3('content_6')\">More About Me</a> "; //you may alter 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> ";
//var box_3 = "<a href=\"javascript:onClick=get_properties_2('content_18')\">My Testimonials</a> ";
//var box_4 = "<a href=\"javascript:onClick=get_properties_2('content_10')\">My Media Box</a> ";
var box_5 = "<a href=\"javascript:onClick=get_properties_1('content_18')\">Public Comments</a> ";
var box_6 = "<a href=\"javascript:onClick=get_properties_1('shoutbox')\">Shoutbox</a> ";
var box_7 = "<a href=\"javascript:onClick=get_properties_1('credits')\">Credits</a> ";
var new_main_nav = box_1+box_2+box_5+box_6+box_7;
//this will be your new_navigation
var nav_1 = "<a href=\"http://www.friendster.com/\">Home</a><br>"; //you may alter <br> tag with a if you want a space
var nav_2 = "<a href=\"http://www.friendster.com/user.php\">Profile</a><br>";
var nav_3 = "<a href=\"http://www.friendster.com/friends.php\">Friends</a><br>";
var nav_4 = "<a href=\"http://www.friendster.com/explore.php\">Explore</a><br>";
var nav_5 = "<a href=\"http://www.friendster.com/gallery.php\">Search</a><br>";
var nav_6 = "<a href=\"http://www.friendster.com/video.php\">Video</a><br>";
var nav_7 = "<a href=\"http://www.friendster.com/editcollege.php?A=s\">Schools</a><br>";
var nav_8 = "<a href=\"http://www.friendster.com/reviews/\">Reviews</a><br>";
var nav_9 = "<a href=\"http://www.friendster.com/blogs.php\">Blogs</a><br>";
var nav_10 = "<a href=\"http://www.friendster.com/group/mygroup.php\">Groups</a><br>";
var nav_11 = "<a href=\"http://www.friendster.com/love.php\">Love</a><br>";
var nav_12 = "<a href=\"http://friendstermagic.forumzen.com\">Forum</a><br>";
var nav_13 = "<a href=\"http://www.friendster.com/invite.php\">Invite</a>";
var new_navigation = nav_1+nav_2+nav_3+nav_4+nav_5+nav_6+nav_7+nav_8+nav_9+nav_10+nav_11+nav_12+nav_13;
//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=\"URL_OF_YOUR_BACKGROUND_IMAGE\" width=\"1000\" height=\"700\">"; //replace image src if you want to use your own background
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('newfriendbox').innerHTML = show_box_info_2;
window.document.getElementById('newphotobox').innerHTML = show_box_info_3;
window.document.getElementById('newcommentbox').innerHTML = show_box_info_4;
window.document.getElementById('newtestimonialbox').innerHTML = show_box_info_5;
}
//this box will show the public comments, shoutbox and credits
function get_properties_1(id) {
document.getElementById('newcommentbox').innerHTML=document.getElementById(id).innerHTML
}
/*this box will show the testimonial and media box
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
document.write('<span align="center" id="credits"><br><br><font face="Arial Narrow" color="#ffffff" size="1"><b>CREDITS</b><br><br>Creation by:<br><a target="_blank" href="http://www.friendster.com/kapaul">ka Paul</a><br><br><br><a target="_top" href="http://www.friendstermagic.net">FriendsterMagic.net</a><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>ACKNOWLEDGEMENT<br>Thanks for the support of our members and of my co-forum moderators, specially to Mr. Skull, the FriendsterMagic Admin.<br><br>CROSSOVER<br>All Rights Reserved.<br>2007<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="220" height="75" src="http://www3.cbox.ws/box/?boxid=2191076&boxtag=3117&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: #000000 3px dashed;border-bottom:0px;" id="cboxform"></iframe><br><iframe frameborder="0" width="220" height="238" src="http://www3.cbox.ws/box/?boxid=2191076&boxtag=3117&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: #000000 3px dashed;" id="cboxmain"></iframe></div></span>') ;[/color]
document.write('');
STEP 2: Save this file as script.js
STEP 3: Upload it to any web hosting site (e.g., www.freewebtown.com).
STEP 4: Get the full URL of your js file (e.g., http://www.freewebtown.com/username/script.js).
STEP 5: Replace the URL_OF_JS with the js URL
- Code:
<script type="text/javascript" src="URL_OF_JS"></script>
STEP 6. Set aside this and we will use it later.
Admin- Admin
- Number of posts : 10
Registration date : 2008-01-16 -
Know About CrossOver Layout
by Admin Wed Jan 16, 2008 6:36 pm
continuation...
PART III: Modifying CSS
The codes below will be our NEW dafault CSS code for friendster.
Any modification must be done in here.
/!\Please refer on your html layout at PART I to alter the CSS codes below./!\
STEP 1: Copy the CSS code below on a NotePad:
2. Save this file as myfile.css.
3. Upload it to any web hosting site (e.g., www.freewebtown.com).
4. Get the full URL of your css file (e.g., http://www.freewebtown.com/username/myfile.css).
5. Replace the URL_OF_FILE with the css URL, please refer to JavaScript code at PART II.
WHERE TO PASTE YOUR CODE [NEW INSTRUCTION] UPDATED 06.29.07
1. Please read this first: Combining CSS and JavaScript in one Single file
2. The next thing to do is to get your JS Direct URL (read: http://friendstermagic.net/Enhancing-Friendster-Profile-c4/Hosting-Pictures-and-Hosting-Files-f12/HOSTING-AT-FREEWEBTOWN-TUTORIAL-t679.htm)
3. Generate your JS Direct URL at the JavaScript Direct URL Generator v3.1
4. Paste your generated codes to your Friendster Add Media
For FULL HTML PATTERN of this tutorial, read:
http://friendstermagic.net/Enhancing-Friendster-Profile-c4/Know-About-CrossOver-Layout-f32/FULL-HTML-CODING-PATTERN-OF-CROSSOVERLAY-t1048.htm
END OF TUTORIAL
JUST AN INSIGHT:
If you are really int'rested of creating a CrossOver layout, you have to have a lot of patience.
Having a basic knowledge about html, javascript or css is a big help.
If you will analyze carefully my instructions, the only thing that we MODIFIED is the HTML and CSS.
Let the JavaScript code remain as is especially for beginners or starters.
When you major it, you can do a lot of tricks from it.
Look at to what dark'angel's creation... he is always putting a lot of boxes to his premades... hehehehehehe
As to me, as i created a CrossOver, i do not need to modify the JavaScript codes above. The only thing i do is positioning and resizing the boxes, altering the CSS codes, and, and, and of course the layout designs! Ü
PART III: Modifying CSS
The codes below will be our NEW dafault CSS code for friendster.
Any modification must be done in here.
/!\Please refer on your html layout at PART I to alter the CSS codes below./!\
STEP 1: Copy the CSS code below on a NotePad:
- Code:
/* This is where the style properties for each divs goes
Just copy the STYLE of the divs FROM YOUR HTML (please refer to PART I) and place it inside {} according to their ID
Make sure you place the exact width and height, top and left pixels for every divs
Some divs below contain the properties of OVERFLOW:AUTO as much as possible, do not change it */
/* NEW BOXES CSS CODE */
#new_main_navigation {position: absolute; width: 714px; height: 22px; left: 270px; top: 53px;}
#new_navigation {position: absolute; width: 126px; height: 207px; left: 270px; top: 85px; padding-top:5px;}
#newprofileinfo {position: absolute; width: 340px; height: 206px; left: 427px; top: 90px; overflow:auto;}
#newfriendbox {position: absolute; width: 180px; height: 206px; left: 796px; top: 90px; overflow:auto;}
#newcommentbox {position: absolute; width: 230px; height: 334px; left: 270px; top: 320px; overflow:auto;}
#newtestimonialbox {position: absolute; width: 460px; height: 334px; left: 520px; top: 320px; overflow:auto;}
#newphotobox {position: absolute; width: 180px; height: 152px; left: 152px; top: 237px; overflow:auto;}
/* 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:#ffff00;text-decoration:none;font-family:Trebuchet MS;font-weight:bold;}
/* New Main Nav Links */
.nav1 a {font-size:14px;}
/* New Nav Links */
.nav2 a {font-size:12px;}
#newcommentbox a {font-size:12px;}
#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;}
.imgblock200 {background:transparent;border:none;}
.so {display:none;}
.more {display:none;}
.evenrow {background-color:transparent;}
#controlpanelbuttons a {border: none;background-color:transparent;}
#controlpanelbuttons a:link {border: none;background-color: transparent;}
#controlpanelbuttons a:visited {border: none;background-color: transparent;}
#controlpanelbuttons a:hover {border:none; background-color: transparent;}
/* 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;}
/* FriendsterMagic - resize photo */
.photos.flogridp {margin-left:10px;margin-right:0px;width:200px;}
.photos.flogridp .ir img {width:200px !important;height:150px !imporant;border:none;}
.photos.flogridp .ir {width:200px !important;height:150px !imporant;margin-top:5px;background-color:transparent;}
.flogridp .flogriditem {background:none;}
#content_controlpanel_1_1 {width:300px !important;}
#myframe {height:3000 !important;}
#cboxdiv {margin-top:5px;}
#credits, #shoutbox {display:none}
2. Save this file as myfile.css.
3. Upload it to any web hosting site (e.g., www.freewebtown.com).
4. Get the full URL of your css file (e.g., http://www.freewebtown.com/username/myfile.css).
5. Replace the URL_OF_FILE with the css URL, please refer to JavaScript code at PART II.
- Code:
<link href=URL_OF_FILE rel=stylesheet type=text/css>
WHERE TO PASTE YOUR CODE [NEW INSTRUCTION] UPDATED 06.29.07
1. Please read this first: Combining CSS and JavaScript in one Single file
2. The next thing to do is to get your JS Direct URL (read: http://friendstermagic.net/Enhancing-Friendster-Profile-c4/Hosting-Pictures-and-Hosting-Files-f12/HOSTING-AT-FREEWEBTOWN-TUTORIAL-t679.htm)
3. Generate your JS Direct URL at the JavaScript Direct URL Generator v3.1
4. Paste your generated codes to your Friendster Add Media
For FULL HTML PATTERN of this tutorial, read:
http://friendstermagic.net/Enhancing-Friendster-Profile-c4/Know-About-CrossOver-Layout-f32/FULL-HTML-CODING-PATTERN-OF-CROSSOVERLAY-t1048.htm
END OF TUTORIAL
JUST AN INSIGHT:
If you are really int'rested of creating a CrossOver layout, you have to have a lot of patience.
Having a basic knowledge about html, javascript or css is a big help.
If you will analyze carefully my instructions, the only thing that we MODIFIED is the HTML and CSS.
Let the JavaScript code remain as is especially for beginners or starters.
When you major it, you can do a lot of tricks from it.
Look at to what dark'angel's creation... he is always putting a lot of boxes to his premades... hehehehehehe
As to me, as i created a CrossOver, i do not need to modify the JavaScript codes above. The only thing i do is positioning and resizing the boxes, altering the CSS codes, and, and, and of course the layout designs! Ü
Admin- Admin
- Number of posts : 10
Registration date : 2008-01-16 -
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum