[CB] SkinView 1.0

[Wormopolis]

Browser Tested: IE and FF
placement: global header (very top) and global footer.

This code will create a panel that allows you to make runtime changes to your forum without having to go back and forth to the skin editor, saving, then reloading the site to see the changes.

The panel is toggled on and off via a link in the admin panel:


if you have the variable to have everyone see it, it will be on all the time (until I figure out a good place to put a link to toggle.)

v 1.0 Basic Skin elements inlcuding background image, logo, and all board colors. does NOT currently support gradiants (working on it). Does NOT export your choices to the skin editor so you have to write down what inputs you want to keep (working on that as well).

Things to keep in mind:
If you have additional CSS in your header/footer that affects your board, this code will not change it. If you have a background image added via headers, this code will not see it in the CSS, so you wont be able to change it (next version). If you have a welcome table remodel, there is a CHANCE this code will not be able to change your logo image... possible future versions will account for popular remodels, but the fact there are so many out there it will be impossible to cover them all.

There is a chance some bugs exist that I didnt find, but my beta testers reported everything they found and I corrected it. If you have issues with this, feel free to make a post on PBS or WormoCodes. If you have suggestions for future versions, make a post on WormoCodes.

All upgrades to this code will be posted on www.wormocodes.com

and here we go:

GLOBAL HEADER PORTION (very top)

<script type="text/javascript">
<!--
//  SkinView Project - v1.0
//  by Wormopolis - www.wormocodes.com
//  Do NOT repost - KEEP header intact
//  upgrades will be done on WormoCodes

//  Global Header Stuff

//  Edit these:
var showPanelToEveryone=false;  //turn on SkinView Panel to all members
var showPanelOnlySkinAccess=false;  //Make panel available only to members with access to skin editor




//  DO NOT EDIT BELOW
version="1.0";

var PBskinputs = [
['Font','td,input,textarea,select,optgroup','font-family','text'],
['Logo Image','document.getElementById(\'LogoImage\').src','document.getElementById(\'LogoImage\')','url','vrbl'],
['Background Color','body','background-color','hex'],
['Background Image','body','background-image','url'],
['Background Fixed','body','background-attachment','"fixed" or empty'],
['Text Color','td,.nav,.windowbg,.windowbg2','color','hex'],
['Link Color','A:link,.nav:link','color','hex'],
['Visited Link Color','A:visited,.nav:visited','color','hex'],
['Title BG Color','.titlebg','background-color','hex'],
['Title Text Color','.titletext A,.titlebg','color','hex'],
['Category BG Color','.catbg','background-color','hex'],
['Category Text Color','.catbg','color','hex'],
['News Title BG Color','.newstitlebg','background-color','hex'],
['News Title Text Color','.newstitlebg','color','hex'],
['News BG Color','document.getElementById(\'fscroller\').parentNode.style.backgroundColor','document.getElementById(\'fscroller\')','hex','vrbl'],
['News Text Color','document.getElementById("fscroller").style.color','document.getElementById(\'fscroller\')','hex','vrbl'],
['Window BG 1','.windowbg','background-color','hex'],
['Window BG 2','.windowbg2','background-color','hex'],
['Border Color','.bordercolor','background-color','hex']
];


var REPO=false;

var SCROLLO=false;

function toggleRepo() {
REPO=!REPO;
if (REPO) document.getElementById('posCell').style.backgroundColor="999900";
else document.getElementById('posCell').style.backgroundColor="999999";
}
function toggleScrollo() {
SCROLLO=!SCROLLO;
if (SCROLLO) document.getElementById('scrCell').style.backgroundColor="999900";
else document.getElementById('scrCell').style.backgroundColor="999999";
}

function repos(event, vict) {
if (REPO) {
x=event.clientX; y=event.clientY;
w=parseInt(vict.style.width); x=x-(w/4);
h=parseInt(vict.style.height); y=y-20;
vict.style.top=document.body.scrollTop+y; vict.style.left=x;
}
}

function floatSkinDiv() {
 if (SCROLLO) {
   nv=document.getElementById('skinViewDiv');
   if (parseInt(nv.style.top)<document.body.scrollTop) nv.style.top=document.body.scrollTop+10;

   if ( (parseInt(nv.style.top)+parseInt(nv.style.height)) > (document.body.scrollTop+document.body.clientHeight) ) {
     nv.style.top=(document.body.scrollTop+document.body.clientHeight- parseInt(nv.style.height));
   }
   var scrollit=setTimeout("floatSkinDiv()",100);
 }
}

function getIndex(sel) {
 st=document.getElementsByTagName('style')[0];
 st_stuff=st.innerHTML;
 st_stuff=st_stuff.replace(/\s+/g,' ');
 dtTest=st_stuff.replace('<!--','').split('}');
 styArray=new Array();
 for (a=0;a<dtTest.length-1; a++) {
   tst=dtTest[a].split('{');
   styArray[a]=new Array(tst[0], tst[1]);
 }
 for(tmp3=0; tmp3<styArray.length; tmp3++)  if(styArray[tmp3][0].match(new RegExp('\\s'+sel+'\\s','i'))) {break;}
 return tmp3;
}

function prepChange() {
 chosen=document.getElementById('userinput').value;
 tmp2=document.getElementById('styledrop');
 if (tmp2.options[tmp2.selectedIndex].value) {
   clas=PBskinputs[tmp2.selectedIndex-1][2];
   sty=PBskinputs[tmp2.selectedIndex-1][1];
   inpType=PBskinputs[tmp2.selectedIndex-1][3];
   if (inpType=='hex' && !checkHex(chosen)) {
     alert('Check the Hex Value, something doesnt seem right');
   } else {
     selArray=sty.split(',');
     if (PBskinputs[tmp2.selectedIndex-1].length>4) changeStyleSpecial(sty,chosen,clas);
     else changeStyle(sty,clas,chosen,inpType);
     changeDD();
   }
 }
}

function checkHex(num) {
 res=true;
 for (h=(num.substr(0,1)=='#' ? 1 : 0); h<num.length; h++) {
   if (!num.substr(h,1).match(/([a-f]|\d)/i)) res=false;
 }
 return res;
}

function changeStyleSpecial(elmnt, nwClr, testelmnt) {
 if (typeof(eval(testelmnt))!='undefined') {
   try {
     eval(elmnt + '="' + nwClr + '"');
   }
   catch(e) {
     alert('That didnt work.');
   }
 }
}

function changeStyle(sel,Nrule, NruleStuff, type) {

 // check for multiple selectors
 selList=sel.split(',');
 for (s=0; s<selList.length; s++) {
   index=getIndex(selList[s]);
 // have to preserve existing rule while modifying new
   if (document.styleSheets[0].cssRules) {
     oldStuff=document.styleSheets[0].cssRules[index].cssText;
     oldStuff.match(/{(.*?)}/);
     oldStuff=RegExp.$1;
   } else {
     keep=document.getElementById('currentStyle').value;
     rg=new RegExp(selList[s]+' {(.*?)}','i');
     styTurn=keep.match(rg);
     oldStuff=RegExp.$1;
   }
   nes=new RegExp(' '+Nrule+': (.*?)(;?) ','i');

   nesRGBfix=new RegExp(' '+Nrule+': rgb\((.*?)\); ','i');  // Firefox RGB fix
   oldStuff=oldStuff.replace(nesRGBfix, ' '+Nrule+': XXXXXX; ');  // Firefox RGB fix

   if (type=='url') NruleStuff='url('+NruleStuff+')';   //url type fix

   // fix for deleting attributes
     Nrule=(NruleStuff=='' ? '' : Nrule+': ');
   //

   //  fix for attributes when not present
     if (!oldStuff.match(nes)) oldStuff=oldStuff.replace(/;/,'; '+Nrule+'TEMP; ');
   //

   newStuff=oldStuff.replace(nes,' '+Nrule+NruleStuff+((NruleStuff.charAt(NruleStuff.length)==';'  || NruleStuff=='') ? '' : '; '));

   if (document.styleSheets[0].deleteRule) document.styleSheets[0].deleteRule(index);
   else document.styleSheets[0].removeRule(index);

   if (document.styleSheets[0].insertRule) document.styleSheets[0].insertRule(selList[s]+' {'+newStuff+'}', index);
   else document.styleSheets[0].addRule(selList[s],newStuff);

   // runtime error in IE to change style element
   if (document.styleSheets[0].cssRules) {
     st=document.getElementsByTagName('style')[0];
     stIH=st.innerHTML;
     stIH=stIH.replace(/\s+/g,' ');
     rg=new RegExp(selList[s]+" {(.*?)}","i");
     st.innerHTML=stIH.replace(rg,selList[s]+' {'+newStuff+'}');
     
   }
 }
}

function changeDD() {
 dd=document.getElementById('styledrop');
 dd_val=dd.options[dd.selectedIndex].value;
 dd_type=dd.options[dd.selectedIndex].innerHTML;
 for (d=0; d<PBskinputs.length; d++) {
   if (dd_type==PBskinputs[d][0]) {
     dd_parms=PBskinputs[d].length>4 ? 'invalid' : PBskinputs[d][1];
     dd_class=PBskinputs[d][3];
     document.getElementById('expl').innerHTML=dd_class;
     break;
   }
 }
 updateStyleStuff(dd_parms);
}

function updateStyleStuff(parms) {
 st=document.getElementsByTagName('style')[0];
 st_stuff=st.innerHTML;
 st_stuff=st_stuff.replace(/\s+/g,' ');
 dtTest=st_stuff.replace('<!--','').split('}');
 styArray=new Array();
 for (a=0;a<dtTest.length-1; a++) {
   tst=dtTest[a].split('{');
   styArray[a]=new Array(tst[0].replace(/^\s/,'').replace(/\s$/,''), tst[1]);
 }
 document.getElementById('currentStyle').value= (parms=='invalid'? "Not contained in CSS" : "");
 for (b=0; b<styArray.length; b++) {
   rgxp=new RegExp(styArray[b][0],'i');
   if (parms.match(new RegExp('(^|\,)'+styArray[b][0]+'($|\,)','i'))) {
     document.getElementById('currentStyle').value+=styArray[b][0]+" {"+styArray[b][1]+"}\n";
   }
 }

}

//  data to build table
var SVstuff='<div id="skinViewDiv" onmouseover="repos(event, this)" style="position: absolute; top: 10; left: 10; width: 400; height: 200; display:none">';
SVstuff+='<table id="skinTable" cellpadding="1" width="100%" height="100%"><tr><td class="bordercolor">';
SVstuff+='<table width="100%" height="100%"><tr style="height: 20px !important" ><td>';
SVstuff+='<table width="100%"><tr style="height: 20px !important"><td width="50%" style="background-color: 999999; background-image: url(http://i197./aa250/WORMOPOLIS/positimg.gif); background-repeat: no-repeat; background-position:10% center;" onclick="toggleRepo()" id="posCell"></td><td  style="background-color: 999999; background-image: url(http://i197./aa250/WORMOPOLIS/scrlimg.gif); background-repeat: no-repeat; background-position:90% center;" onclick="toggleScrollo(); floatSkinDiv();" id="scrCell"></td></tr></table></td></tr>';
SVstuff+='<tr><td style="background-color:111111;"><fieldset style="height:9'+(document.all?'9':'0')+'%"><legend style="color:FFFFFF">SkinView v'+version+'</legend><center><textarea id="currentStyle" cols="70" rows="5" style="overflow: auto; font-size:9" >Hi There,\n\nSelect a Skin Option from the drop down and enter a new value in the box to the right of it.  Click button to make changes.</textarea><br><table><tr><td vAlign="top"><select id="styledrop" onchange="changeDD();"><option>Skin Variable</option></select></td><td vAlign="top" align="center"><input id="userinput"><br><font id="expl"></font></td><td vAlign="top">';
SVstuff+='<input type="button" value="CLICK" onclick="prepChange()"></td></tr></table>';
SVstuff+='</center></fieldset></td></tr>';
SVstuff+='<tr style="height: 20px !important"><td style="background-color:111111;">';
SVstuff+='<table width="100%"><tr><td align="left">Current Skin ID: '+pb_skinid+'</td><td align="right"><a href="http://www.wormocodes.com"><img src="http://i197./aa250/WORMOPOLIS/2zibpqv.png" border="0"></a></td></tr></table></td></tr>';
SVstuff+='</table></td></tr>';
SVstuff+='</table></div>';

document.write(SVstuff);
sv=document.getElementById('styledrop');
for (i=0; i<PBskinputs.length; i++) {
ot=document.createElement('option');
ot.innerHTML=PBskinputs[i][0];
ot.value=PBskinputs[i][2];
sv.appendChild(ot);
}

// housekeeping - add id to logo image in case another code moves it.
for (tds=document.getElementsByTagName('td'), w=0; w<tds.length; w++) {
 if (tds[w].className=='welcomebg' && tds[w].height=='50') {
   tds[w].id='welcomecell';
   var possImg=tds[w].getElementsByTagName('img');
   if (possImg[0])  possImg[0].id='LogoImage';
 }
}


// -->
</script>


GLOBAL FOOTER PORTION

<script type="text/javascript">
<!--
//  SkinView Project - v1.0
//  by Wormopolis - www.wormocodes.com
//  Do NOT repost - KEEP header intact
//  upgrades will be done on WormoCodes

//  Global Footer Stuff


//  DO NOT EDIT BELOW
// housekeeping things to make newsfader stuff work
if (document.getElementById('fscroller')) {
vict=document.getElementById('fscroller').parentNode.parentNode.previousSibling.firstChild;
vict.bgColor="";
vict.firstChild.color="";
}
// ----

// placement in Admin Panel


if (location.href.match(/tion=admin/)) {
 for (tds=document.getElementsByTagName('td'), skv=0; skv<tds.length; skv++) {
   if (tds[skv].className=='titlebg' && tds[skv].width=='100%' && tds[skv].innerHTML.match(/Administration Area/i)) {
     needCol=tds[skv].parentNode.nextSibling.firstChild.firstChild.firstChild;
     for (temp=needCol.getElementsByTagName('td'), t=0; t<temp.length; t++) {
       if (temp[t].innerHTML.match(/Customize Your Forum/i)) {
         needDiv=temp[t].getElementsByTagName('div')[0];
         if (!showPanelOnlySkinAccess || (showPanelOnlySkinAccess && needDiv.innerHTML.match(/Forum Colors/i))) {
           nwLnk=document.createElement('a');
           nwLnk.href="javascript: void(0)";
           nwLnk.onclick=function() {if (document.cookie.match(/SkinView=on/)) {document.cookie="SkinView=off"; } else {document.cookie="SkinView=on"; } togglePanel();};
           nwLnkFnt=document.createElement('font');
           nwLnkFnt.style.backgroundColor="000000";
//            nwLnkFnt.style.color="00FF00";
           nwLnkFnt.id="SVlnk";
           nwLnkFnt.appendChild(document.createTextNode('Toggle SkinView Panel'));
           needDiv.appendChild(document.createElement('br'));
           nwLnk.appendChild(nwLnkFnt);
           needDiv.appendChild(nwLnk);
           break;
         }
       }
     }
   }
 }
}
function togglePanel() {
 if (document.getElementById('skinViewDiv')) {
   if (document.cookie.match(/SkinView=on/) || showPanelToEveryone) {
     if (document.getElementById('SVlnk')) document.getElementById('SVlnk').style.color="00FF00";
     document.getElementById('skinViewDiv').style.display="";
   } else {
     document.getElementById('skinViewDiv').style.display="none";      
     if (document.getElementById('SVlnk')) document.getElementById('SVlnk').style.color="FF0000";
   }
 }
}
togglePanel();

// ----


//  -->
</script>



Preview: www.wormocodes.com/index.cgi?board=betaskinview


hopefully you enjoy this.. I spent a lot of time on it.