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.

[synseal]

Originally Posted by COL NIL SATIS

does this work on 4.0.3????

Works ok for me on 4.0.3

[Mastergumble]

Working here

[Footman]

I've SORT OF got it working and wondering if someone can help me fix a couple of issues, or at least tell where I messed up.

In the quick reply box the smilies and the [more] link are partially below the text box as seen in the attachment. Any idea why and how to fix it?

Also it seems the smilies chosen for display rotate with each refresh. Am I wrong or shoud/could they be set to display certain smilies all the time?

[Lynne]

Originally Posted by Footman

In the quick reply box the smilies and the [more] link are partially below the text box as seen in the attachment. Any idea why and how to fix it?

Sorry, but it's near impossible to figure out css from an image. Take a look at the page in a default style, then in your style. Use something like firebug, for firefox, to compare the css for for that area in each style and see what the difference is.

Originally Posted by Footman

Also it seems the smilies chosen for display rotate with each refresh. Am I wrong or shoud/could they be set to display certain smilies all the time?

In your smilie manager you may set the order of the smilies.

[Footman]

Originally Posted by Lynne

Sorry, but it's near impossible to figure out css from an image. Take a look at the page in a default style, then in your style. Use something like firebug, for firefox, to compare the css for for that area in each style and see what the difference is.

Thanks Lynne, I figured it would be after I posted it. So I went in and started changing the values here and there to see what would happen. I seem to have gotten it to look fairly presentable with the following changes to editor2.css.

@charset "UTF-8";
/* editor2.css */
.editor_smiliebox {
clear:both;
height:{vb:math 2*{vb:math 40+2*2}}px;
position: relative;
float:left;
width: 100%;
}
.editor_smiliebox ul.smiliebox {
height:{vb:math 70+2*2}px;
margin:0 auto;
width:{vb:math 100+{vb:raw vboptions.smtotal}*{vb:math 100+2*2}}px;
}
.editor_textbox_smilie {
margin-right:0;
}

Although the smilies are too spaced out for my taste. I'd like to display them side by side with only a small space between them. I'm assuming the changes I made changed the size of the area the smilies display in and didn't move the smilies per se. I wish I had more of an understanding of what part of the code does what though.

Originally Posted by Lynne

In your smilie manager you may set the order of the smilies.

Thanks for that. I'm still a little confused about the "order" numbers I see in certain parts of the admin. Not really sure what they refer to. I'll play with these numbers and see what happens.

[BozzaJos]

Originally Posted by Mastergumble

Nice, Lynne is any way to make the same for CMS Comments?

I was trying to find what to add but currently stuck with it.

Originally Posted by Lynne

Just add 'vbcms' to the array.

Dear Lynne,

Thank you for creating such a quality mod!
I do have the same question as Mastergumble, about the CMS Comments. Unfortunately, I don't really understand your solution. Could you please explain it a bit more detailed?

Thanks!

[Mastergumble]

Give me a second

[Mastergumble]

Here it goes, hope it work as you want

[Mastergumble]

Originally Posted by Mastergumble

Here it goes, hope it work as you want

For mistake the first uploaded was the incorrect one, its fixed now.

[Lynne]

I updated the first post with the addition of 'vbcms' and 'editpost'.