Requirements: Just read and you will learn how you can compile your JS in One File Cbox account, so you can test this tutorial Register here: [url]cbox.ws[/url] You should have the JS linker posted by xavierkym Click here if you don't have it yet: [url]http://theftalk.com/t18967-Customize-Your-Multiply-Linker-Tutorial%29.html] JS LINKER[/url] [quote]Credits: feruzz marfillaster mickyvictoria xavierkym ephemeral duchesv shy19 other multiply tweakers[/quote] :idea: This tutorial will start with the Addbox function [quote]function addBox (type,head,htm,id,sibling) { //by blurrycloud multiply version 2008-3000 //credits to marfillaster friendster version //types "[color=red]top[/color]" | "[color=red]bottoml[/color]" | "[color=red]bottomr[/color]" | "[color=red]siderail[/color]" //head header string //htm innerHTML string //id css_id string /* Available default Siblings Coming Soon */ try { var br=document.createElement("li"); } catch(e) { var br=document.createElement("<br>"); } if(type=="top") { var ul=document.getElementById("mainbox_1"); htm="<div class='itemboxsub'>"+htm+"</div>"; } else if(type=="bottomr") { var ul=document.getElementById("mainbox_4"); } else if(type=="siderail") { var ul=document.getElementById("rail"); } else var ul=document.getElementById("mainbox_3"); br.innerHTML="<br><div id='"+id+"' class='itemboxsub "+id+"'>"+ "<h2>"+head+"</h2>"+ "<div id='content_"+id+"'>"+htm+ "</div>"+ "</div>"; if(sibling==null) ul.appendChild(br); else { sibling=document.getElementById(sibling); ul.insertBefore(br,sibling); } }[/quote] [quote]Note: you can see there are 4 types in Addbox function multiply, [color=red]top[/color] | [color=red]bottoml[/color] | [color=red]bottomr[/color] | [color=red]siderail[/color] while in friendster.. we only got two types, the LEFT and RIGHT [b]1st Part of Tutorial:[/b] :idea: In multiply for me the most popular position for add-ons is the [color=red]siderail[/color] because most of the profile i saw is 1 column profile only...[/quote] So i will going to relay how can we put all our add-ons on the siderail(Under Your Rail) using the Addbox Function First Step: Put the Addbox function above all your JS File <">:idea: Now we're going to need the onload handler for our add-ons or new boxes and setting up all our add-ons below our rail [quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};} function onPageLoad()[/b] [color=green]{[/color] //ANTI POSER CBOX var cboxe="<iframe frameborder='0' width='185' height='260' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe><br/><form name='chat' width='60%' target='blurry' action='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=submit' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'><textarea style='overflow:hidden' class='cboxMsgArea' cols='22' rows='3' name='pst'></textarea><br /><input type='submit' class='cboxButtons' value='Submit' name='asa' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input class='cboxButtons' type='reset' value='Clear' maxlength='23' onClick='reset()' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input type='button' class='cboxButtons' value='Refresh' name='blurry' onClick='window.blurry.location.href=document.getElementById(\"blurry\").src' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"></form>"; addBox("[b]siderail[/b]","Chit-Chat",cboxe,"cboxe"); //CLOCK var clock="<div align='center' id='clock'>"+ "<embed src='http://www.clocklink.com/clocks/5005-green.swf?TimeZone=GMT0800&' width='120' height='50' wmode='transparent' type='application/x-shockwave-flash'></embed>"+"</div>"; addBox("[b]siderail[/b]","Time Check",clock,"clock"); //MOOD FOR THE DAY var mmood="<a href='http://www.punkymoods.net' title='Punkymoods (Unkymoods redux): Showcase your current mood'><center><img src='http://www.punkymoods.net/mood.php?userid=9283' alt='My Mood For The Day' border='0' /></center></a>"; addBox("[b]siderail[/b]","MY MOOD FOR THE DAY",mmood,"mmood"); //YOUTUBE var youtube7="<embed src='http://www.youtube.com/v/JDBtSpiWlxs&rel=1' type='application/x-shockwave-flash' width='90%' height='100'></embed>"; addBox("[b]siderail[/b]","VIDEO",youtube7,"ul_youtube_content"); //MP3 var mp3="<embed src='http://www.loudfusion.com/widgets/music/6' name='Loudfusion.com' quality=\"high\" wmode=\"transparent\" flashvars=\"USERID=331726&FOLDERID=10465\" width=\"210\" height=\"125\" type=\"application/x-shockwave-flash\"></embed>"; addBox("[b]siderail[/b]","MUSIC MADNESS",mp3,"mp3"); //WVMCBOX var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>"; addBox("[b]siderail[/b]"," MY PROFILE VIEWER",wcbox,"wcbox"); [color=green]}[/color] //OTHER CODES GOES HERE /*Page Owner/Viewer Basis*/ var pageOwnerFName; var pageViewerFName; pageOwnerFName = window.location.href.slice(7, window.location.href.indexOf(".")); try { pageViewerFName = getElementsByClassName(null,"span","signoutid")[0].firstChild.innerHTML.replace(/Hi,\s+?/gim, ""); }catch(e) { pageViewerFName = ""; } function getElementsByClassName(oElm,sTag,sClass) { var elm = []; if (!oElm)oElm = document; if (!sTag)sTag = "*"; var els = oElm.getElementsByTagName(sTag) || document.all; for (var j=0,k=els.length;j<k;j++) { if (new RegExp(sClass).test(els[j].className)) { elm.push(els[j]); } } return elm; } /*WVM CBOX FUNCTION*/ if((pageViewerFName != pageOwnerFName) && (pageViewerFName != "")) { var getsubnavc = document.getElementById("subnavc"); getsubnavc.innerHTML = "<center>"+ "<div style='display:none'>"+ "<iframe name='cbox_post' id='cbox_post'>"+ "</iframe>"+ "<form id='cform' target='cbox_post' action='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=submit' method='post'>"+ "<input type='text' maxlength='25' name='nme' value=\""+pageViewerFName+"\">"+ "<input type='text' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'>"+ "<input type='text' maxlength='200' name='pst' value='"+Date().replace(/\(.+\)/,"")+"'>"+ "<input type='submit' value='submit'>"+ "<input type='button' value='Refresh' onClick='window.wvmcboxmain.location.href=document.getElementById(\"wvmcboxmain\").src'>"+ "</form>"+ "</div>"; document.getElementById("cform").submit(); } //ANIMATED TITLE HEADER function tb10_makeArray(n){ this.length = n; return this.length; } tb10_messages = new tb10_makeArray(1); tb10_messages[0] = "[color=red]YOUR HEADER TITLE HERE[/color]"; tb10_rptType = 'infinite'; tb10_rptNbr = 5; tb10_speed = 100; tb10_delay = 2000; var tb10_wiper var tb10_space=" " var tb10_currMsg=0; var tb10_counter=1; var tb10_index=0 tb10_main() function tb10_main() { document.title=tb10_messages[tb10_currMsg].substring(0,tb10_index) tb10_index++ if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){setTimeout('tb10_reset_clear()',tb10_delay);} else{setTimeout('tb10_main()',tb10_speed)} } function tb10_reset_clear() { tb10_index=0 tb10_wiper="" for(var a=0;a<tb10_messages[tb10_currMsg].length;a++){tb10_wiper+=tb10_space} tb10_clearem() } function tb10_clearem() { document.title=tb10_wiper.substring(0,tb10_index) + "-0" + tb10_messages[tb10_currMsg].substring(tb10_index+2,tb10_messages[tb10_currMsg].length) tb10_index++ if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){ if (tb10_currMsg == tb10_messages.length-1){ if ((tb10_rptType == 'finite') && (tb10_counter==tb10_rptNbr)){ document.title=""; return; } tb10_counter++; tb10_currMsg = 0; } else tb10_currMsg++; tb10_index=0 tb10_main() } else{setTimeout('tb10_clearem()',250)} } /*Welcome Alert*/ /*GoodBye Alert*/[/quote] [quote]Note: Inside the onload handler and on the function code. you can see red colored text ([color=red]www?, #####, ####[/color]) that is the part you can edit your Cbox source, id and tag You can also edit the animated title header.. just change the red text for your own desire.. :idea: the bold part [b]siderail[/b] is the type of position that we use so that all our add-ons will be under our rail[/quote] [quote]Reminder: :idea: You should never put other function inside your onload handler... Functions must be place below your JS CODES :idea: You should not set your Add-ons outside the onload handler... REFER BELOW[/quote] [quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};} function onPageLoad()[/b] [color=green]{[/color] //BOXES HERE //BOXES HERE //BOXES HERE AND SO ON.... [color=green]}[/color] //OTHER FUNCTION HERE[/color][/quote] Now we are done with setting up all our boxes under our rail.... ............................................................................................................................ [b]2nd Part of Tutorial[/b]: Add-ons will be set under your rail([color=red]Sidebar[/color]) and others will be set on the left side which is ([color=red]Mainbar[/color]) Now all we going to have to do is... relay on the tutorial above and just change the type of position of the other add-ons... Step 1: Paste Addbox function above all your codes.. if you already have it skip this step. Step 2: Placing your new boxes inside your Onload handler :idea: We will change some types of position [color]siderail[/color] into [color]top[/color] so your some of your add-ons will be on your mainbar.... [quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};} function onPageLoad()[/b] [color=green]{[/color] //SLIDE from slide.com var slide="<embed src=\"http://widget-e7.slide.com/widgets/slideticker.swf\" type=\"application/x-shockwave-flash\" quality=\"high\" scale=\"noscale\" salign=\"l\" wmode=\"transparent\" flashvars=\"cy=fr&il=1&channel=432323564245203918&site=widget-e7.slide.com\" style=\"width:90%;height:125px\" name=\"flashticker\" align=\"middle\"/><div style=\"width:100%;text-align:center;\">"; addBox("[color=red][b]top[/b][/color]","MY PICTURE SLIDE",slide,"slide"); //ANTI POSER CBOX var cboxe="<iframe frameborder='0' width='185' height='260' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe><br/><form name='chat' width='60%' target='blurry' action='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=submit' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'><textarea style='overflow:hidden' class='cboxMsgArea' cols='22' rows='3' name='pst'></textarea><br /><input type='submit' class='cboxButtons' value='Submit' name='asa' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input class='cboxButtons' type='reset' value='Clear' maxlength='23' onClick='reset()' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input type='button' class='cboxButtons' value='Refresh' name='blurry' onClick='window.blurry.location.href=document.getElementById(\"blurry\").src' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"></form>"; addBox("[color=red][b]top[/b][/color]","Chit-Chat",cboxe,"cboxe"); //CLOCK var clock="<div align='center' id='clock'>"+ "<embed src='http://www.clocklink.com/clocks/5005-green.swf?TimeZone=GMT0800&' width='120' height='50' wmode='transparent' type='application/x-shockwave-flash'></embed>"+"</div>"; addBox("[color=red]siderail[/color]","Time Check",clock,"clock"); //MOOD FOR THE DAY var mmood="<a href='http://www.punkymoods.net' title='Punkymoods (Unkymoods redux): Showcase your current mood'><center><img src='http://www.punkymoods.net/mood.php?userid=9283' alt='My Mood For The Day' border='0' /></center></a>"; addBox("[color=red]siderail[/color]","MY MOOD FOR THE DAY",mmood,"mmood"); //YOUTUBE var youtube7="<embed src='http://www.youtube.com/v/JDBtSpiWlxs&rel=1' type='application/x-shockwave-flash' width='90%' height='100'></embed>"; addBox("[color=red][b]top[/b][/color]","VIDEO",youtube7,"ul_youtube_content"); //MP3 var mp3="<embed src='http://www.loudfusion.com/widgets/music/6' name='Loudfusion.com' quality=\"high\" wmode=\"transparent\" flashvars=\"USERID=331726&FOLDERID=10465\" width=\"210\" height=\"125\" type=\"application/x-shockwave-flash\"></embed>"; addBox("[color=red][b]top[/b][/color]","MUSIC MADNESS",mp3,"mp3"); //WVMCBOX var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>"; addBox("[color=red]siderail[/color]"," MY PROFILE VIEWER",wcbox,"wcbox"); //REPLACE OWNER PIC by xavey var image; var sibling; image = document.createElement("DIV"); image.setAttribute("class","newImg"); image.innerHTML = "[color=red]CONTENT HERE[/color]"; sibling = getElementsByClassName(document.getElementById("rail"),"div","userlogo")[0]; sibling.parentNode.replaceChild(image,sibling); [color=green]}[/color] //OTHER CODES GOES HERE /*Page Owner/Viewer Basis*/ var pageOwnerFName; var pageViewerFName; pageOwnerFName = window.location.href.slice(7, window.location.href.indexOf(".")); try { pageViewerFName = getElementsByClassName(null,"span","signoutid")[0].firstChild.innerHTML.replace(/Hi,\s+?/gim, ""); }catch(e) { pageViewerFName = ""; } function getElementsByClassName(oElm,sTag,sClass) { var elm = []; if (!oElm)oElm = document; if (!sTag)sTag = "*"; var els = oElm.getElementsByTagName(sTag) || document.all; for (var j=0,k=els.length;j<k;j++) { if (new RegExp(sClass).test(els[j].className)) { elm.push(els[j]); } } return elm; } /*WVM CBOX FUNCTION*/ if((pageViewerFName != pageOwnerFName) && (pageViewerFName != "")) { var getsubnavc = document.getElementById("subnavc"); getsubnavc.innerHTML = "<center>"+ "<div style='display:none'>"+ "<iframe name='cbox_post' id='cbox_post'>"+ "</iframe>"+ "<form id='cform' target='cbox_post' action='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=submit' method='post'>"+ "<input type='text' maxlength='25' name='nme' value=\""+pageViewerFName+"\">"+ "<input type='text' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'>"+ "<input type='text' maxlength='200' name='pst' value='"+Date().replace(/\(.+\)/,"")+"'>"+ "<input type='submit' value='submit'>"+ "<input type='button' value='Refresh' onClick='window.wvmcboxmain.location.href=document.getElementById(\"wvmcboxmain\").src'>"+ "</form>"+ "</div>"; document.getElementById("cform").submit(); } //ANIMATED TITLE HEADER function tb10_makeArray(n){ this.length = n; return this.length; } tb10_messages = new tb10_makeArray(1); tb10_messages[0] = "[color=red]YOUR HEADER TITLE HERE[/color]"; tb10_rptType = 'infinite'; tb10_rptNbr = 5; tb10_speed = 100; tb10_delay = 2000; var tb10_wiper var tb10_space=" " var tb10_currMsg=0; var tb10_counter=1; var tb10_index=0 tb10_main() function tb10_main() { document.title=tb10_messages[tb10_currMsg].substring(0,tb10_index) tb10_index++ if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){setTimeout('tb10_reset_clear()',tb10_delay);} else{setTimeout('tb10_main()',tb10_speed)} } function tb10_reset_clear() { tb10_index=0 tb10_wiper="" for(var a=0;a<tb10_messages[tb10_currMsg].length;a++){tb10_wiper+=tb10_space} tb10_clearem() } function tb10_clearem() { document.title=tb10_wiper.substring(0,tb10_index) + "-0" + tb10_messages[tb10_currMsg].substring(tb10_index+2,tb10_messages[tb10_currMsg].length) tb10_index++ if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){ if (tb10_currMsg == tb10_messages.length-1){ if ((tb10_rptType == 'finite') && (tb10_counter==tb10_rptNbr)){ document.title=""; return; } tb10_counter++; tb10_currMsg = 0; } else tb10_currMsg++; tb10_index=0 tb10_main() } else{setTimeout('tb10_clearem()',250)} } /*Welcome Alert*/ /*GoodBye Alert*/[/quote] [quote]:idea: Note: That's it all you have to do is change [b]siderail[/b] into [b]top[/b] :idea: Advice: It would be much nicer if you will indicate your small boxes like clock, cbox, visitor counter under your RAIL[/quote] [b]PS: I will add new tutorial on how to compile your js code using the 4 types soon[/b] [hr] Added: Replace Owner Pic by xavey

Last edited by blurrycloud (2008-05-17 00:46:10)