Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter JibsouX

    (@jibsoux)

    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-ssl

    activate 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 remove

    div.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.js

    and 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?

    Thread Starter JibsouX

    (@jibsoux)

    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 : mrgreen

    so 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Use wp core smilies’ is closed to new replies.