Code:
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['shoutbox']}.png" id="shoutbox_img" class="expander" alt="[-]" /></div>
<div><strong>{$lang->sf_sb_shoutbox}</strong> (<a href="index.php?action=full_shoutbox">{$lang->sf_sb_fullsbox}</a>)<br /></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['shoutbox_e']}" id="shoutbox_e">
<tr>
<td class="trow2" align="center" width="80%"><form onsubmit="ShoutBox.postShout(); jQuery('#shout_data').val(''); return false;" action="index.php">{$lang->sf_sb_shout} <input type="text" style="font-size:1.2em;" id="shout_data" size="50" /> - <input type="submit" value="{$lang->sf_sb_shoutnow}" id="shouting-status" /></form></td>
<td class="trow2" align="center" width="20%">
<a style="cursor: pointer;" id="shoutbox_myfont">$lang->sf_sb_fontfamily</a>
<div id="shoutbox_myfont_popup" class="popup_menu" style="display: none; width:100px; margin-left: 10px; padding: 15px; background: #d9d9bd; color: #000000; border: 1px solid #000000;">
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('tms');"><span style="font-family:'Trebuchet MS';">Trebuchet MS</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('arial');"><span style="font-family:Arial;">Arial</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('courier');"><span style="font-family:Courier;">Courier</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('tahoma');"><span style="font-family:Tahoma;">Tahoma</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('impact');"><span style="font-family:Impact;">Impact</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('csms');"><span style="font-family:'Comic Sans MS';">Comic Sans MS</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('verdana');"><span style="font-family:Verdana;">Verdana</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.fontAdd('tnr');"><span style="font-family:'Times New Roman';">Times New Roman</span></a>
</div>
<script type="text/javascript">
{$sf_myfont_popup}
</script>
<a style="cursor: pointer;" id="shoutbox_smilies">$lang->sf_sb_smilie</a>
<div id="shoutbox_smilies_popup" class="popup_menu" style="display: none; padding: 15px; background: #d9d9bd; color: #000000; border: 1px solid #000000; width: 215px; height: 140px; overflow: auto;">
{$smilie_inserter}
</div>
<script type="text/javascript">
{$sf_smilies_popup}
</script>
<a style="cursor: pointer;" id="shoutbox_mycode">$lang->sf_sb_fontstyle</a>
<div id="shoutbox_mycode_popup" class="popup_menu" style="display: none; padding: 15px; background: #d9d9bd; color: #000000; border: 1px solid #000000;">
<a style="cursor: pointer;" onclick="ShoutBox.mycodeAdd('B');"><span style="font-weight:bold;">Fett</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.mycodeAdd('I');"><span style="font-style:italic;">Kursiv</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.mycodeAdd('U');"><span style="text-decoration:underline;">Unterstrichen</span></a>
<br />
<a style="cursor: pointer;" onclick="ShoutBox.mycodeAdd('S');"><span style="text-decoration:line-through;">Durchgestrichen</span></a>
</div>
<script type="text/javascript">
{$sf_mycode_popup}
</script>
<a style="cursor: pointer;" id="shoutbox_colors">$lang->sf_sb_color</a>
<div class="shoutbox_button_color">
<div id="shoutbox_colors_popup" class="popup_menu" style="display: none; padding: 5px; background: #d9d9bd; color: #000000; border: 1px solid #000000; width:100px;">
<ul class="shoutbox">
<li class="shoutbox_color" style="background: #800000;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('800000');"></a></li>
<li class="shoutbox_color" style="background: #8B4513;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('8B4513');"></a></li>
<li class="shoutbox_color" style="background: #006400;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('006400');"></a></li>
<li class="shoutbox_color" style="background: #2F4F4F;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('2F4F4F');"></a></li>
<li class="shoutbox_color" style="background: #000080;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('000080');"></a></li>
<li class="shoutbox_color" style="background: #4B0082;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('4B0082');"></a></li>
<li class="shoutbox_color" style="background: #800080;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('800080');"></a></li>
<li class="shoutbox_color" style="background: #000000;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('000000');"></a></li>
</ul>
<ul class="shoutbox">
<li class="shoutbox_color" style="background: #FF0000;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FF0000');"></a></li>
<li class="shoutbox_color" style="background: #DAA520;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('DAA520');"></a></li>
<li class="shoutbox_color" style="background: #6B8E23;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('6B8E23');"></a></li>
<li class="shoutbox_color" style="background: #708090;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('708090');"></a></li>
<li class="shoutbox_color" style="background: #0000CD;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('0000CD');"></a></li>
<li class="shoutbox_color" style="background: #483D8B;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('483D8B');"></a></li>
<li class="shoutbox_color" style="background: #C71585;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('C71585');"></a></li>
<li class="shoutbox_color" style="background: #696969;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('696969');"></a></li>
</ul>
<ul class="shoutbox">
<li class="shoutbox_color" style="background: #FF4500;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FF4500');"></a></li>
<li class="shoutbox_color" style="background: #FFA500;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FFA500');"></a></li>
<li class="shoutbox_color" style="background: #808000;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('808000');"></a></li>
<li class="shoutbox_color" style="background: #4682B4;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('4682B4');"></a></li>
<li class="shoutbox_color" style="background: #1E90FF;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('1E90FF');"></a></li>
<li class="shoutbox_color" style="background: #9400D3;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('9400D3');"></a></li>
<li class="shoutbox_color" style="background: #FF1493;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FF1493');"></a></li>
<li class="shoutbox_color" style="background: #A9A9A9;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('A9A9A9');"></a></li>
</ul>
<ul class="shoutbox">
<li class="shoutbox_color" style="background: #FF6347;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FF6347');"></a></li>
<li class="shoutbox_color" style="background: #FFD700;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FFD700');"></a></li>
<li class="shoutbox_color" style="background: #32CD32;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('32CD32');"></a></li>
<li class="shoutbox_color" style="background: #87CEEB;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('87CEEB');"></a></li>
<li class="shoutbox_color" style="background: #00BFFF;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('00BFFF');"></a></li>
<li class="shoutbox_color" style="background: #9370DB;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('9370DB');"></a></li>
<li class="shoutbox_color" style="background: #FF69B4;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FF69B4');"></a></li>
<li class="shoutbox_color" style="background: #DCDCDC;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('DCDCDC');"></a></li>
</ul>
<ul class="shoutbox">
<li class="shoutbox_color" style="background: #FFDAB9;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FFDAB9');"></a></li>
<li class="shoutbox_color" style="background: #FFFFE0;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FFFFE0');"></a></li>
<li class="shoutbox_color" style="background: #98FB98;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('98FB98');"></a></li>
<li class="shoutbox_color" style="background: #E0FFFF;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('E0FFFF');"></a></li>
<li class="shoutbox_color" style="background: #87CEFA;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('87CEFA');"></a></li>
<li class="shoutbox_color" style="background: #E6E6FA;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('E6E6FA');"></a></li>
<li class="shoutbox_color" style="background: #DDA0DD;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('DDA0DD');"></a></li>
<li class="shoutbox_color" style="background: #FFFFFF;"><a style="cursor: pointer;" onclick="ShoutBox.colorAdd('FFFFFF');"></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
{$sf_colors_popup}
</script>
</td>
</tr>
<tr>
<td class="trow1" colspan="2"><div id="shoutbox_data" style="height: {$mybb->settings[sf_sb_height]}px; overflow: auto;">{$lang->sf_sb_loading}</div></td>
</tr>
</tbody>
</table>
<br />
<script type="text/javascript">
ShoutBox.refreshInterval = {$mybb->settings[sf_sb_refresh_interval]};
ShoutBox.MaxEntries = {$mybb->settings[sf_sb_shouts_main]};
ShoutBox.lang = ['{$lang->sf_sb_posting}', '{$lang->sf_sb_shoutnow}', '{$lang->sf_sb_loading}', '{$lang->sf_sb_flood_check}', "{$lang->sf_sb_no_perform}"];
{$extra_js}
jQuery(document).ready(function($) {
ShoutBox.showShouts();
$(".sb_smilie").on("click", function() {
$("#shout_data").focus();
var smiley = $(this).attr("alt");
$("#shout_data").replaceSelectedText(smiley + " ");
$("#shout_data").focus();
});
$("#shoutbox_smilies").on("click", function() {
$.ajax({
url: 'xmlhttp.php?action=load_sbsmilies',
type: 'get',
async: true,
success: function(response){
var box = jQuery.parseJSON(response);
$("#sb_smiliebox").html(box);
}
});
});
});
</script>
Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="" width="200">
<thead>
<tr class="thead"><td>Smilies for Shoutbox</td></tr>
</thead>
<tr>
<td class="">
<div style="width: 100%; text-align:center;" id="sb_clickable_smilies">
<div id="sb_smiliebox"></div>
</div>
</td>
</tr>
</table>