Friendster Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.
Friendster Forum

All your questions regarding friendster


FULL HTML CODING PATTERN OF CROSSOVER

Friendster Forum :: Your first category :: Your first forum

Go down

FULL HTML CODING PATTERN OF CROSSOVER Empty FULL HTML CODING PATTERN OF CROSSOVER

Post by Admin Wed Jan 16, 2008 6:39 pm

FULL HTML CODING PATTERN OF CROSSOVER


If you want to make a trial and error, i presented here the FULL HTML CODING PATTERN of CrossOverlay.
You can use this pattern to position and resize the new boxes.
This is base on my tutorial on how to create a CrossOver Layout, read:
http://friendstermagic.net/Enhancing-Friendster-Profile-c4/Know-About-CrossOver-Layout-f32/HOW-TO-CREATE-A-CROSSOVER-LAYOUT-t1044.htm

INSTRUCTION:
Copy the html code below and edit it on NotePad or any HTML editor.
Try saving this as crossover.html so that you can preview it on your browser.



Code:
<html>
    <head>
    <style type="text/css">
    /* This is where the style properties for each divs goes
    Just copy the STYLE of the divs FROM YOUR HTML 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}

    /* THIS LAST CSS CODE IS JUST FOR A TEST - REMOVE THIS WHEN YOUR DONE WITH YOUR LAYOUT FOR YOU WILL NOT BE USING IT */
    #content_photos_1_2, #content_friends_2_2, #content_publiccomments_1_7, #content_moreabout_1_5, #content_controlpanel_1_1, #content_testimonials_1_6, #scrapbook_1_8 {display:none}

    </style>

    <script language="javascript">
    /***************************
    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_moreabout_1_5')\">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_controlpanel_1_1')\">Main Profile</a>  ";
    //var box_3 = "<a href=\"javascript:onClick=get_properties_2('content_testimonials_1_6')\">My Testimonials</a>  ";
    //var box_4 = "<a href=\"javascript:onClick=get_properties_2('scrapbook_1_8')\">My Media Box</a>  ";
    var box_5 = "<a href=\"javascript:onClick=get_properties_1('content_publiccomments_1_7')\">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_photos_1_2').innerHTML;
    var main_box_2 = window.document.getElementById('content_friends_2_2').innerHTML;
    var main_box_3 = window.document.getElementById('content_controlpanel_1_1').innerHTML;
    var main_box_4 = window.document.getElementById('shoutbox').innerHTML;
    var main_box_5 = window.document.getElementById('scrapbook_1_8').innerHTML;
    //var main_box_6 = window.document.getElementById('content_publiccomments_1_7').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_box_info_6 = main_box_5;

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

    window.document.getElementById('new_main_navigation').innerHTML = show_nav_1;
    window.document.getElementById('new_navigation').innerHTML = show_nav_2;
    window.document.getElementById('newphotobox').innerHTML = show_box_info_1;
    window.document.getElementById('newfriendbox').innerHTML = show_box_info_2;
    window.document.getElementById('newprofileinfo').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/darkangelko">dark\'angel</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>Inspired by the codes of<br><a href="http://www.friendster.com/kapaul">ka Paul</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>') ;

    //Replace the URL_OF_FILE with the CSS URL.
    document.write('<link href=URL_OF_FILE rel=stylesheet type=text/css>');

    </script>

    </head>
    <body>

    <!-- PLEASE REFER TO MY INSTRUCTION ON PART I //-->
    <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

    <!-- THESE WILL BE YOUR NEW FRIENDSTER BOXES YOU MAY REMOVE THIS DIVS WHEN YOU ARE DONE MODIFYING YOUR CSS NEW BOXEX CODES //-->
    <div style="position: absolute; width: 100%; height: 100%; z-index: 1" id="newcontainer">
    <img border="0" src="URL_OF_YOUR_BACKGROUND_IMAGE" width="1000" height="900">
    </div>

    <div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 643px; top: 22px" id="new_main_navigation">
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 3; left: 470px; top: 197px" id="new_navigation">
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 4; left: 621px; top: 313px" id="newprofileinfo">
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 5; left: 425px; top: 53px" id="newfriendbox">
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 6; left: 297px; top: 249px" id="newtestimonialbox">
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 7; left: 276px; top: 93px" id="newcommentbox">
    </div>
    <div style="position: absolute; width: 100px; height: 100px; z-index: 8; left: 668px; top: 160px" id="newphotobox">
    </div>


    <!-- THESE ARE THE DEFAULT BOX CONTENTS OF FRIENDSTER
    DO NOT REMOVE THIS IF YOU WANT TO PREVIEW YOUR LAYOUT ON YOUR BROWSER
    THE BOXES BELOW WILL SERVE AS AN ARTIFICIAL BOXES OF FRIENDSTER
    //-->

    <div id="content_moreabout_1_5">New More About Me Box New More About Me Box New More About Me Box</div>
    <div id="content_controlpanel_1_1">New Profile Info Box New Profile Info Box New Profile Info Box</div>
    <div id="content_testimonials_1_6">New Testimonial Box New Testimonial Box New Testimonial Box </div>
    <div id="scrapbook_1_8">New Media Box New Media Box New Media Box New Media Box New Media Box New Media Box </div>
    <div id="content_publiccomments_1_7">New Public Comments Box New Public Comments Box</div>
    <div id="content_friends_2_2">New Friend Lists Box New Friend Lists Box New Friend Lists Box New Friend Lists Box</div>
    <div id="content_photos_1_2">New Photo Gallery Box New Photo Gallery Box New Photo Gallery Box New Photo Gallery Box</div>
    <div id="footer_container"></div>


    </body>
    </html>



The above html code will serve as a pattern only for positioning and resizing divs or boxes of friendster.
When you are done modifying your CrossOver layout, the only code we need is the JavaScript of it. Please refer to my tutorials, read:
http://friendstermagic.forumzen.com/Enhancing-Friendster-Profile-c4/Know-About-CrossOver-Layout-f32/HOW-TO-CREATE-A-CROSSOVER-LAYOUT-t1044.htm

Admin
Admin

Number of posts : 10
Registration date : 2008-01-16

https://03whitedevil03.board-directory.net

Back to top Go down

Back to top

- Similar topics

Friendster Forum :: Your first category :: Your first forum

 
Permissions in this forum:
You cannot reply to topics in this forum