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.

[BadgerDog]

Installed ... thank you Lynne ..

Can anyone give me some idea as to where to look to fix the problem shown in the attached pic?

Thanks ..

Regards,
Badger

[Footman]

Originally Posted by BadgerDog

Installed ... thank you Lynne ..

Can anyone give me some idea as to where to look to fix the problem shown in the attached pic?

Thanks ..

Regards,
Badger

What's written in your editor2.css file? That's where the line up can change.

A simple fix is to change the number of smilies that are shown before adding the "more" link to a smaller number. That's in the ACP > Options > Message Posting Interface Options

[BadgerDog]

Originally Posted by Footman

What's written in your editor2.css file? That's where the line up can change.

A simple fix is to change the number of smilies that are shown before adding the "more" link to a smaller number. That's in the ACP > Options > Message Posting Interface Options

Thank you ... :up:

Will look at that ...

Regards,
Badger

[Lynne]

Originally Posted by Footman

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?

You should not be editing your editor.css file at all. You are only supposed to look at it and get the values in there.

[Footman]

Originally Posted by Lynne

You should not be editing your editor.css file at all. You are only supposed to look at it and get the values in there.

I didn't edit it. I was just showing you that your example is different from mine. Mine shows stylevars and no dimensions. I was wondering why if my if ACP settings say Smiliebox Total Smilies=20 and Smiliebox Smilies Per Row=10, does it not show up that way.

Here's my editor2.css...

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

At the moment this is the way my smilies appear, even with the settings in the options saying different.

[Lynne]

Originally Posted by Footman

I didn't edit it. I was just showing you that your example is different from mine. Mine shows stylevars and no dimensions. I was wondering why if my if ACP settings say Smiliebox Total Smilies=20 and Smiliebox Smilies Per Row=10, does it not show up that way.

At the moment this is the way my smilies appear, even with the settings in the options saying different.

If you look at the actual CSS sent to the browser, it doesn't have stylevars. But, you can get the values you need by looking up what you have your stylevar set to - so the height and width in editor.css are actually the stylevar "
editor_smiliebox_smiliesize" now (that stylevar wasn't around when I wrote this).

If you want two rows, you need to edit the editor2.css template to tell it you want two rows. The options for rows will not work in here - you need to manually edit it as others have posted how they have done so in here (I know CSS has been posted for at least 2 rows and 5 rows so far, and I think 3 rows also).

[Footman]

Originally Posted by Lynne

If you look at the actual CSS sent to the browser, it doesn't have stylevars. But, you can get the values you need by looking up what you have your stylevar set to - so the height and width in editor.css are actually the stylevar "
editor_smiliebox_smiliesize" now (that stylevar wasn't around when I wrote this).

If you want two rows, you need to edit the editor2.css template to tell it you want two rows. The options for rows will not work in here - you need to manually edit it as others have posted how they have done so in here (I know CSS has been posted for at least 2 rows and 5 rows so far, and I think 3 rows also).

Yep, I figured that you wrote this before they changed the stylevars and I understand how that fits in. I also found the other post with someone asking how to make 5 rows and your reply here:

https://vborg.vbsupport.ru/showpost....&postcount=188

I did the same thing in my editor2.css except I changed the "5" value to "2". So I do have 2 lines but only 4 smilies per line.

https://vborg.vbsupport.ru/showpost....&postcount=195

I suppose I'm just trying to figure out what each part of the code in each section changes. What changes the entire smilie box, what changes the size of the smilies, what changes the number of smilies in the box etc.

[Lynne]

If you disable this mod, do you get 20 smilies? Or only 8? And are the other smilies in the source code but just not shown?

[Footman]

Originally Posted by Lynne

If you disable this mod, do you get 20 smilies? Or only 8? And are the other smilies in the source code but just not shown?

I hadn't tried that so I just went in and disabled it. Now there's nothing but a big empty space (not even a more smilie link) in the quick reply box, which I suppose isn't totally unexpected. The advance editor and the edit post editor box show 2 rows of 10 smilies, as in the option settings BUT on the side and not the bottom, which effectively makes the text box rather small and pushed to the left.... again I assume that's not totally unexpected either.

After some playing around with the values I came up with a livable fix though. I set the stylvar value for width and height to 50. Then I made the following changes to my editor2.css.

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

This has given me a single row of smilies at the bottom of all editors and it fits within the 'advance editor' and the 'edit post' editor fine as seen in the attachments. Of course my quick editor box is a fluid full screen so there's a lot of space around the smilies which is fine.

I think I'm getting an understanding on what part of the code effects what part of the display a little more now. I changed something and all of a sudden the smilies were tiny, then another time they were cut in half vertically. Now I can't say for sure what's what now but it's working better now. I know I don't have the two rows of 10, but that was more of a curiosity as to why it wasn't working when I thought I set it all correctly to display it as such.

I thought initially the settings would be relative to the dimensions of the editor box, but I lost that idea when I saw the smilies run off outside the box margins.

[ShackMaster]

Wow... this is unbelievable. I just upgraded to vB4, which was a nightmare in itself. Now the very first mod I want to do, which seems like it would be so very simple has taken two hours of my time and I still have nothing to show for it.

Lynne... I do not mean to come off sounding like I am dissing your mod here, but I simply cannot figure it out. Information is very disorganized and scattered all about the thread. Your instructions are extremely confusing.

I am now understanding the very reason I did not upgrade to vB4 already. It is literally a mess. It is an act of congress to make what should be a minor modification.

Enough whining...

Can anyone help me with the proper edits to get my smilies at the proper "original" size without them being cut off or shrunk down... and have about 25 smilies each on 4 lines... AND it not cause my message posting window to move to the right of the editor box on the Go Advanced page?

I would truly appreciate the help. Thanks!