[b]Credits : Angell de Ville and Ephemeral[/b] [b]Update : Additional trick on post #46[/b] Preview [url]http://profiles.friendster.com/bangkanal[/url] (FF view) [b]1. UPDATE[/b] - Use the Hide JS Tutorial here to hide the default FS boxes [url]http://theftalk.com/t47245-%28TUTORIAL%29-JS-Hide-Code-For-FS-Default-Boxes.html[/url] [b]2.[/b] Add this script to your primary JS extension : [spoiler]controlPanelButtons.innerHTML+="<li id='photoLink'><a href='javascript:loadphoto()'>View Photo Gallery</a></li>" +"<li id='friendLink'><a href='javascript:loadfriend()'>View Friends</a></li>" +"<li id='moreLink'><a href='javascript:loadmore()'>Read About Me</a></li>" +"<li id='fanLink'><a href='javascript:loadfan()'>View Fans Of</a></li>" +"<li id='groupLink'><a href='javascript:loadgroup()'>View Groups</a></li>" +"<li id='commentLink'><a href='javascript:loadcomment()'>Read Comments</a></li>"[/spoiler] Use this CSS extension script for one column CP : [spoiler]#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited{font-family:Arial,Sans-serif; color:#F8F8FF; font-size:11px; border-width:0px; border-color:#F8F8FF; border-style:solid; background-color:transparent; text-align:center; text-decoration:none} #controlPanelButtons a:hover{font-family:Arial,Sans-serif; color:#F8F8FF; font-size:11px; border-width:0px; border-color:#F8F8FF; border-style:solid; background-color:transparent; text-align:center; text-decoration:underline} #controlpanelbuttons a{width:200px!important; background-image:url([b]URL BG[/b])!important; background-repeat:no-repeat; background-attachment:fixed; background-position:top center; height:16px!important; border-width:1px!important; border-color:black!important; border-style:solid!important} #newButtons { width:200 !important; height:16; overflow:hidden; }[/spoiler] [b]Preview CP Buttons[/b] : [img]http://img516.imageshack.us/img516/3196/cpyi0.jpg[/img] [b]3.[/b] Add this also to your primary JS extension. This is the box repostioning script for all the right boxes. I make all the right boxes load & unload below my CP. Put it inside your JS onload handler [spoiler]document.getElementById("0").parentNode.appendChild(document.getElementById("2")) document.getElementById("0").parentNode.appendChild(document.getElementById("7")) document.getElementById("0").parentNode.appendChild(document.getElementById("8"))[/spoiler] [b]4.[/b] Now the last JS will be the main load & unload JS. Add this script also in your primary JS extension [spoiler]function loadphoto(){ showhide("1") photoLink.innerHTML="<a href='javascript:unloadphoto()'>Hide Photo Gallery</a>" } function loadfriend(){ showhide("2") friendLink.innerHTML="<a href='javascript:unloadfriend()'>Hide Friends</a>" } function loadmore(){ showhide("6") moreLink.innerHTML="<a href='javascript:unloadmore()'>Hide About Me</a>" } function loadfan(){ showhide("7") fanLink.innerHTML="<a href='javascript:unloadfan()'>Hide Fans Of</a>" } function loadgroup(){ showhide("8") groupLink.innerHTML="<a href='javascript:unloadgroup()'>Hide Groups</a>" } function loadcomment(){ showhide("18") commentLink.innerHTML="<a href='javascript:unloadcomment()'>Hide Comments</a>" } function unloadphoto(){ showhide("1") photoLink.innerHTML="<a href='javascript:loadphoto()'>View Photo Gallery</a>" } function unloadfriend(){ showhide("2") friendLink.innerHTML="<a href='javascript:loadfriend()'>View Friends</a>" } function unloadmore(){ showhide("6") moreLink.innerHTML="<a href='javascript:loadmore()'>Read about Me</a>" } function unloadfan(){ showhide("7") fanLink.innerHTML="<a href='javascript:loadfan()'>View Fans Of</a>" } function unloadgroup(){ showhide("8") groupLink.innerHTML="<a href='javascript:loadgroup()'>View Groups</a>" } function unloadcomment(){ showhide("18") commentLink.innerHTML="<a href='javascript:loadcomment()'>Read Comments</a>" }[/spoiler] [b]5.[/b] I hide my Blog, Review and Media Box. If you want to load & unload your Blog, Review and Media Box, just edit the all the JS scripts above. Just remember the divID of the box and create suitable link for each box OK [b]6.[/b] Done and happy tweaking FTalkers [b][u]UPDATE[/u] :[/b] [quote=jaypz1968]hmm nice script how about in other boxes? i mean the addbox function how to do it?[/quote] OK I will take an addBox script for example. I choose the WVM (tracker) Look at the bold part. That is the divID of your addBox (in this case divID of the WVM) [quote]addBox("LEFT",pageOwnerFName+"'s Visitors Log",TRACKER.div.innerHTML,"[b]tracker[/b]",null);[/quote] Add this script to your CSS extension to hide the WVM [quote]#tracker{display:none}[/quote] No need to add anything in the JS repositioning script. The WVM will show in the same place according to the addBox script.. JS CP Buttons will be like tthis : [spoiler]controlPanelButtons.innerHTML+="<li id='photoLink'><a href='javascript:loadphoto()'>View Photo Gallery</a></li>" +"<li id='friendLink'><a href='javascript:loadfriend()'>View Friends</a></li>" +"<li id='moreLink'><a href='javascript:loadmore()'>Read About Me</a></li>" +"<li id='fanLink'><a href='javascript:loadfan()'>View Fans Of</a></li>" +"<li id='groupLink'><a href='javascript:loadgroup()'>View Groups</a></li>" +"<li id='commentLink'><a href='javascript:loadcomment()'>Read Comments</a></li>" [color=green][b]+"<li id='trackerLink'><a href='javascript:loadTracker()'>View Tracker</a></li>"[/b][/color][/spoiler] And the main load & unload JS will be like this : [spoiler]function loadTracker(){ document.getElementById("tracker").style.display="block" trackerLink.innerHTML="<a href='javascript:unloadTracker()'>Hide Tracker</a>" } function unloadTracker(){ document.getElementById("tracker").style.display="none" trackerLink.innerHTML="<a href='javascript:loadTracker()'>View Tracker</a>" }[/spoiler] Just experiment with your other addBoxes

Last edited by KaNaLiTnUk (2008-12-23 11:22:58)