Adding Smiley pop-up to the Shoutbox

Have you ever wanted to have a smiley pop-up for the UBB.threads shoutbox?

Look no further, because I’ll show you how to do it in this article.

Credit where credit is dude goes to CampingPA Ranger over at CampingPA.com. Stop by and have a look at their site. Their list of smileys is quite impressive as well!

Ok, where were we? Let’s get down to business here.

There are three files involved:

  • templates/default/sbsmileys.tpl – New file
  • templates/island_shoutbox.tpl – Modify this file
  • scripts/sbsmileys.inc.php – New file

Upload the new files to their respective directories on your forums. Then open up ‘templates/default/island_shoutbox.tpl’ and modify to match the following:

<span id="sending_field" style="display:none">
Sending...
</span>
<br />
<input type="button" name="shoutbutton" value="<?php echo $ubbt_lang['SHOUT_IT'] ?>" class="form-button" onclick="shoutit()" />
<input type="reset" value="<?php echo $ubbt_lang['RESET_IT'] ?>" class="form-button" />
<input type="button" name="smiley" value="Smileys" class="form-button" onclick="showChromeless('{$config.BASE_URL}/ubbthreads.php?ubb=sbsmileys','',900,600,0);" />
</div>
</form>

The only change here was to add line 7, which shows a pop-up window with all your configured smileys. Simply click on one or as many as desired and the shout text will be filled with the smiley short codes.

You can even leave the window open and use it at a different time, since it attaches itself to the button (and by extension window) that opened it in the first place.

The code is fairly self explanatory and it’s getting late here as well. Grab the download and modify one file and you have smileys for all.

Screencap of my working example

[download id=”2″]

One Response to “Adding Smiley pop-up to the Shoutbox”

  1. I know it is a chromeless window.
    But some sites really abuse this feature and it reaches the point that all the images do not display in the default window.
    So you need to inform the member they can use the arrow button to scroll.
    Is there any way to add a scroll bar/button or some type of indication to scroll?