Hey guys, so in todays coding world we usually try and stay away from using iFrames. Though sometimes it is ok to use them, such as twitter and facebook both use the iframes for their ADK (plugins). In my eyes I personally like the smiley pop out instead of the smiley iframe in normal reply (not quick reply). 
 This code is easy and sometimes we do need to do some tweaking. So follow along with us, this is for both phpbb2 and punbb. First we will need to go to our templates, these are located in ACP>DISPLAY>TEMPLATES.

  We will need to click on the POST AND PRIVATE MESSAGES templates and find the POSTING_BODY template. Once you have this open we can start editing it. On top of the template there is a search, paste this line in the search and click the search (do not click the ENTER key).

Search for 

Code:

<div id="text_editor_controls">

  Within this section find any where you would like to place this snippet of code, I usually look for a serperator which looks like this

Code:

<img src="{PATH_IMG_FA}wysiwyg/separator.png" style="vertical-align:middle" /> 

Then after that we will place this next code right after it:

 

Code:

<button class="button2" type="button" style="width:20px;" onclick="selectWysiwyg(this, 'sel_smilies');">
<img alt="" src="http://2img.net/i/fa/i/smiles/icon_smile.gif"/>
</button>


 Great you are halfway there. Next we will search for the ID of smiley-box
Once you find the code that looks like this
[hc = punBB Snippet]

Code:

<div id="smiley-box">
         {L_SMILIES_PREVIEW_NEW}
      </div>


[/hc]

[hc = phpBB2 Snippet]

Code:

<td align="center" valign="middle">
               <table width="100" border="0" cellspacing="0" cellpadding="5">
                  <tr align="center">
                     <td class="gensmall" colspan="{S_SMILIES_COLSPAN}">
                     {L_SMILIES_PREVIEW}
                     </td>
                  </tr>
               </table>
            </td>
         </tr>


[/hc]

We are going to delete that entire bit, and replace it with this next snippet of coding.

Code:

<div id="sel_smilies" class="select" collapsed="true" increment="10" pageincrement="225" maxpos="0" curpos="0" style="visibility: hidden; max-height: 200px; max-width: 250px; width: 250px; padding: 0px 1em; overflow: auto;"></div>

Then Click save and you are all done! Make sure you click the Green Plus sign to add your modified template. Go ahead and test it out.