How to Add a Smilie Bar to The Comments Movable Type
Created by Josh Cooper

The precursor for this is that you have already implemented a Smilie Hack in some form, so the codes are
already in your Util.pm module.

There are 2 things that need to be edited for this, and both are in your sites templates. These are based on
a fairly standard templates , so it will vary depending on your templates. As Always, make sure you backup
copies of both of your templates before you start.

a. Comment Listing Template

b.Comment Preview Template

First lets start with the Comment Listing Template

You will need to add the following function to your header, I added mine directly below the 

  function forgetMe{
    blah
  }
function insertSmilies (v) {
  document.forms[0].elements[4].focus();
  document.selection.createRange().text = v;
}

Now find the following line:

Comments:<br />

Replace that line with the following:

<div class="comments-head">
<table width="98%" border="0">
  <tr>
    <td width="15%">Comments:</td>
    <td width="85%" align="right"><script language="javascript">
if (document.selection) {
    document.write('<table border="0" cellspacing="0" cellpadding="1" width="170">');
    document.write('<tr>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':angry\')"><img src="http://mysite.com/smilies/angry.gif" alt="angry" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':biggrin\')"><img src="http://mysite.com/smilies/biggrin.gif" alt="biggrin" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':blush\')"><img src="http://mysite.com/smilies/blush.gif" alt="blush" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':kiss\')"><img src="http://mysite.com/smilies/kiss.gif" alt="kiss" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':lol\')"><img src="http://mysite.com/smilies/lol.gif" alt="lol" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':rofl\')"><img src="http://mysite.com/smilies/rofl.gif" alt="rofl" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':sad\')"><img src="http://mysite.com/smilies/sad.gif" alt="sad" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':smile\')"><img src="http://mysite.com/smilies/smile.gif" alt="smile" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':talker\')"><img src="http://mysite.com/smilies/talker.gif" alt="talker" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':wink\')"><img src="http://mysite.com/smilies/wink.gif" alt="wink" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':yawn\')"><img src="http://mysite.com/smilies/yawn.gif" alt="yawn" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':drunk\')"><img src="http://mysite.com/smilies/drunk.gif" alt="drunk" width="15" height="15" border="0"></a></td>');
    document.write('</tr>');
    document.write('</table>');
} else {
    document.write('&nbsp;');
}
</script></td>
  </tr>
</table>
</div>
<br />

If you've used a different hack be sure to correct your smilie codes and links

Thats it for that one you can save it..

Now open up the Comment Preview Template

Some where between the <head> and </head> tags insert the following 

<script type="text/javascript" language="javascript">
<!--
function insertSmilies (v) {
  document.forms[0].elements[5].focus();
  document.selection.createRange().text = v;
}

//-->
</script>

Next search for the following:

Comments:<br />

Now Replace that line with:

<div class="comments-head">
<table width="98%" border="0">
  <tr>
    <td width="15%">Comments:</td>
    <td width="85%" align="right"><script language="javascript">
if (document.selection) {
    document.write('<table border="0" cellspacing="0" cellpadding="1" width="170">');
    document.write('<tr>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':angry\')"><img src="http://mysite.com/smilies/angry.gif" alt="angry" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':biggrin\')"><img src="http://mysite.com/smilies/biggrin.gif" alt="biggrin" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':blush\')"><img src="http://mysite.com/smilies/blush.gif" alt="blush" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':kiss\')"><img src="http://mysite.com/smilies/kiss.gif" alt="kiss" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':lol\')"><img src="http://mysite.com/smilies/lol.gif" alt="lol" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':rofl\')"><img src="http://mysite.com/smilies/rofl.gif" alt="rofl" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':sad\')"><img src="http://mysite.com/smilies/sad.gif" alt="sad" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':smile\')"><img src="http://mysite.com/smilies/smile.gif" alt="smile" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':talker\')"><img src="http://mysite.com/smilies/talker.gif" alt="talker" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':wink\')"><img src="http://mysite.com/smilies/wink.gif" alt="wink" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':yawn\')"><img src="http://mysite.com/smilies/yawn.gif" alt="yawn" width="15" height="15" border="0"></a></td>');
    document.write('<td width="24"><a href="javascript:insertSmilies(\':drunk\')"><img src="http://mysite.com/smilies/drunk.gif" alt="drunk" width="15" height="15" border="0"></a></td>');
    document.write('</tr>');
    document.write('</table>');
} else {
    document.write('&nbsp;');
}
</script></td>
  </tr>
</table>
</div>
<br />

 

Now Save that and you should have something like this on your comments.