• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

The Happy Place - Clickable Smilies Under Editor Control

inph

Active member
#1
The Happy Place -- Clickable Smilies Under Editor Control
* 1.0 - 20/11/2010

* Tested on:
XenForo 1.0.0 Beta 3
Firefox 3/4
Chrome
IE8

* Description:

This addon adds an expandable clickable smilie box beneath the tinyMCE editor control.
If you want to know more I'd suggest you read the addon request Smilies Under type box.

* Test Board Demo (registration required, no email verification necessary):

http://doesnotexist.net/xf/

* Screenshot:

Happy_place_preview.png
(thanks Shelley for the updated preview with uniform smilies)

The "done at 7am" preview is: TheHappyPlace_1.0.png

----------------
* Changelog *
----------------

1.0 - 20/11/2010 - Initial Release
2.0 - 01/02/2011 - Update by Kier, see revised instructions at the end of this post.
2.0.1 - 02/02/2011 - Minor CSS fix from Kier
3.0.0 - 22/02/2011 - Update by Kier, no need to edit templates any more!

-------------
* Credits *
-------------

Shelley - Original idea, mock ups, testing and styling
Iuv - Styling, design ideas and the addon name
inph - Coding and rest of the mess

* Donations Welcome:
http://inph.net/donate/xenforo/

----------------


Seeing as a lot of people have been waiting for this to be updated since Beta 6, I figured I'd give inph a hand and rewrite The Happy Place using slightly more standard XenForo techniques, which will hopefully give him a framework to continue development.

Version 2 is now attached to this thread, and is compatible with the latest versions of XenForo including the 1.0.0 Release Candidates. It includes some slight alterations, such as the use of the new .xfSlideIn() function for an improved appearance of the smilie box sliding into place.

See the enclosed README version 2.txt for revised installation instructions.

Kier

----------------

February 22, 2011

I have just updated this plugin again to make better use of XenForo's plugin architecture. Functionally, The Happy Place is the same as it was at version 2, but now there is no need to edit any templates, as The Happy Place can be applied entirely through XenForo's template hooks system.

Installation now involves uploading a TheHappyPlace directory to your XenForo library directory, and importing the new add-on XML. That's it.

Make sure you revert any templates you previously customized for The Happy Place, or version 3 won't work.

Kier
 

Attachments

Shelley

Well-known member
#2
Excellent add-on which I had the privilege of testing before hand. This add-on seriously does reduce the amount of time when submitting smilies so it's a real nice time saver so user-friendly. Very nice job inph, :)
 

Shelley

Well-known member
#10
Thanks. Installed.
I uploaded an extra Shelley'a smilies, how to make the smylies show up?
At the moment you'll have to upload them into the \styles\default\xenforo\smilies folder. And then venture into the admincp >> Smilies and click Add New Smilies.

Upon entering the Create new smilie page insert a title, text replacement and the image path.
 

Weiyan

Well-known member
#11
At the moment you'll have to upload them into the \styles\default\xenforo\smilies folder. And then venture into the admincp >> Smilies and click Add New Smilies.

Upon entering the Create new smilie page insert a title, text replacement and the image path.
Thank you. I think I will add smilies when someone invent an easier method.
 

Brogan

XenForo moderator
Staff member
#12
Nice work.

If you edit the message editor css you can remove the small gap at the bottom corners of the editor and the top corners of the smilie box to make them fit seamlessly together.
Code:
#ctrl_message_html_tbl {
border-bottom-left-radius: 0px 0px;
border-bottom-right-radius: 0px 0px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
}

Also, if you want the radii to match then you either need to change the message editor top corners to 6px or the bottom corners of the smilie box to 3px.
HTML:
#happyplace {

background: #F0F0EE;
border: none;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
 

ArnyVee

Well-known member
#16
I think that the "smilies" text on the tab may need a little smiley in front of it (a smiley pointing at the text "smilies" would be good ;) ) in order to bring some attention to it.

Until then, I'll just setup a little thread showing how to go about adding smilies :)