Enhanced Style UBBC Tags

[Shadow Lass]

Ok, so I know that pre proboards version 5 you were able to accomplish posts like this by applying codes this this (see below) to your global footers. 

So I've done the same thing on my test site, but the post ends up looking like this

Is this a matter of coding on my behalf or is this not a feature yet available/compatible with Proboards Version 5? 

Thank you in advance for all help and attention

<script type="text/javascript">
/********
   Style UBBC Tags v2.1.2
   Coded by iPokemon
   Special thanks to Eton Bones and Wormopolis
   Eton: For helping with optimization
   Wormopolis: For being an awesome guy and letting me bounce ideas off of him
   Do not repost or claim as your own
*********/

/***** Edit Below Here *****/
   
var protectedClasses = [".class1","#id",".class3:hover"]; //user-defined protected classes
var showQuickReply = true; //show quick reply buttons; true = yes, false = no
var customClass = "windowbg2"; //post form or modify form
var customClass2 = "windowbg"; //quick reply area
var predictive = true; //true = convert old style tags when posting or modifying, false = leave old tags alone but make them work
   
/***** Edit Above Here *****/

var pbClasses = /^(\.windowbg|\.windowbg2|\.titlebg|\.catbg|\.cattext|\.titletext|\.nav|\.hr|\.bordercolor|\.quote|\.code|\.menubg|\.new stitlebg|\.forumjump|\.pagedropmenu)/;
function inArray(v,a){
   for(w=0;w<a.length;w++){ if(a[w] == v) return true; } return false;
}
function curlyBrackets(){
   var text = document.getElementsByName("message")[0].value;
   text = text.replace(/\{div\}/g,"[div]").replace(/\{\/div\}/g,"[/div]").replace(/\{nospaces\}/g,"[nospaces]").replace(/\{\/nospaces\}/g,"[/nospaces]").replace(/\{div\s(.+?)\}/g,"[div $1]");
   document.getElementsByName("message")[0].value=text;
}
function post_converter(){
   var text = document.getElementsByName("message")[0].value;
   text = text
   .replace(/newclass=\.\./gi,"newclass=")
   .replace(/newclass=\./gi,"newclass=")
   .replace(/\[classy=(.+?)\]/gi,"[div class=\"$1\"]")
   .replace(/\[\/classy\]/gi,"[/div]")
   .replace(/&{1}#0*91;/g,"[")
   .replace(/&{1}#0*93;/g,"]")
   .replace(/\[style=(.+?)\]/gi,"[div style=\"$1\"]")
   .replace(/\[\/style\]/gi,"[/div]")
   .replace(/\[newclass=(.+?)\]/gi,"[newclass=.$1]")
   .replace(/&{1}quot;/g,'"');
   document.getElementsByName("message")[0].value = text;
}
function board_converter(text){
   text = text
   .replace(/\[classy=(.+?)\]/gi,"[div class=\"$1\"]")
   .replace(/\[\/classy\]/gi,"[/div]")
   .replace(/\[style=(.+?)\]/gi,"[div style=\"$1\"]")
   .replace(/\[\/style\]/gi,"[/div]")
   .replace(/\[newclass=(.+?)\]/gi,"[newclass=.$1]");
   return text;
}
if(document.postForm || document.modifyForm){
   if(predictive) post_converter();
   var sub = document.getElementsByName("message")[0].parentNode.parentNode.parentNode.nextSibling;
   var clo = sub.cloneNode(true);
   clo.id = "style-tags-tr";
   clo.firstChild.className = customClass;
   clo.firstChild.id = "style-tags";
   clo.firstChild.firstChild.innerHTML = "Style Tags:";
   clo.firstChild.nextSibling.innerHTML = "<input type='button' onclick='post_converter();' value='Converter' />  <input type='button' onclick='curlyBrackets();' value='Style Checker' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[newclass=.class][/newclass]\";' value='Add Class' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[div ][/div]\";' value='Add Div' />";
   clo.firstChild.nextSibling.className = customClass;
   clo.firstChild.nextSibling.id = "style-tags-2";
   sub.parentNode.insertBefore(clo, sub.previousSibling);
}
if(showQuickReply){
   if(pb_action == "display"){
       if(document.getElementsByName("message")[0]){
           var tr = document.getElementsByName("message")[0].parentNode.parentNode.parentNode.parentNode.parentNode.insertRow(1);
           tr.id = "style-tags-tr";
           var tm = tr.insertCell(0);
           tm.id = "style-tags";
           tm.innerHTML = "<font size='2'>Style Tags:</font>  <input type='button' onclick='post_converter();' value='Converter' />  <input type='button' onclick='curlyBrackets();' value='Style Checker' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[newclass=.class][/newclass]\";' value='Add Class' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[div ][/div]\";' value='Add Div' />";
           tm.className=customClass2;
       }
   }
}
if(pb_action.match(/(calendar|pm|pre)view|viewprofile|search2|display/i)){
   var userDefined = "";
   var alreadyUsed = [];
   var checkMatch = /\[div /i;
   var newClass = /\[newclass=/i;
   var nospace = /\[nospaces\]/i;
   var newClassR = /\[newclass=(.+?)\](.+?)\[\/newclass\](\<br\>)?/gi;
   var td = document.getElementsByTagName("td");
   var table = document.getElementsByTagName('table');
   for(x=5;x<table.length;x++){
       if(table[x].className == "code" && table[x].innerHTML.match(/(\[div|\[newclass|\[nospaces)/i)){
           table[x].innerHTML = table[x].innerHTML
           .replace(/\[div (.+?)\]/g,"{div $1}")
           .replace(/\[\/div\]/g,"{/div}")
           .replace(/\[newclass=(.+?)\](.+?)\[\/newclass\]/gi,"{newclass=$1}$2{/newclass}")
           .replace(/\[nospaces\]/gi,"{nospaces}")
           .replace(/\[\/nospaces\]/gi,"{/nospaces}");
       }
   }
   for(x=0;x<td.length;x++){
       var tdhtml = td[x].innerHTML;
       if(td[x].width == "80%" && tdhtml.match(/(\[style=|\[classy=)/i)){
           tdhtml = board_converter(tdhtml);
       }
       if(td[x].width == "80%" && tdhtml.match(nospace)){
           tdhtml = tdhtml.replace(nospace,"<span class='nospaces'>").replace(/\[\/nospaces\]/ig,"</span>");
       }
       if(td[x].width == "80%" && tdhtml.match(newClass)){
           var result = newClassR.exec(tdhtml);
           while(result != null){
               if(!RegExp.$1.match(pbClasses) && !inArray(RegExp.$1,protectedClasses)){
                   if(!userDefined.match(RegExp.$1)){
                       userDefined += RegExp.$1+",";
                       tdhtml = tdhtml.replace(newClassR, "<style type=\"text/css\"> $1 {$2} </style>");
                   } else {
                       tdhtml = tdhtml.replace(newClassR, "");
                       alreadyUsed.push(RegExp.$1);
                   }
               }
               result = newClassR.exec(tdhtml);
           }
       }
       if(td[x].width == "80%" && tdhtml.match(checkMatch)){
           var tags = tdhtml.split("[div ");
           for(l=1;l<tags.length;l++){
               var ok = false;
               var attributes = tags[l].split("]")[0].split(" ");
               for(q=0;q<attributes.length;q++){
                   if(attributes[q].split("=")[0] == "style"){
                       var val = attributes[q].split("=")[1].substr(1,attributes[q].split("=")[1].length-2);
                       if(!val.match("expression") && !val.match("'")){
                           ok = true;
                       }
                   } else if(attributes[q].split("=")[0].match(/^(id|class|rel|title|style)$/)){
                       ok = true;
                   }
               }
               var content = tags[l].split("]")[1].split("[")[0];
               if(ok){
                   var toReplace = "[div ";
                   var att = "";
                   var attributes = tags[l].split("]")[0].split(" ");
                   for(q=0;q<attributes.length;q++){
                       toReplace += attributes[q]+" ";
                       att += attributes[q]+" ";
                   }
                   att = att.substr(0, att.length - 1);
                   toReplace = toReplace.substr(0, toReplace.length - 1);
                   toReplace = toReplace + "]";
                   tdhtml = tdhtml.replace(toReplace,"<div "+att+">").replace("[/div]","</div>");
               }
           }
       }
       if(tdhtml != td[x].innerHTML) td[x].innerHTML = tdhtml;
   }
}
</script>


<script type="text/javascript">
<!--
/*
Name: ENHANCED UBBC TABLE TAGS
Location: Global Footer
Created by EtonBones at yahoo d o t com
Do not redistribute without permission
Feel free to edit provided a notation is
added to this header stating that fact.
THIS HEADER MUST REMAIN INTACT.
*/


/*********** *****START EDITABLE USER OPTIONS***********************
If not concerned about the security risk posed by allowing users the ability
to set events such as onclick and onmouseover in their posts
set the following variable to false*/
var DisallowEvents=true;

/*If UBBC Undo installed and you would like enhanced tags added to history
set the following variable to true*/
var UUInstalled=false;
/******END EDITABLE USER OPTIONS (NO FURTHER EDITING NECESSARY)*******/


var NoGood="Enhanced tags need to be between the [td] and [/td]";
function enhanceTable(){
var td=document.getElementsByTagName("td");
for(i=0;i<td.length;i++){
if(td[i].width=="20%" && td[i].className.match(/windowbg/)){
var msg=td[i].parentNode.getElementsByTagName('td')[1].getElementsByTagName('tr')[1];
if(msg.getElementsByTagName('table').length){
for(l=0;l<msg.getElementsByTagName('table').length;l++){
parseTags(msg.getElementsByTagName('table')[l]);
//separate func needed since rowspans need to be set first in order to count columns
parseTH(msg.getElementsByTagName('table')[l]);
}
}
}else if(document.postForm && td[i].width=="30%" && td[i].className.match(/windowbg2/) && !document.getElementById('enhancedTable')){
var TR=td[i].parentNode;
var newTR=TR.parentNode.insertRow(TR.rowIndex+1);
TR.id="enhancedTable";
var newTD=document.createElement('td');
newTD.width='30%';
newTD.className='windowbg2';
newTD.innerHTML='<font size="2">Enhanced Table Tags:</font>';
newTR.appendChild(newTD);
newTD=document.createElement('td');
newTD.width='70%';
newTD.className='windowbg2';
newTD.innerHTML='<font size="2">Select Tag:</font><select name="etags" onChange=" addEtag(this.options[this.selectedIndex].value);this.selectedIndex=0;" ><option value="" selected="1">Enhanced Table Tags</option><option value="[th]" >Header</option><option value="[cs=2]">Span Columns</option><option value="[rs=2]">Span Rows</option><option value="[bg=white]">Background Color</option><option value="[atrb=border,0,true]">Any Attribute</option></select> ';
newTR.appendChild(newTD);
}else if(document.postForm && td[i].width=="100%" && td[i].className.match(/titlebg/) && td[i].innerHTML.match(/Topic Summary/)){
var table=td[i].parentNode.parentNode;
var re= /(?:[^\"])(\[(th|cs|rs|bg|atrb).*?\])/gim;
if(table.className.match(/tbody/i))table=table.parentNode;
for(l=2;l<table.rows.length;l=l+2){
if(table.rows[l].cells[0].innerHTML.match(/(?:[^\"\=])(\[(th|cs|rs|bg|atrb).*?\])/gim)){
while(table.rows[l].cells[0].innerHTML.match(/(?:[^\"\=])(\[(th|cs|rs|bg|atrb).*?\])/im ) ){
table.rows[l].cells[0].innerHTML= table.rows[l].cells[0].innerHTML.replace(/(?:[^\"\=])(\[(th|cs|rs|bg|atrb).*?\])/im, stripAnchor(RegExp.$1,RegExp.$2) ) ;
}
}
}
}
}
}

function stripAnchor(str){
var t=/(<A href\=.*\>(.*?)\<\/A\>)/i
if(!str)return "";
var s=str.substr(0,1);
if(s=='\"')return str;
if(s=="\[") s="";
if(str.match(t))str=str.replace(RegExp.$1,RegExp.$2);
return s+"<a title=\""+str+"\">*</a>";
}

function parseTags(TBL){
if(TBL.className !=""){
TBLS=TBL.getElementsByTagName('table')
for(k=0;k<TBLS.length;k++)parseTags(TBLS[k]);
return true;
}
var cell=TBL.getElementsByTagName('td');
var nada="";
for (j=0;j<cell.length;j++){
if(cell[j].innerHTML.match(/(\[cs\=(\d+)\])/i)){
cell[j].setAttribute("colSpan",RegExp.$2);
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
if(cell[j].innerHTML.match(/(\[rs\=(\d+)\])/i)){
cell[j].setAttribute("rowSpan",RegExp.$2);
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
if(cell[j].innerHTML.match(/(\[bg\=(.*?)\])/i)){
cell[j].setAttribute("bgColor",RegExp.$2);
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
while(cell[j].innerHTML.match(/(\[atrb\=(.*?)\])/i)){
var r1=RegExp.$1;
var r2=RegExp.$2;
var atrb=""; var atrbVal="";
var applyTable=false;
var oObj;
if(r2.split(',').length>0){ atrb=r2.split(',')[0]; atrb=atrb.replace(/^\s*|\s*$/g,"");}
if(r2.split(',').length>1) {atrbVal=r2.split(',')[1]; atrbVal=atrbVal.replace(/^\s*|\s*$/g,"");}
if(atrbVal.match(/(<A href\=.*\>(.*)\<\/A\>)/i))atrbVal=atrbVal.replace(RegExp.$1,RegExp.$2);
if(r2.split(',').length>2)applyTable=r2.split(',')[2]?true:false;
oObj=applyTable?TBL:cell[j];
if(atrb != ""){
if(atrb.toLowerCase()=="style"){
oObj.style.cssText+=atrbVal;
}else if(atrb.toLowerCase().substr(0,2)=="on" && DisallowEvents){
nada="<a title=\"Disallowed: "+r1.replace("[","").replace("]","") +"\">*</a>";
}else{
document.expando=false; //IE workaround for casing
try{
oObj.setAttribute(atrb,atrbVal);
}catch(e){
nada="<a title=\"Casing Error: "+r1.replace("[","").replace("]","") +"\">*</a>";
}finally{
document.expando=true;
}
}
}
cell[j].innerHTML=cell[j].innerHTML.replace(r1,nada);
}
}
}

function parseTH(TBL){
if(TBL.className !=""){
TBLS=TBL.getElementsByTagName('table')
for(k=0;k<TBLS.length;k++)parseTags(TBLS[k]);
return true;
}
var cell=TBL.getElementsByTagName('td');
for (j=0;j<cell.length;j++){
if(cell[j].innerHTML.match(/(\[th\])/i)){
cell[j].setAttribute("colSpan",columns(TBL));
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
}
}
function columns(TBL){
//w3c states that a colSpan=0 should make a cell span all columns but IE doesn't honor this, so...
var columns=0;
var tmp;
for(o=0;o<TBL.rows.length;o++){
tmp=0;
for(p=0;p<TBL.rows[o].cells.length;p++){
tmp++
if(TBL.rows[o].cells[p].rowSpan>1)tmp=tmp+TBL.rows[o].cells[p].rowSpan-1;
}
if(tmp>columns)columns=tmp;
}
return columns;
}

function addEtag(tag){
if(tag!=""){
if(UUInstalled){
if(isInsideCell()){
addX(tag);
}else{
alert(NoGood);
document.postForm.message.focus();
}
}else{
if(isInsideCell()){
add(tag);
}else{
alert(NoGood);
document.postForm.message.focus();
}
}
}
}


function isInsideCell(){
//Function purpose: determine if insertion point falls within the bounds of a cell
var msg=document.postForm.message;
if(document.postForm.message.createTextRange){
getCursorPositionIE();
var tmp= document.postForm.message.value.substr(0,document.postForm.message.selectionStart).split("\n").length-1;
setCursorPositionIE(msg.selectionStart-tmp);
}
msg.selectionStart=msg.selectionEnd;
var curr=msg.selectionStart;
if(msg.value.substr(0,curr).lastIndexOf("[td]")==-1 || msg.value.substr(0,curr).lastIndexOf("[td]")<msg.value.substr(0,curr).lastIndexOf("[/td]"))
return false;
if(msg.value.substr(curr).indexOf("[/td]")==-1 || (msg.value.substr(curr).indexOf("[/td]")>msg.value.substr(curr).indexOf("[td]") && msg.value.substr(curr).indexOf("[td]")!=-1))
return false;
if(msg.value.substr(0,curr).lastIndexOf("[")>msg.value.substr(0,curr).lastIndexOf("]"))
return false;
if(msg.value.substr(curr).indexOf("]")<msg.value.substr(curr).indexOf("[") )
return false;
return true;
}

if(location.href.match(/action\=(display|pmview|recent|userrecent|goto|search|calendarview)/) || ( document.postForm ))
enhanceTable();


function setCursorPositionIE(start,end) {
if(document.selection){
var element=document.postForm.message;
end=(end)?end:start;
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
}

function getCursorPositionIE(){
if(document.selection){
var element = document.postForm.message;
element.focus();
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText( element );
stored_range.setEndPoint( 'EndToEnd', range );
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
element.selectionFaux=true;
}
}
//-->
</script>



[/a]

[Welshling]

Style tags, are no longer needed in v5 because everything is done using css and bbcoding in posts. Some styles however do not work at all, yet. But there are requests for future proboards updates for things like transitions,tabs and scroll bar color styles in posts.

support.proboards.com/thread/468664/tutorial-posting-templates this may help you understand how to achieve posting templates in v5.