Use wp core smilies
-
Hi is it possible to use the wp core smilies ?
or add some ?
-
How to add New wp smile for quick chat :
1 download 2 mini plugins >>
– https://github.com/avryl/new-smileys
– https://www.ads-software.com/support/plugin/wp-grins-sslactivate the 2 the go to Discussion Settings page.
Look for ‘Smilies’ and check boxes as desired. (Comments are activated by default)okey there we have the new smilies for all the comment box, si now :
NOW :
1 : open Quick-chat.php
line 71 : change the array : public $smilies = array(
by that :public $smilies = array( ':vert:' => 'mrgreen', ':arrow:' => 'arrow', '=8D' => 'twisted', ':evil:' => 'evil', 'N-D' => 'evilgrin', '%i-)' => 'idea', 'o.o' => 'oops', 'S-)' => 'rolleyes', ':lol:' => 'lol', 'xD' => 'lol', 'XD' => 'lol', ':cool:' => 'cool', '8-)' => 'cool', ':sad:' => 'sad', ':(' => 'sad', ':-(' => 'sad', ':smile:' => 'smile', ':)' => 'smile', ':-)' => 'smile', ':???:' => 'confused', ':-?' => 'confused', ':grin:' => 'bigsmile', ':D' => 'bigsmile', ':-D' => 'bigsmile', ':razz:' => 'tongue', ':p' => 'tongue', ':P' => 'tongue', ':-p' => 'tongue', ':-P' => 'tongue', ':eek:' => 'surprised', ':shock:' => 'surprised', ':o' => 'surprised', ':-o' => 'surprised', ':O' => 'surprised', ':-O' => 'surprised', '8O' => 'surprised', '8-O' => 'surprised', ':-X' => 'angry', ':mad:' => 'angry', ':x' => 'angry', ':-x' => 'angry', ':X' => 'angry', '>:(' => 'angry', '>:(' => 'angry', ':neutral:' => 'neutral', ':|' => 'neutral', ':-|' => 'neutral', ':wink:' => 'wink', ';)' => 'wink', ';-)' => 'wink', '%!' => 'exclaim', '%?' => 'question', ':heart:' => 'heart', '<3' => 'heart', '<3' => 'heart', '>-I' => 'martini', ':martini:' => 'martini', '>-I' => 'martini', ':whiterussian:' => 'whiterussian', '|_|' => 'whiterussian', ':burrito:' => 'burrito', 'O_o' => 'mindblown', 'o_O' => 'mindblown-alt', '(w)' => 'wordpress', '(W)' => 'wordpress', ':etoile:' => 'star', ':developer:' => 'developer', '=ours=' => 'bear', '^^’' => 'blush', 'G-G' => 'blush', '^^’' => 'blush', '^^‘' => 'blush', ':cry:' => 'cry', ':’(' => 'cry', ':\'(' => 'cry', ':‘(' => 'cry', ':’(' => 'cry', ':-/' => 'uneasy', ':/' => 'uneasy', ':-\\' => 'uneasy', ':\\' => 'uneasy', '/:I' => 'facepalm', '=0-0=' => 'kitten' );
2 : Open New-smileys.php (plugin new smiles)
Change the array $wpsmiliestrans = array(
with this content so it look like that :$wpsmiliestrans = array( ':vert:' => 'mrgreen', ':arrow:' => 'arrow', '=8D' => 'twisted', ':evil:' => 'evil', '>:D' => 'evilgrin', 'N-D' => 'evilgrin', '%i-)' => 'idea', 'o.o' => 'oops', 'S-)' => 'rolleyes', ':lol:' => 'lol', 'xD' => 'lol', 'XD' => 'lol', // ':cool:' => 'cool', '8-)' => 'cool', // ':sad:' => 'sad', ':(' => 'sad', ':-(' => 'sad', // ':)' => 'smile', // ':smile:' => 'smile', ':-)' => 'smile', ':???:' => 'confused', ':?' => 'confused', ':-?' => 'confused', // ':grin:' => 'bigsmile', ':D' => 'bigsmile', ':-D' => 'bigsmile', // ':razz:' => 'tongue', ':p' => 'tongue', ':P' => 'tongue', ':-p' => 'tongue', ':-P' => 'tongue', // ':eek:' => 'surprised', // ':shock:' => 'surprised', ':o' => 'surprised', ':-o' => 'surprised', ':O' => 'surprised', ':-O' => 'surprised', '8O' => 'surprised', '8-O' => 'surprised', // ':-X' => 'angry', // ':mad:' => 'angry', // ':x' => 'angry', // ':-x' => 'angry', ':X' => 'angry', // '>:(' => 'angry', // '>:(' => 'angry', ':neutral:' => 'neutral', ':|' => 'neutral', ':-|' => 'neutral', ':wink:' => 'wink', ';)' => 'wink', ';-)' => 'wink', '%!' => 'exclaim', '%?' => 'question', ':heart:' => 'heart', '<3' => 'heart', '<3' => 'heart', '>-I' => 'martini', ':martini:' => 'martini', '>-I' => 'martini', ':whiterussian:' => 'whiterussian', '|_|' => 'whiterussian', ':burrito:' => 'burrito', 'O_o' => 'mindblown', 'o_O' => 'mindblown-alt', '(w)' => 'wordpress', '(W)' => 'wordpress', ':etoile:' => 'star', ':developer:' => 'developer', '=ours=' => 'bear', //'^^’' => 'blush', 'G-G' => 'blush', //'^^’' => 'blush', //'^^‘' => 'blush', ':cry:' => 'cry', ':’(' => 'cry', ':\'(' => 'cry', ':‘(' => 'cry', ':’(' => 'cry', ':-/' => 'uneasy', // ':/' => 'uneasy', // ':-\\' => 'uneasy', // ':\\' => 'uneasy', '/:I' => 'facepalm', '=0-0=' => 'kitten' ); }
3 : now to display them in the chat open quick-chat.css
and removediv.quick-chat-smile{margin:0; padding: 0; width: 16px; height: 16px; background: url(../img/quick-chat-smile.png) no-repeat top left; display: -moz-inline-stack; display:inline-block;} div.quick-chat-smile-angel{background-position: 0 0;} div.quick-chat-smile-confused{background-position: 0 -17px;} div.quick-chat-smile-cool{background-position: 0 -34px;} div.quick-chat-smile-crying{background-position: 0 -51px;} div.quick-chat-smile-devilish{background-position: 0 -68px;} div.quick-chat-smile-eek{background-position: 0 -85px;} div.quick-chat-smile-error{background-position: 0 -102px;} div.quick-chat-smile-favorite{background-position: 0 -119px;} div.quick-chat-smile-glasses{background-position: 0 -136px;} div.quick-chat-smile-grin{background-position: 0 -153px;} div.quick-chat-smile-help{background-position: 0 -170px;} div.quick-chat-smile-idea{background-position: 0 -187px;} div.quick-chat-smile-important{background-position: 0 -204px;} div.quick-chat-smile-kiss{background-position: 0 -221px;} div.quick-chat-smile-monkey{background-position: 0 -238px;} div.quick-chat-smile-plain{background-position: 0 -255px;} div.quick-chat-smile-razz{background-position: 0 -272px;} div.quick-chat-smile-sad{background-position: 0 -289px;} div.quick-chat-smile-smile-big{background-position: 0 -306px;} div.quick-chat-smile-smile{background-position: 0 -323px;} div.quick-chat-smile-surprise{background-position: 0 -340px;} div.quick-chat-smile-warning{background-position: 0 -357px;} div.quick-chat-smile-wink{background-position: 0 -374px;}
and replace it by that :
div.quick-chat-smile{margin:0; padding: 0; width: 17px; height: 16px; display:inline-block; background-repeat:no-repeat;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} div.quick-chat-smile-smile { background-image: url('../img/default/ie/smile.png'); background-image: url('../img/default/smile.svg'), none; } div.quick-chat-smile-martini { background-image: url('../img/default/ie/martini.png'); background-image: url('../img/default/martini.svg'), none; } div.quick-chat-smile-lol { background-image: url('../img/default/ie/lol.png'); background-image: url('../img/default/lol.svg'), none; } div.quick-chat-smile-blush { background-image: url('../img/default/ie/blush.png'); background-image: url('../img/default/blush.svg'), none; } div.quick-chat-smile-mindblown { background-image: url('../img/default/ie/mindblown.png'); background-image: url('../img/default/mindblown.svg'), none; } div.quick-chat-smile-evilgrin { background-image: url('../img/default/ie/evilgrin.png'); background-image: url('../img/default/evilgrin.svg'), none; } div.quick-chat-smile-angry { background-image: url('../img/default/ie/angry.png'); background-image: url('../img/default/angry.svg'), none; } div.quick-chat-smile-kitten { background-image: url('../img/default/ie/kitten.png'); background-image: url('../img/default/kitten.svg'), none; } div.quick-chat-smile-heart { background-image: url('../img/default/ie/heart.png'); background-image: url('../img/default/heart.svg'), none; } div.quick-chat-smile-wink { background-image: url('../img/default/ie/wink.png'); background-image: url('../img/default/wink.svg'), none; } div.quick-chat-smile-cry { background-image: url('../img/default/ie/cry.png'); background-image: url('../img/default/cry.svg'), none; } div.quick-chat-smile-neutral { background-image: url('../img/default/ie/neutral.png'); background-image: url('../img/default/neutral.svg'), none; } div.quick-chat-smile-twisted { background-image: url('../img/default/ie/twisted.png'); background-image: url('../img/default/twisted.svg'), none; } div.quick-chat-smile-star { background-image: url('../img/default/ie/star.png'); background-image: url('../img/default/star.svg'), none; } div.quick-chat-smile-surprised { background-image: url('../img/default/ie/surprised.png'); background-image: url('../img/default/surprised.svg'), none; } div.quick-chat-smile-sad { background-image: url('../img/default/ie/sad.png'); background-image: url('../img/default/sad.svg'), none; } div.quick-chat-smile-rolleyes { background-image: url('../img/default/ie/rolleyes.png'); background-image: url('../img/default/rolleyes.svg'), none; } div.quick-chat-smile-tongue { background-image: url('../img/default/ie/tongue.png'); background-image: url('../img/default/tongue.svg'), none; } div.quick-chat-smile-oops { background-image: url('../img/default/ie/oops.png'); background-image: url('../img/default/oops.svg'), none; } div.quick-chat-smile-mrgreen { background-image: url('../img/default/ie/mrgreen.png'); background-image: url('../img/default/mrgreen.svg'), none; } div.quick-chat-smile-idea { background-image: url('../img/default/ie/idea.png'); background-image: url('../img/default/idea.svg'), none; } div.quick-chat-smile-bigsmile { background-image: url('../img/default/ie/bigsmile.png'); background-image: url('../img/default/bigsmile.svg'), none; } div.quick-chat-smile-facepalm { background-image: url('../img/default/ie/facepalm.png'); background-image: url('../img/default/facepalm.svg'), none; width: 1.4em; } div.quick-chat-smile-evil { background-image: url('../img/default/ie/evil.png'); background-image: url('../img/default/evil.svg'), none; } div.quick-chat-smile-cool { background-image: url('../img/default/ie/cool.png'); background-image: url('../img/default/cool.svg'), none; } div.quick-chat-smile-bear { background-image: url('../img/default/ie/bear.png'); background-image: url('../img/default/bear.svg'), none; } div.quick-chat-smile-uneasy { background-image: url('../img/default/ie/uneasy.png'); background-image: url('../img/default/uneasy.svg'), none; } div.quick-chat-smile-confused { background-image: url('../img/default/ie/confused.png'); background-image: url('../img/default/confused.svg'), none; } div.quick-chat-smile-question { background-image: url('../img/default/ie/question.png'); background-image: url('../img/default/question.svg'), none; } div.quick-chat-smile-exclaim { background-image: url('../img/default/ie/exclaim.png'); background-image: url('../img/default/exclaim.svg'), none; }
then copy the folder ‘default’ from the plugin new smileys in ‘quick-chat/img’
4 : display the smilies :
open wp-grins.jsand replace all the script with :
jQuery(document).ready(function() { var $j = jQuery; $j.wpgrins = { grin: function(tag) { var myField; var value = ''; if ($j('#content:input').length > 0) { myField = $j('#content:input'); value = $j("#content:input").attr("value"); if ($j('#postdivrich') && typeof tinyMCE != 'undefined' && (!$j('#edButtons') || $j('#quicktags')[0].style.display == 'none')) { tinyMCE.execCommand('mceInsertContent', false, ' ' + tag + ' '); tinyMCE.execCommand('mceRepaint'); return; } } else if ($j('#comment:input').length > 0) { myField = $j('#comment:input'); value = $j("#comment:input").attr("value"); } else if ($j('#posttext:input').length > 0) { myField = $j('#posttext:input'); value = $j("#posttext:input").attr("value"); } else if ($j('.quick-chat-message:input').length > 0) { myField = $j('.quick-chat-message:input'); value = $j(".quick-chat-message:input").attr("value"); } else if ($j('#bbp_topic_content:input').length > 0) { myField = $j('#bbp_topic_content:input'); value = $j("#bbp_topic_content:input").attr("value"); } else if ($j('#bbp_reply_content:input').length > 0) { myField = $j('#bbp_reply_content:input'); value = $j("#bbp_reply_content:input").attr("value"); } else { return false; } if (value == undefined) { value = ''; } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = ' ' + tag + ' '; myField.focus(); } else if (myField[0].selectionStart || myField[0].selectionStart == '0') { var startPos = myField[0].selectionStart; var endPos = myField[0].selectionEnd; var cursorPos = endPos; myField.attr("value", value.substring(0, startPos) + ' ' + tag + ' ' + value.substring(endPos, value.length)); cursorPos += tag.length + 2; myField.focus(); myField[0].selectionStart = cursorPos; myField[0].selectionEnd = cursorPos; } else { myField.attr("value", value + ' ' + tag + ' '); myField.focus(); } }, init: function() { var s = {}; s.response = 'ajax-response'; s.type = "POST"; s.data = $j.extend(s.data, {action: 'grins'}); s.global = false; s.url = wpgrinsssl.Ajax_Url; s.timeout = 30000; s.success = function(r) { var grinsDiv = '<div id="wp_grins">'+r+'</div>'; if ($j('#postdiv').length > 0) { var type = 'after'; var node = $j('#postdiv'); } else if ($j('#postdivrich').length > 0) { var type = 'after'; var node = $j('#postdivrich'); } else if ($j('#comment').length > 0) { var type = 'before'; var node = $j('#comment'); } else if ($j('#posttext').length > 0) { var type = 'before'; var node = $j('#posttext'); } else if ($j('.quick-chat-message').length > 0) { var type = 'after'; var node = $j('.quick-chat-message'); } else if ($j('#bbp_topic_content').length > 0) { var type = 'before'; var node = $j('#bbp_topic_content'); } else if ($j('#bbp_reply_content').length > 0) { var type = 'before'; var node = $j('#bbp_reply_content'); } else { return; } switch (type) { case 'after': node.after(grinsDiv); $j("#wp_grins").css("paddingTop", "5px"); break; case 'before': node.before(grinsDiv); break; } } //end success $j.ajax(s); } }; $j.wpgrins.init(); });
5 : LAST thing to do is to activate the enqueue of the script anywhere to display the smilies
open wp-grins.php
in the function add_scripts_frontend() {is your chat is in the home page :
if (is_front_page()) {
$this->add_scripts();
}else if you want all the pages have the capacity to display th smilies :
$this->add_scripts();
Cheers !
That’s awesome you figured out and shared how to do that!
If I’m already using smilies that I like from another plugin everywhere else in my site, can I just replace the Quick Chat CSS like you have above with the urls I want if I rename my smileys the same name as the Quick Chat smiley names?
Hy i’m happy to see that my little trick is used by some one ^^
for the css you are right, for the name you need to play with the array of quick-chat.php :
exemple for : ‘:vert:’ => ‘mrgreen’,
here the name of the file to display is : mrgreenso you can change all the name like you whant and chage it too in the css of quick chat with your news url path
me i chose to put the smilie in the same directory of quick chat simply because i don’t like a plugin that link content outside his directory ??
what smilies plugin do you use ? i chose for me to use the new www.ads-software.com smilies because they are in sgv (verctor = no pixellisation) and it work with non supported browser like ie : it display png equivalent
https://bayimg.com/dAhHoaAgh (with my own css)
I use WP Mona Lisa Smiles (or something like that) I have changed the urls in this plugin and now my chat shows my animated smilies!! It’s awesome ^^ Thanks again.
- The topic ‘Use wp core smilies’ is closed to new replies.