[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)