Staff Options

Alright, first off, I'd just like to state that all the Javascript codes I used do not conflict with each other so it's a bit vague to me why the sudden change of the Table code on the same script won't work since it's adding an extra button code to your forum.

As for that, in case you would ask what are the Javascript in my forum, the following stated are the codes:

1. Rainbow name code
2. Christmas decoration code
3. Staff options
4. The modified profile code which introduces people automatically
5. Select content code
6. The custom navigation bar code
7. Nivo slider

http://www.medievalchaos.net/forum In case you need my forum link.

Okay, now here's the problem, I'd like for these codes to work on my Staff options code:

Code:

[table style="background: url('http://i810.photobucket.com/albums/zz27/kaizer20/Information-2_zpsd6d5163c.png') no-repeat left center #cfdce8; border: 1px solid #b8c5d0; padding: 5px 5px 5px 30px; width: 97%; font-weight: bold; color: #26547a; border-radius: 3px;"][tr][td](Information)
[/td][/tr][/table]

Code:

[table style="background: url('http://i810.photobucket.com/albums/zz27/kaizer20/lock_zps4a88582b.png') no-repeat left center #d7e2b7; border: 1px solid #b7c19a; padding: 5px 5px 5px 30px; width: 97%; font-weight: bold; color: #626f3d; border-radius: 3px;"][tr][td](Lock)[/td][/tr][/table]

Code:

[table style="background: url('http://i810.photobucket.com/albums/zz27/kaizer20/WarningSign-2_zps143f18bd.png') no-repeat left center #F2C7C7; border: 1px solid #ED6B6B; padding: 5px 5px 5px 30px; width: 97%; font-weight: bold; color: #A11F1F; border-radius: 3px;"][tr][td](Warn a member)[/td][/tr][/table]

Code:

[table style="background: url('http://i810.photobucket.com/albums/zz27/kaizer20/Smiley_Face-2_zps5eabd338.png') no-repeat left center #ffff7f; border: 1px solid #ffff30; padding: 5px 5px 5px 30px; width: 97%; font-weight: bold; color: #ffcd05; border-radius: 3px;"][tr][td]Approved by a pro staff!
[/td][/tr][/table]

Whenever I replace the codes in the original Staff Options code in the widget here:

Code:

<script type="text/javascript">
buttons.list('Staff Tools', {
    "Info": "<table style='background:url\(http://i810.photobucket.com/albums/zz27/kaizer20/Information-1.png\) no-repeat; font-family:verdana; font-weight:bold; font-size:13px; color:#000; text-align:left; padding-left:5px; width:500px; height: 75px; text-shadow: 1px 1px #808080;' align='center'><tr><td style='line-height:16px;' valign='top' align='center' width='100%'><br />\(YOUR TEXT HERE\)</td></tr></table>",
    "Solved and Locked": "<table style='background:url\(http://i810.photobucket.com/albums/zz27/kaizer20/checkmark-1.png\) no-repeat; font-family:verdana; font-weight:bold; font-size:25px; color:#FFFFFF; text-align:left; padding-left:5px; width:500px; height: 75px; text-shadow: 1px 1px #808080;' align='center'><tr><td style='line-height:16px;' align='left'></td></tr></table>",
    "Approved": "<table style='background:url\(http://i810.photobucket.com/albums/zz27/kaizer20/Smiley_Face-1.png\) no-repeat; font-family:verdana; font-weight:bold; font-size:25px; color:#FFFFFF; text-align:left; padding-left:5px; width:500px; height: 75px; text-shadow: 1px 1px #808080;' align='center'><tr><td style='line-height:16px;' align='left'></td></tr></table>",
    "Warning": "<table style='background:url\(http://i810.photobucket.com/albums/zz27/kaizer20/WarningSign-1.png\) no-repeat; font-family:verdana; font-weight:bold; font-size:13px; color:#fff; text-align:left; padding-left:5px; width:500px; height: 75px; text-shadow: 1px 1px #808080;' align='center'><tr><td style='line-height:16px;' valign='top' align='center' width='100%'><br />\(Who will you give the warning to and then please indicate the following steps to be done to avoid the mistake in the future BELOW the warning sign\)</td></tr></table>"
}, "bbcode_list_1");</script>

The button completely disappears.

I tried modifying the Javascript but still nothing happened:

Code:

(function(){var d={add:function(b,e,c){$(function(){if(document.getElementById("text_edit")){void 0==c&&(c="");var a=document.createElement("span");a.innerHTML='<button class="button2" style="height: 22px; margin-right: 5px;" onClick="bbfontstyle(\''+e+"', '"+c+"'); return false;\">"+b+"</button>";document.getElementById("new_buttons_area").appendChild(a)}})},list:function(b,e,c){$(function(){if(document.getElementById("text_edit")){var a=document.createElement("span");a.innerHTML='<input type="button" style="height: 22px; margin-right: 5px;" value="'+ b+'" onclick="selectWysiwyg(this, \''+c+'\');" class="button2">';document.getElementById("text_edit").appendChild(a);a=document.createElement("div");a.id=c;a.className="select";a.style.visibility="hidden";for(var d in e)a.innerHTML+="<button onmouseout=\"this.className='';\" onmouseover=\"this.className='selectHover';\" onclick=\"bbfontstyle('"+buttons.escape(e[d])+"', '');selectWysiwyg(this, '"+c+"');return false;\">"+d+"</button><br>";document.getElementById("text_editor_select_controls").appendChild(a)}})}, init:function(){$(function(){if(document.getElementById("text_edit")){var b=document.createElement("div");b.id="new_buttons_area";b.style.paddingTop="5px";document.getElementById("text_edit").parentNode.insertBefore(b,document.getElementById("text_edit").nextSibling)}})},escape:function(b){return b.replace(/'/g,"\\'").replace(/"/g,'\\"')}};window.buttons=d;d.init()})();

I really don't get why it won't appear because [Language] far as I know, it would be the same result even if you change the code originally inputted over and over again.

To summarize everything up, please help me how I can make the 4 table codes provided above work on the original code in the widget and the javascript already. I've been trying to solve this for some time but my capacity to solve it isn't enough.