Skin Graft v1.0 [CB]

[ⓦ৹₪deⓡ]

This code will allow each user to create a custom skin they can share. To edit their custom skin, they need to the modify profile page. There is a much needed new color picker which will make picking colors easy. To apply their custom skin, they can click on the link on their profile page. To reload the board default skin, they can click on the link on the profile page. To borrow another member's skin, just click the icon () in that member's mini-profile. The custom skin information is stored in the signature field so it is advisable to tell your members to enable signatures. The current custom skin is stored in the user's cookie. So if they delete their cookie or use a different computer, they will have to re-apply their custom skin. Do NOT PM me for support or requests, that's what the coding boards are for. Edit where indicated. Enjoy.
~Wonder<script>
//Skin Graft v1.0 [CB]
//Copyright 12-17-2005 ~Wonder
//May be reposted anywhere as long as this header remains in tact

//Place in Global Footer
//This code will allow each user to create their own custom skin which they can then share with other users.

//Enter the URL to the image you want for the skin icon
skinIconUrl="http://img203.imageshack.us/img203/49/skinicon25ho.gif";

//Do not change this image unless you are replacing it with the exact same image
hexWheelUrl="http://img229.imageshack.us/img229/7030/colorchart3sn.png";

fonts=new Array("Verdana,Arial","Comic Sans MS","Courier New","Georgia","Impact","Times New Roman","Trebuchet MS");
noskin=1;
info="";
if(document.cookie.match(/curskin\=/))
{
info=unescape(document.cookie.split('curskin=')[1].split(';')[0]).split(",");
if(info.length==19)
{
genCSS(info);
}
}
else
noskin=0;

if(location.href.match(/\=viewprofile/) && noskin==1)
{
l=document.createElement("a");
l.innerHTML="Load Default Skin";
l.href="javascript:clearSkin()";
temp=document.getElementsByTagName("hr")[0].parentNode.firstChild;
temp.innerHTML+=" - ";
temp.appendChild(l);
}

if(location.href.match(/action=(display|goto|viewprofile|pmview|recent)/))
{
td=document.getElementsByTagName("td");
for(i=0;i<td.length;i++)
{
if(td[i].width=="20%" && td[i].className.match(/windowbg/) && td[i+1].innerHTML.match(/\[s\=((.|\n|\r)*?)\]/))
{
bid=RegExp.$1;
bp=new RegExp("\\[s\\="+bid+"\\]","i");
bid=bid.replace(/\n|\r|\s/ig,"");
if(bid.split(",").length==19)
{
td[i].getElementsByTagName("center")[0].innerHTML+='<a href=javascript:loadSkin("'+bid+'")><img src="'+skinIconUrl+'" border=0 alt="[borrow my skin]"></a>';
td[i+1].innerHTML=td[i+1].innerHTML.replace(bp,"");
}
}
}
}

if((location.href.match(/\=viewprofile$/) || ((location.href.match(/\=viewprofile/) && location.href.match(pb_username)))) && typeof(bid)!="undefined")
{
l=document.createElement("a");
l.innerHTML="Load Custom Skin";
l.href="javascript:loadSkin('"+bid+"')";
temp=document.getElementsByTagName("hr")[0].parentNode.firstChild;
temp.innerHTML+=" - ";
temp.appendChild(l);
}

function loadSkin(info)
{
document.cookie="curskin="+escape(info)+"; expires=Monday, 04-Apr-2015 05:00:00 GMT";
location.reload(true);
}

function clearSkin()
{
document.cookie="curskin=; expires=Monday, 04-Apr-2000 05:00:00 GMT";
location.reload(true);
}

function genCSS(info)
{
document.body.bgColor=info[1];
document.body.text=info[2];
document.body.link=info[3];
document.body.aLink=info[4];
document.body.vLink=info[5];
if("undefined"!=typeof(fContent))
{
a=document.getElementById("fscroller");
a.style.color=info[13];
a=a.parentNode;
a.bgColor=info[12];
a=a.parentNode.previousSibling.firstChild;
a.bgColor=info[10];
a.firstChild.color=info[11];
}
document.write('<style type="text/css">');
a=new Array("body","td","optgroup");
for(vag in a)
{
//:P
document.write(a[vag]+'{font-family: '+fonts[parseInt("0"+info[0],10)]+'; color:'+info[2]+';}\n');
}
document.write("A:link{color: "+info[3]+"; }\n");
document.write("A:visited{color: "+info[4]+"; }\n");
document.write("A:hover{color: "+info[5]+"; }\n");
document.write(".nav:link{color: "+info[3]+"; }\n");
document.write(".nav:visited{color: "+info[4]+"; }\n");
document.write(".nav:hover{color: "+info[5]+"; }\n");
document.write(".titlebg{background-color: "+info[6]+";color: "+info[7]+";}\n");
document.write(".catbg{background-color: "+info[8]+"; color: "+info[9]+";}\n");
document.write(".windowbg{background-color: "+info[14]+"; color: "+info[2]+";}\n");
document.write(".hr{color: "+info[15]+";}\n");
document.write(".windowbg2{background-color: "+info[15]+"; color: "+info[2]+";}\n");
document.write(".bordercolor{background-color: "+info[18]+";}\n");
document.write(".quote{color: "+info[2]+";background-color: "+info[15]+";}\n");
document.write(".code{color: "+info[2]+";background-color: "+info[15]+";}\n");
document.write('</style>\n');
p=location.href.match(/board\=/)?17:16;
document.write('<scr'+'ipt>function mouseOverHighlightCell(tcell){tcell.style.backgroundColor=info['+p+'];}function mouseOutHighlightCell(tcell){tcell.style.backgroundColor="";}</scr'+'ipt>');
a=document.getElementsByTagName("td");
for(i=0;i<a.length;i++)
{
if(a[i].className=="welcomebg")
{
a[i].bgColor=info[14];
}
else if(a[i].className=="menubg")
{
a[i].bgColor=info[15];
}
else if(a[i].innerHTML.match(/Admin Functions\:/))
{
a[i].bgColor=info[1];
}
}
a=document.getElementsByTagName("font");
for(i=0;i<a.length;i++)
{
if(a[i].className.match(/titletext|text1/))
{
a[i].color=info[7];
}
else if(a[i].className=="cattext")
{
a[i].color=info[9];
}
}
}

toChange="";
function hexPopUp(ob)
{
toChange=ob;
cp=window.open('', 'colorPopUp', config='height=200,width=195, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no');
cp.focus();
//this was done using write because using "DOM" made it choppy and slow
cp.document.write("<scr"+"ipt>hexColors=[[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255],[255,0,0]];function getHex(x,y){if(x<180){for(i=1;i<7;i++){if(x<i*30)break;}x=(x-((i-1)*30))/30;temp=new Array(3);for(j=0;j<3;j++){temp[j]=Math.round((1-x)*hexColors[i-1][j]+(x)*hexColors[i][j]);}}else{temp=[127,127,127];}temp=[[255,255,255],temp,[0,0,0]];c=new Array(3);i=(y<90)?1:2;y=(y-((i-1)*90))/90;for(j=0;j<3;j++){x=Math.round((1-y)*temp[i-1][j]+(y)*temp[i][j]).toString(16);c[j]=(x.length<2?\"0\":\"\")+x;}c=c.join(\"\").toUpperCase();x=document.getElementById(\"col\");x.style.backgroundColor=c;x=x.getElementsByTagName(\"font\");x[0].innerHTML=c;x[1].innerHTML=c;}function getXY(e){ posx = 0; posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX; posy = e.clientY; } posx=(posx>195)?195:posx;posy=(posy>180)?180:posy;getHex(posx,posy);} function returnColor(){opener.changeColor(document.getElementById('col').getElementsByTagName('font')[0].innerHTML);window.close();}</scr"+"ipt><title>Click To Select</title><body onmousemove=\"getXY(event)\" topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0> <div id=\"pos\" style=\"width:195; height:180; margin:0; padding:0;\"><img src=\""+hexWheelUrl+"\" onclick=\"javascript:returnColor()\" alt=\"Click To Select\"></div><div id=\"col\" style=\"width:195; height:20; margin:0; padding:0;\"><center><b><font color=\"FFFFFF\">FFFFFF</font> <font color=\"000000\">FFFFFF</font></b></center></div></body>");
}

function changeColor(temp)
{
document.getElementById(toChange).value=temp;
blurify();
}

function blurify()
{
temp=document.modifyForm.signature;
temp.value=temp.value.replace(/\[s\=((.|\n|\r)*?)\]/ig,"");
if(temp.value.length>269)
{
alert("In order to use the custom skin feature, your signature must have at least 131 free characters.\nPlease remove "+(temp.value.length-269)+" characters.");
return;
}
temp.value+="[s="+document.getElementById("cf").value+",";
for(i in ids)
temp.value+=document.getElementById(ids[i]).value+",";
temp.value=temp.value.substring(0,temp.value.length-1)+"]";
}

sigSaver="";
function fixSigFocus()
{
temp=document.modifyForm.signature;
temp.value=temp.value.replace(/\[s\=((.|\n|\r)*?)\]/ig,"");
sigSaver=RegExp.$1;
}

function fixSigBlur()
{
temp=document.modifyForm.signature;
if(temp.value.length>269)
{
alert("In order to use the custom skin feature, your signature must have at least 131 free characters.\nPlease remove "+(temp.value.length-269)+" characters.");
return;
}
temp.value+="[s="+sigSaver+"]";
}

if(document.modifyForm)
{
customSkin=new Array();
document.modifyForm.signature.onfocus=fixSigFocus;
document.modifyForm.signature.onblur=fixSigBlur;
if(document.modifyForm.signature.value.match(/\[s\=((.|\n|\r)*?)\]/))
{
bid=RegExp.$1;
customSkin=bid.replace(/\n|\r|\s/ig,"").split(",");
}
if(customSkin.length!=19)
{
customSkin=[0,"F1F1F1","000000","003399","003399","003399","4080B0","F1F1F1","DADADA","0E0E0E","4080BO","F1F1F1","EFEFEF","000000","EFEFEF","F6F6F6","EFEFEF","F6F6F6","000000"];
}
temp=document.modifyForm.showimages.parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling;

d=document.createElement("div");
document.modifyForm.insertBefore(d,temp);
b=document.createElement("b");
f=document.createElement("font");
f.size=2;
f.innerHTML="Custom Skin";
b.appendChild(f);
d.appendChild(b);
hr=document.createElement("hr");
hr.size=1;
d.appendChild(hr);
t=document.createElement("table");
d.appendChild(t);
titles=["Background Color:","Text Color:","Link Color:","Active Link Color:","Visited Link Color:","Title Background Color:","Title Text Color:","Category Background Color:","Category Text Color:","News Title Background Color:","News Title Text Color:","News Background Color:","News Text Color:","Window Background 1:","Window Background 2:","Board Highlight Color:","Thread Highlight Color:","Table Border Color:"];
ids=["bgc","tc","lc","alc","vlc","tbgc","ttc","cbgc","ctc","ntbgc","nttc","nbgc","ntc","wbg1","wbg2","bhlc","thlc","tbc"];
descriptions=["Enter the color you would like to have as the background for your forum.","Enter the color that you would like the text on your forum to be.","Enter the color that you would like links on your forum to be.","Enter the color that you would like active links on your forum to be.","Enter the color that you would like visited links on your forum to be.","This color will be used as the background color for titles on your forum.","Choose what color the text for titles on your forum should be.","This color will be used as the background color for categories on your forum.","Choose what color the text for categories on your forum should be.","This color will be used as the background color for news title on your forum.","Choose what color the text for the news title on your forum should be.","This color will be used as the background color for the news on your forum.","Choose what color the text for the news text on your forum should be.","This will be used as the color for various areas throughout your forum.","This will be used as the color for various areas throughout your forum.","When you move your mouse over the boards on the homepage of your forum, the background color for that board's table cell will change to this color.","When you move your mouse over the threads on your forum, the background color for that thread's table cell will change to this color.","This will be the color of the borders for all tables."];
temprow=t.insertRow(-1);
temp=temprow.insertCell(0);
temp.vAlign="top";
temp.width=200;
f=document.createElement("font");
f.size=-1;
temp.appendChild(f);
f.innerHTML="Font:";
temp=temprow.insertCell(1);
temp.vAlign="top";
temp.width=205;
f=document.createElement("font");
f.size=-1;
inp=document.createElement("select");
inp.onblur=blurify;
inp.id="cf";
for(i=0;i<fonts.length;i++)
{
opt = document.createElement("option");
opt.text=fonts[i];
opt.value=i;
inp.options.add(opt);
}
inp.options[customSkin[0]].selected=true;
f.appendChild(inp);
temp.appendChild(f);
temp=temprow.insertCell(2);
temp.vAlign="top";
temp.width=205;
f=document.createElement("font");
f.size=-2;
temp.appendChild(f);
f.innerHTML="Choose what font you would like your forum to use.";
for(i in ids)
{
temprow=t.insertRow(-1);
temp=temprow.insertCell(0);
temp.vAlign="top";
temp.width=200;
f=document.createElement("font");
f.size=-1;
temp.appendChild(f);
f.innerHTML=titles[i];
temp=temprow.insertCell(1);
temp.vAlign="top";
temp.width=205;
f=document.createElement("font");
f.size=-1;
inp=document.createElement("input");
inp.onblur=blurify;
inp.type="text";
inp.size=20;
inp.id=ids[i];
inp.maxLength=6;
inp.value=customSkin[parseInt(i,10)+1].toUpperCase();
f.appendChild(inp);
temp.appendChild(f);
f.appendChild(document.createElement("br"));
a=document.createElement("a");
a.href="javascript:hexPopUp('"+ids[i]+"')";
im=document.createElement("img");
im.src="http://s3.images.proboards.com/colorchart.gif";
im.alt="[color chart]";
im.border=0;
a.appendChild(im);
f.appendChild(a);
temp=temprow.insertCell(2);
temp.vAlign="top";
temp.width=205;
f=document.createElement("font");
f.size=-2;
temp.appendChild(f);
f.innerHTML=descriptions[i];
}
}
</script>


Note for When/If Removing this Code:
This code stores information in the "Siganture" field of the users profile. If at some point you decide to remove this code or for whatever reason the code stops working then that information will remain visible in the signature until you or the user removes it.