New Posting Features - Move smilies to below text area (and optionally add to Quick Reply)

NOTE: This will break your 4.1.4 Quick Reply if you have smilies enabled there unless you do the edit below.

This moves the smilie box to below the text area when posting within threads, blogs, groups, PMs, and cms when using the Advanced Editor (new item or advanced reply). This is done using just CSS. The plugin simply appends the new CSS file to the editor.css file link in the page. It can also make the smiliebox show on the showthread page below the text box in Quick Reply if you do the Optional Edit below.

lynne_smilies_below.png

This mod is supported for the default style only as trying to debug other's site CSS issues is not easy.

This has been tested in firefox, Safari and IE7.


Version History:
1.0 2009-12-06: initial release by Lynne at vbulletin.org (pre 4.0.1)
1.1 2010-01-13: fixed issues with 4.0.1; made it move the smilies to the bottom for sending a new PM ('blog'), and for posting a New Discussion ('group') (4.0.1)
1.2 2010-01-23: fixed it to work if you store your css in the filesystem (4.0.1)
1.3 2010-05-05: added fields so it will work with vbcms and editpost (4.0.1)
1.4 2010-10-23: Modified CSS to use new stylevars - you do NOT need to upgrade to this version if your CSS is working just fine for you! (4.0.8 - see note below for 4.1PL1)


To install:

1. Import product-lynne_smilies_below.xml

2. Go to Settings > Options > Message Posting Interface Options > Put smilie box below textarea > Yes

3. Go to Settings > Options > Message Posting Interface Options and make sure you set these two settings:
Smiliebox Total Smilies - this is the total number of smilies you want to show
Smiliebox Rows (smilies below textarea) - this is the number of rows of smilies you would like

NOTE: The Total Smilies must be evenly divisible by the Rows, ie. you can't set the Total to 17 and have 2 Rows as that won't work.

4. OPTIONAL - If you also want the smiliebox to show on the showthread page under the Quick Reply, then you must do the following:
a. Go to Settings > Options > Message Posting Interface Options > Add smiliebox below Quick Reply on showthread page > Yes (Note that the above options, Put smilie box below textarea must also be set to Yes)
b. Make the following template edit in the template "showthread_quickreply".
Find the following:

        <div class="editor_textbox quickreply">
            <vb:if condition="$show['qr_require_click']">
                <textarea name="message" id="{vb:raw editorid}_textarea" rows="10" cols="80" dir="{vb:stylevar textdirection}" disabled="disabled">{vb:raw click_quick_reply_icon}</textarea>
            <vb:else />
                <textarea name="message" id="{vb:raw editorid}_textarea" rows="10" cols="80" dir="{vb:stylevar textdirection}"></textarea>
            </vb:if>
        </div>    
        
    </div>
</div>

Add in the following line among the bottom divs (for 4.0.8):

        </div>    
        <vb:if condition="($vbulletin->options['lynne_sb_below'] AND $vbulletin->options['lynne_sb_below_2']) AND THIS_SCRIPT == 'showthread'"><div class="editor_smiliebox">{vb:raw smiliebox}</div></vb:if>
    </div>
</div>

OR Add in the following line among the bottom divs (for 4.1.0 PL1):

        </div>    
        <vb:if  condition="($vboptions['lynne_sb_below'] AND  $vboptions['lynne_sb_below_2']) AND THIS_SCRIPT ==  'showthread'"><div class="editor_smiliebox">{vb:raw  smiliebox}</div></vb:if>
    </div>
</div>

OR in 4.1.10 forward, find this code in the SHOWTHREAD template:

		<div class="blockrow">
			{vb:raw messagearea}
		</div>

Add directly below there:

        <vb:if  condition="($vboptions['lynne_sb_below'] AND  $vboptions['lynne_sb_below_2']) AND THIS_SCRIPT ==  'showthread'"><div class="editor_smiliebox">{vb:raw  smiliebox}</div></vb:if>

To get this to work with 4.1.4 (and later) Quick Reply:
Edit the plugin "Add smilies to Quick Reply also" and remove, or comment out, the line:

PHP Code:

    $editor_template_name = 'showthread_quickreply'; 


To uninstall:

1. Uninstall "Move smilies below textarea"
2. If you added the smiliebox to the showthread.php page in the Quick Reply, then remove the template edit done above.

This will not work for pre-beta 5 vB4.

[Xencored]

Lynne do you have blogs?
If so click Blog settings on the blog page and if you see there there is a editor box with the simile's still on the right

[wd4x4]

Great Mod Lynne :up:

Blog smilies are under editor on mine no other changes where done.

[cloferba]

this dont work when a mod is giving an infraction...

i see smiles on the right..not under

[Lynne]

I didn't make it to cover the Infraction page:

This moves the smilie box to below the text area when posting within threads, blogs, groups, PMs, and cms when using the Advanced Editor (new item or advanced reply).

I would guess you can just edit the plugins though to include that page.

[cloferba]

well...its so difficult to show smilies on more than 1 line... i dont know why its so difficult and also they are bad showed

i ask something:
why you must specify the size of smilies...instead of using

{vb:stylevar editor_smiliebox_smiliesize}

variable?

[Lynne]

Originally Posted by cloferba

well...its so difficult to show smilies on more than 1 line... i dont know why its so difficult and also they are bad showed

i ask something:
why you must specify the size of smilies...instead of using

{vb:stylevar editor_smiliebox_smiliesize}

variable?

This mod was written before that stylevar was available and I haven't updated that part of it. You may do so in yours.

[cloferba]

thanks lynne, i wasnt sure

[Brandon Sheley]

any chance this could be updated to 4.0.8
or would step 3 still contain edits?

[kf4eok]

Here is what I found that worked for me with vb 4.0.8 I have 232 smiles. Let me know if something looks wrong to anyone with what I have done.
I just imported the product-lynne_smilies_below.xml and I did no edits other than to the editor2.css
I hope that this will help someone
Here is my editor2.css

@charset "UTF-8";
/* editor2.css */
.editor_smiliebox {
clear:both;
height:{vb:math 8*{vb:math 21+2*2}}px;
position: relative;
float:left;
width: 100%;
}
{vb:stylevar editor_smiliebox_smiliesize}.editor_textbox_smilie {
margin-right:0;
}

[Lynne]

Originally Posted by Loco.M

any chance this could be updated to 4.0.8
or would step 3 still contain edits?

OK, I think I got this done right. I've update the CSS to include the new stylevar editor_smiliebox_smiliesize and I added a new option on the Message Posting Interface Options page called Smiliebox Rows (smilies below textarea). This is the number of rows you want to show for your smilies. I think I got all the math correct here. You need to enter the Smiliebox Total Smilies also. And these must be evenly divisible or you won't get it to look correct.

If you change the Smiliebox Rows (smilies below textarea), you MUST then rebuild your style to get this option to work in your CSS!!!

If your CSS already works correctly, there is no need to upgrade your mod. If you choose to do so anyway, then I'd suggest you keep a copy of the old CSS just in case this new method doesn't work for you.