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]

Hey thanks lynne but i dont seem to have this option after importing

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

4.0.3 patch level 1

[Lynne]

Originally Posted by Animemike

Hey thanks lynne but i dont seem to have this option after importing

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

4.0.3 patch level 1

Make sure you are looking under the correct option cuz it's there right below Smilie Menu Total Smilies

[Footman]

Hi Lynne,

I've just noticed an alignment issue. The smilies are at the bottom of the quick reply box and the advance reply box. But they're still on the right side when using the "edit post."

-Curious as to why? Does it have something to do with the changes I made to editor2.css below?
-I've also found that the smilies are spaced a bit too far away from each other. I'm assuming that variable is in the changes below as well. Do you have an idea what I can change to display them side by side no matter their individual size?

@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;
}

[Xencored]

Originally Posted by Lynne

Make sure you are looking under the correct option cuz it's there right below Smilie Menu Total Smilies

Lmfao now i feel a idiot sorry works great! thanks

[Lynne]

Originally Posted by Footman

Hi Lynne,

I've just noticed an alignment issue. The smilies are at the bottom of the quick reply box and the advance reply box. But they're still on the right side when using the "edit post."

-Curious as to why? Does it have something to do with the changes I made to editor2.css below?
-I've also found that the smilies are spaced a bit too far away from each other. I'm assuming that variable is in the changes below as well. Do you have an idea what I can change to display them side by side no matter their individual size?

On my totally default style, the are centered on the editpost.php page just as they should be. You didn't modify the classes the way I outlined to do in my first post, so I would guess the math went in such a way that it is giving you the problem you are seeing.

[Footman]

Originally Posted by Lynne

On my totally default style, the are centered on the editpost.php page just as they should be. You didn't modify the classes the way I outlined to do in my first post, so I would guess the math went in such a way that it is giving you the problem you are seeing.

I had to change some of the values as some of my smilies are bigger than the usual ones and only a portion of them were visible.

I guess I'll keep changing a little here and there till I come up with something that works.

[Xencored]

Originally Posted by Lynne

You would have to increase the height (by 2, if for 2 rows) and decrease the width (by 2, if for 2 rows) for the ".editor_smiliebox ul.smiliebox" I've never tried that, but it should work.

.editor_smiliebox ul.smiliebox {
height:{vb:math 2*{vb:math 21+2*2}}px;
margin:0 auto;
width:{vb:math 20+.5*{vb:raw vboptions.smtotal}*{vb:math 20+2*2}}px;
}

Hi lynne what bit did you change there to get more lines
Say i want 4 or 5 lines of smiles under the editor

Thanks

Edit ok i got it like this but its pushing the box to the right and cutting the bottom smilies in half

[Lynne]

.editor_smiliebox {
height:{vb:math 5*{vb:math 21+2*2}}px;
}
.editor_smiliebox ul.smiliebox {
height:{vb:math 5*{vb:math 21+2*2}}px;
width:{vb:math 20+.2*{vb:raw vboptions.smtotal}*{vb:math 20+2*2}}px;
}

[Xencored]

Originally Posted by Lynne

.editor_smiliebox {
height:{vb:math 5*{vb:math 21+2*2}}px;
}
.editor_smiliebox ul.smiliebox {
height:{vb:math 5*{vb:math 21+2*2}}px;
width:{vb:math 20+.2*{vb:raw vboptions.smtotal}*{vb:math 20+2*2}}px;
}

Thanks working

[Footman]

Originally Posted by Lynne

On my totally default style, the are centered on the editpost.php page just as they should be. You didn't modify the classes the way I outlined to do in my first post, so I would guess the math went in such a way that it is giving you the problem you are seeing.

The newest version fixed the alignment issue I had in the 'edit post' page. I've changed the editor2.css to more closely match your description. My only difference is I use 50 instead of 21 since when I use 21 some of my larger smilies get cut off.

New issue... 2 centered lines of 4 smilies per line in all post boxes which is good, BUT in the options settings I have 20 set as the total smilies to show in box before the 'more' link and 10 per line. That's not happening

I'm guessing all my issues might be due the style I'm using. My editor.css file for .editor_smiliebox ul.smiliebox li looks like this. There's only one value to change for both width and height in the stylevar. In your example I can change each one in the editor.css. Should I just change that whole section away from stylevars and to those settings?

.editor_smiliebox ul.smiliebox li {
	float:{vb:stylevar left};
	height:{vb:stylevar editor_smiliebox_smiliesize};
	width:{vb:stylevar editor_smiliebox_smiliesize};
	margin:2px;
	overflow:hidden;
	position:relative;
	text-align:center;