Add emojis to the like and reputation buttons

4 posters

Go down

Add emojis to the like and reputation buttons Empty Add emojis to the like and reputation buttons

Post by كونان2000 September 14th 2021, 7:09 am

This tutorial will help you to add emoji to reputation button and like buttons

As well as counting votes without having to change the page!  Very Happy ,


1: This modification applies as long as your templates have not been modified significantly.
2: You must have the reputation system.
3: You must have the Like and Dislike system.

Add emojis to the like and reputation buttons Dvkln610
MODERNBB VERSION:
Installing the CSS

Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

CSS
Code:
.fa_vote,.fa_voted,.fa_count{font-size:12px;font-family:Verdana,Arial,Helvetica,Sans-serif;display:inline-block!important;width:auto!important;float:none!important;transition:300ms}
.fa_vote:hover,.fa_voted{background-image:url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);opacity:.6}
.fa_voted{cursor:default}
.fa_count{font-weight:700;margin:0 3px;cursor:default}
.fa_positive{color:#4A0}
.fa_negative{color:#A44}
.fa_votebar_inner{background:#4a00;transition:300ms}
.fa_votebar,.fa_votebar_inner{background:#c440;height:3px}
span.fa_voted.fa_plus{color:#fff;height:37px;padding:7px}
span.fa_voted.fa_minus{color:#fff;height:37px;padding:7px;color:#fff;height:37px;padding:7px}
.fa_voted,.fa_vote{background:#2b596f;border:solid #2b596f 2px;cursor:default;padding:4px;vertical-align:middle}
li.fa_reputation{float:left;margin-left:5px}
.rep-button,.rep-button:active,.rep-button:focus{font-size:0;margin:0 0 0 6px;vertical-align:middle;padding:6px 7px}
::marker{font-size:0}
.rep-button,.rep-button:active,.rep-button:focus{background-color:#2b596f}
i.ion-thumbsdown,i.ion-thumbsup{font-size:0;vertical-align:17px}
a.fa_voted.fa_plus,a.fa_voted.fa_minus,a.fa_vote.fa_plus,a.fa_vote.fa_minus{font-size:0;color:#fff}
.rep-button img,{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
a.fa_voted.fa_minus img,a.fa_voted.fa_plus img,button.rep-button.fa_like img,button.rep-button.fa_dislike img,.rep-button.fa_liked img,.rep-button.fa_disliked img{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
.rep-button img,a.fa_vote.fa_plus img,a.fa_vote.fa_minus img{float:right;height:25px;margin-left:5px;vertical-align:middle;width:25px}
.rep-nb{background-color:rgba(255,255,255,0.25);border-radius:2px;font-size:11px;margin-right:7px;vertical-align:1px;padding:11px 15px}
.rep-button.fa_liked,.rep-button.fa_disliked{padding:6px 10px 6px 0}

________________________

Installing the JavaScript

To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.

Title : as you like
Placement : In all the pages
Code:
$(function() {
          // General Configuration of the plugin
          var config = {
            position_left : true, // true for left || false for right
            negative_vote : true, // true for negative votes || false for positive only
            vote_bar : true, // display a small bar under the vote buttons
      
            // button config
            icon_plus : '',
            icon_minus : '',
            
           // language config
            title_plus : '',
            title_minus : '',
      
            title_like_singular : '%{VOTES}',
            title_like_plural : '%{VOTES}',
      
            title_dislike_singular : '%{VOTES}',
            title_dislike_plural : '%{VOTES}',
      
            title_vote_bar : '%{VOTES}'
          },
        
// function bound to the onclick handler of the vote buttons
          submit_vote = function() {
            var next = this.nextSibling, // the counter next to the vote button that was clicked
                box = this.parentNode,
                bar = box.getElementsByTagName('DIV'),
                vote = box.getElementsByTagName('A'),
                mode = /eval=plus/.test(this.href) ? 1 : 0,
                i = 0, j = vote.length, pos, neg, percent;
      
            // submit the vote asynchronously
            $.get(this.href, function() {
              next.innerHTML = +next.innerHTML + 1; // add to the vote count
              next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
        
              pos = +vote[0].nextSibling.innerHTML;
              neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
              percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
        
              if (bar[0]) {
                bar[0].style.display = '';
                bar[0].firstChild.style.width = percent;
                box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
              }
            });
      
            // revoke voting capabilities on the post once the vote is cast
            for (; i < j; i++) {
              vote[i].href = '#';
              vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
              vote[i].onclick = function() { return false };
            }
      
            return false;
          },
        
          vote = $('.vote'), i = 0, j = vote.length,
          version = $('.bodylinewidth')[0] ? 0 :
                    document.getElementById('phpbb') ? 1 :
                    $('.pun')[0] ? 2 :
                    document.getElementById('ipbwrapper') ? 3 :
                    document.getElementById('modernbb') ? 4 :
                    'badapple', // version check
      
          // version data so we don't have to redefine these arrays during the loop
          vdata = {
            tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
            name : [version],
            actions : ['.post-options', '.fa_like_div', '.post-options', '.posting-icons', '.fa_like_div'][version]
          },
      
          post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
      
          // prevent execution if the version cannot be determined
          if (version == 'badapple') {
            if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
            return;
          }
      
          for (; i < j; i++) {
            post = $(vote[i]).closest('.post')[0];
            bar = $('.vote-bar', vote[i])[0]; // vote bar
            button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
            pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
            ul = $(vdata.actions, post)[0]; // post actions
            li = document.createElement(vdata.tag); // vote system container
            li.className = 'fa_reputation';
      
            if (li.tagName == 'SPAN') li.style.display = 'inline-block';
      
            // calculate votes
            if (bar) {
              total = +bar.title.replace(/.*?\((\d+).*/, '$1');
              percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
        
              n_pos = Math.round(total * (percent / 100));
              n_neg = total - n_pos;
            } else {
              n_pos = 0;
              n_neg = 0;
            }
      
            // set up negative and positive titles with the correct grammar, votes, and usernames
            title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
            title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
      
            // define the vote counts
            li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
            span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
      
            // create positive vote button
            plus = document.createElement('A');
            plus.href = button[0] ? button[0].href : '#';
            plus.onclick = button[0] ? submit_vote : function() { return false };
            plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
            plus.innerHTML = config.icon_plus;
            plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
      
            span[0] && li.insertBefore(plus, span[0]);
      
            // create negative vote button
            if (config.negative_vote) {
              minus = document.createElement('A');
              minus.href = button[1] ? button[1].href : '#';
              minus.onclick = button[1] ? submit_vote : function() { return false };
              minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
              minus.innerHTML = config.icon_minus;
              minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
        
              span[1] && li.insertBefore(minus, span[1]);
            }
      
            // create vote bar
            if (config.vote_bar) {
              vote_bar = document.createElement('DIV');
              vote_bar.className = 'fa_votebar';
              vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
              vote_bar.style.display = bar ? '' : 'none';
              li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
              li.appendChild(vote_bar);
            }
      
            // finally insert the vote system and remove the default one
            config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
            vote[i].parentNode.removeChild(vote[i]);
          }
        });
 
$(window).load(function() {
$("li.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
        $(this).find("a.fa_voted.fa_plus").html('love it<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
        $(this).find("a.fa_voted.fa_minus").html('silly<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
        $(this).find("a.fa_vote.fa_plus").html('love it<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
        $(this).find("a.fa_vote.fa_minus").html('silly<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
    });
});
 
$(window).load(function() {
$("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
$(window).load(function() {
$("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
Save the script and the modification is now installed

PHPBB2 VERSION:
1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify Add emojis to the like and reputation buttons Editer button
4. Find this code:
Code:
<!-- BEGIN switch_likes_active -->
 <tr><td colspan="2">
 <div class="fa_like_div">
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div></td></tr>
 <!-- END switch_likes_active -->

5. And replace by this:
Code:
<!-- BEGIN switch_likes_active -->
                          <tr><td colspan="2">
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
</div></td></tr>
 <!-- END switch_likes_active -->
6. Hit save and click publish Add emojis to the like and reputation buttons 1928220652
----------------

Installing the CSS

Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

CSS
Code:
.fa_vote,.fa_voted,.fa_count{font-size:12px;font-family:Verdana,Arial,Helvetica,Sans-serif;display:inline-block!important;width:auto!important;float:none!important;transition:300ms}
.fa_vote:hover,.fa_voted{background-image:url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);opacity:.6}
.fa_voted{cursor:default}
.fa_count{font-weight:700;margin:0 3px;cursor:default}
.fa_positive{color:#4A0}
.fa_negative{color:#A44}
.fa_votebar_inner{background:#4a00;transition:300ms}
.fa_votebar,.fa_votebar_inner{background:#c440;height:3px}
span.fa_voted.fa_plus{color:#fff;height:19px;padding:7px}
span.fa_voted.fa_minus{color:#fff;height:37px;padding:7px;color:#fff;height:19px;padding:7px}
.fa_voted,.fa_vote{background:#2b596f;border:solid #2b596f 2px;cursor:default;padding:4px;vertical-align:middle}
li.fa_reputation{float:left;margin-left:5px}



 button.rep-button img, button.rep-button.fa_disliked img,   button.rep-button.fa_liked img,   button.rep-button.fa_dislike img,  button.rep-button.fa_like img,  a.fa_vote.fa_plus img, a.fa_vote.fa_minus img, a.fa_voted.fa_plus img, a.fa_voted.fa_minus img{
    width: 25px;
    height: 25px;
}


.rep-button, .rep-button:active {
    background: #2b596f;
    border: 1px solid #005c8b;
    box-shadow: 0 -1px 0 #2b596f inset;
    color: #ffffff;
    margin: 3px 3px 6px 0;
    padding: 7px 4px;
}
---------------

Installing the JavaScript

To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.

Title : as you like
Placement : In all the pages
Code:
$(function() {
          // General Configuration of the plugin
          var config = {
            position_left : true, // true for left || false for right
            negative_vote : true, // true for negative votes || false for positive only
            vote_bar : true, // display a small bar under the vote buttons
    
            // button config
            icon_plus : '',
            icon_minus : '',
          
          // language config
            title_plus : '',
            title_minus : '',
    
            title_like_singular : '',
            title_like_plural : '',
    
            title_dislike_singular : '',
            title_dislike_plural : '',
    
            title_vote_bar : ''
          },
      
// function bound to the onclick handler of the vote buttons
          submit_vote = function() {
            var next = this.nextSibling, // the counter next to the vote button that was clicked
                box = this.parentNode,
                bar = box.getElementsByTagName('DIV'),
                vote = box.getElementsByTagName('A'),
                mode = /eval=plus/.test(this.href) ? 1 : 0,
                i = 0, j = vote.length, pos, neg, percent;
    
            // submit the vote asynchronously
            $.get(this.href, function() {
              next.innerHTML = +next.innerHTML + 1; // add to the vote count
              next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
      
              pos = +vote[0].nextSibling.innerHTML;
              neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
              percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
      
              if (bar[0]) {
                bar[0].style.display = '';
                bar[0].firstChild.style.width = percent;
                box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
              }
            });
    
            // revoke voting capabilities on the post once the vote is cast
            for (; i < j; i++) {
              vote[i].href = '#';
              vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
              vote[i].onclick = function() { return false };
            }
    
            return false;
          },
      
          vote = $('.vote'), i = 0, j = vote.length,
          version = $('.bodylinewidth')[0] ? 0 :
                    document.getElementById('phpbb') ? 1 :
                    $('.pun')[0] ? 2 :
                    document.getElementById('ipbwrapper') ? 3 :
                    document.getElementById('modernbb') ? 4 :
                    'badapple', // version check
    
          // version data so we don't have to redefine these arrays during the loop
          vdata = {
            tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
            name : [version],
            actions : ['.fa_like_div'][version]
          },
    
          post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
    
          // prevent execution if the version cannot be determined
          if (version == 'badapple') {
            if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
            return;
          }
    
          for (; i < j; i++) {
            post = $(vote[i]).closest('.post')[0];
            bar = $('.vote-bar', vote[i])[0]; // vote bar
            button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
            pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
            ul = $(vdata.actions, post)[0]; // post actions
            li = document.createElement(vdata.tag); // vote system container
            li.className = 'fa_reputation';
    
            if (li.tagName == 'SPAN') li.style.display = 'inline-block';
    
            // calculate votes
            if (bar) {
              total = +bar.title.replace(/.*?\((\d+).*/, '$1');
              percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
      
              n_pos = Math.round(total * (percent / 100));
              n_neg = total - n_pos;
            } else {
              n_pos = 0;
              n_neg = 0;
            }
    
            // set up negative and positive titles with the correct grammar, votes, and usernames
            title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
            title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
    
            // define the vote counts
            li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
            span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
    
            // create positive vote button
            plus = document.createElement('A');
            plus.href = button[0] ? button[0].href : '#';
            plus.onclick = button[0] ? submit_vote : function() { return false };
            plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
            plus.innerHTML = config.icon_plus;
            plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
    
            span[0] && li.insertBefore(plus, span[0]);
    
            // create negative vote button
            if (config.negative_vote) {
              minus = document.createElement('A');
              minus.href = button[1] ? button[1].href : '#';
              minus.onclick = button[1] ? submit_vote : function() { return false };
              minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
              minus.innerHTML = config.icon_minus;
              minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
      
              span[1] && li.insertBefore(minus, span[1]);
            }
    
            // create vote bar
            if (config.vote_bar) {
              vote_bar = document.createElement('DIV');
              vote_bar.className = 'fa_votebar';
              vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
              vote_bar.style.display = bar ? '' : 'none';
              li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
              li.appendChild(vote_bar);
            }
    
            // finally insert the vote system and remove the default one
            config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
            vote[i].parentNode.removeChild(vote[i]);
          }
        });
 
$(window).load(function() {
$("span.fa_reputation, .fa_vote, .fa_voted").each(function() {
        $(this).find("a.fa_vote.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
        $(this).find("a.fa_voted.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
        $(this).find("a.fa_voted.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
        $(this).find("a.fa_vote.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
    });
});
 
$(window).load(function() {
$("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
$(window).load(function() {
$("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
Save the script and the modification is now installed

PHPBB3 VERSION:

1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify Add emojis to the like and reputation buttons Editer button
4. Find this code:
Code:
<!-- BEGIN switch_likes_active -->
         <div class="fa_like_div">
            <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
            <!-- BEGIN switch_dislike_list -->
            {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
            <!-- END switch_dislike_list -->
            <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
               <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
               <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
               <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
               <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
            </button>
            <!-- END switch_dislike_button -->
         </div>
         <!-- END switch_likes_active -->

5. And replace by this:
Code:
<!-- BEGIN switch_likes_active -->
                          <tr><td colspan="2">
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
</div></td></tr>
 <!-- END switch_likes_active -->
6. Hit save and click publish Add emojis to the like and reputation buttons 1928220652
----------------

Installing the CSS

Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

CSS
Code:
          .fa_vote, .fa_voted, .fa_count {
          font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
    
    .fa_vote:hover, .fa_voted {
    background-image: url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);
    opacity: .6;
}
        .fa_voted { cursor:default }
    
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
    
        .fa_positive { color:#4A0 }
        .fa_negative { color:#A44 }
    
        .fa_votebar_inner {
    background: #4a00;
    transition: 300ms;
}

.fa_votebar, .fa_votebar_inner {
    background: #c440;
    height: 3px;
}
span.fa_voted.fa_plus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
  span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
 span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
.fa_voted, .fa_vote {
    background: #2b596f;
    border: solid #2b596f 2px;
    cursor: default;
    padding: 4px;
    vertical-align: middle;
}
li.fa_reputation {
    margin-left: 5px;
    float: left;
}
.fa_vote img, .fa_voted img, a.fa_voted.fa_minus img, a.fa_voted.fa_plus img, button.rep-button.fa_like img, button.rep-button.fa_dislike img, .rep-button.fa_liked img, .rep-button.fa_disliked img {
    float: left;
    margin-left: 5px;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
button.rep-button img {
    width: 25px;
    height: 25px;
}

 button.rep-button.fa_liked, button.rep-button.fa_like, button.rep-button.fa_dislike , button.rep-button.fa_disliked,  .rep-button, .rep-button:active, .rep-button:focus{
    margin-left: 11px;
    padding: 7px;
     font-size: 1px;
}

.rep-nb {
    border-left: 1px solid #C7C3BF;
    font-weight: 700;
    line-height: 9px;
    margin-left: 0px;
    padding-left: 6px;
}
.rep-button, .rep-button:active, .rep-button:focus {
    background: #2b596f;
    border: 1px solid #2b596f;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #2b596f inset;
    color: #ffffff;
    margin: 0px 0px 2px 7px;
  float: none;
}
________________________

Installing the JavaScript

To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.

Title : as you like
Placement : In all the pages
Code:
$(function() {
          // General Configuration of the plugin
          var config = {
            position_left : true, // true for left || false for right
            negative_vote : true, // true for negative votes || false for positive only
            vote_bar : true, // display a small bar under the vote buttons
      
            // button config
            icon_plus : '',
            icon_minus : '',
            
          
            
            // language config
            title_plus : '',
            title_minus : '',
      
            title_like_singular : '',
            title_like_plural : '',
      
            title_dislike_singular : '',
            title_dislike_plural : '',
      
            title_vote_bar : ''
          },
        
        
          // function bound to the onclick handler of the vote buttons
          submit_vote = function() {
            var next = this.nextSibling, // the counter next to the vote button that was clicked
                box = this.parentNode,
                bar = box.getElementsByTagName('DIV'),
                vote = box.getElementsByTagName('A'),
                mode = /eval=plus/.test(this.href) ? 1 : 0,
                i = 0, j = vote.length, pos, neg, percent;
      
            // submit the vote asynchronously
            $.get(this.href, function() {
              next.innerHTML = +next.innerHTML + 1; // add to the vote count
              next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
        
              pos = +vote[0].nextSibling.innerHTML;
              neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
              percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
        
              if (bar[0]) {
                bar[0].style.display = '';
                bar[0].firstChild.style.width = percent;
                box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
              }
            });
      
            // revoke voting capabilities on the post once the vote is cast
            for (; i < j; i++) {
              vote[i].href = '#';
              vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
              vote[i].onclick = function() { return false };
            }
      
            return false;
          },
        
          vote = $('.vote'), i = 0, j = vote.length,
          version = $('.bodylinewidth')[0] ? 0 :
                    document.getElementById('phpbb') ? 1 :
                    $('.pun')[0] ? 2 :
                    document.getElementById('ipbwrapper') ? 3 :
                    document.getElementById('modernbb') ? 4 :
                    'badapple', // version check
      
          // version data so we don't have to redefine these arrays during the loop
          vdata = {
            tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
            name : [version],
            actions : ['.post-options', '.fa_like_div', '.post-options', '.posting-icons', '.fa_like_div'][version]
          },
      
          post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
      
          // prevent execution if the version cannot be determined
          if (version == 'badapple') {
            if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
            return;
          }
      
          for (; i < j; i++) {
            post = $(vote[i]).closest('.post')[0];
            bar = $('.vote-bar', vote[i])[0]; // vote bar
            button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
            pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
            ul = $(vdata.actions, post)[0]; // post actions
            li = document.createElement(vdata.tag); // vote system container
            li.className = 'fa_reputation';
      
            if (li.tagName == 'SPAN') li.style.display = 'inline-block';
      
            // calculate votes
            if (bar) {
              total = +bar.title.replace(/.*?\((\d+).*/, '$1');
              percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
        
              n_pos = Math.round(total * (percent / 100));
              n_neg = total - n_pos;
            } else {
              n_pos = 0;
              n_neg = 0;
            }
      
            // set up negative and positive titles with the correct grammar, votes, and usernames
            title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
            title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
      
            // define the vote counts
            li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
            span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
      
            // create positive vote button
            plus = document.createElement('A');
            plus.href = button[0] ? button[0].href : '#';
            plus.onclick = button[0] ? submit_vote : function() { return false };
            plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
            plus.innerHTML = config.icon_plus;
            plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
      
            span[0] && li.insertBefore(plus, span[0]);
      
            // create negative vote button
            if (config.negative_vote) {
              minus = document.createElement('A');
              minus.href = button[1] ? button[1].href : '#';
              minus.onclick = button[1] ? submit_vote : function() { return false };
              minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
              minus.innerHTML = config.icon_minus;
              minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
        
              span[1] && li.insertBefore(minus, span[1]);
            }
      
            // create vote bar
            if (config.vote_bar) {
              vote_bar = document.createElement('DIV');
              vote_bar.className = 'fa_votebar';
              vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
              vote_bar.style.display = bar ? '' : 'none';
              li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
              li.appendChild(vote_bar);
            }
      
            // finally insert the vote system and remove the default one
            config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
            vote[i].parentNode.removeChild(vote[i]);
          }
        });






$(window).load(function() {
$("li.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
        $(this).find("a.fa_voted.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
        $(this).find("a.fa_voted.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
        $(this).find("a.fa_vote.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
        $(this).find("a.fa_vote.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
    });
});


$(window).load(function() {
$("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});


$(window).load(function() {
$("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});







$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});


$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
Save the script and the modification is now installed

This tutorial was written by كونان2000.


Last edited by كونان2000 on November 20th 2021, 3:59 am; edited 5 times in total
كونان2000
كونان2000
New Member

Male Posts : 11
Reputation : 10
Language : arabic

View user profile https://help.forumotion.com/users/3412/19/22/63/avatars/111346-8

skouliki, YoshiGM, BlackScorpion, SarkZKalie, TonnyKamper and The Last Outlaw like this post

Back to top Go down

Add emojis to the like and reputation buttons Empty Re: Add emojis to the like and reputation buttons

Post by SarkZKalie September 14th 2021, 8:34 pm

Brilliant ! It looks good on default ModernBB templates.

Do you have any plan to make this tutorial work on all versions in future? Smile


Add emojis to the like and reputation buttons Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1295
Reputation : 209
Language : English

View user profile https://rotavn.forumotion.com/

كونان2000 likes this post

Back to top Go down

Add emojis to the like and reputation buttons Empty Re: Add emojis to the like and reputation buttons

Post by كونان2000 September 15th 2021, 9:34 am

@SarkZKalie wrote:Brilliant ! It looks good on default ModernBB templates.

Do you have any plan to make this tutorial work on all versions in future? Smile
Hello  @SarkZKalie  salut
The post has been modified to include the following versions

PHPBB2 
PHPBB3 

Soon more versions  loul
كونان2000
كونان2000
New Member

Male Posts : 11
Reputation : 10
Language : arabic

View user profile https://help.forumotion.com/users/3412/19/22/63/avatars/111346-8

skouliki, Ape, SLGray, SarkZKalie and TonnyKamper like this post

Back to top Go down

Add emojis to the like and reputation buttons Empty Re: Add emojis to the like and reputation buttons

Post by كونان2000 October 27th 2021, 7:48 pm

Sorry for being late due to my circumstances Add emojis to the like and reputation buttons Oops
---------

Sorry, I can't edit the post   beu  

The post has been modified to include the following versions

Invision
PunBB

Invision version:

1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify Add emojis to the like and reputation buttons Editer button
4. Find this code:
Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="17px" height="17px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#fff"></path></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="17px" height="17px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#fff"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->

5. And replace by this:
Code:
<!-- BEGIN switch_likes_active -->
                          <tr><td colspan="2">
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
</div></td></tr>
 <!-- END switch_likes_active -->
6. Hit save and click publish Add emojis to the like and reputation buttons 1928220652
----------------

Installing the CSS

Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

CSS
Code:
.fa_vote,.fa_voted,.fa_count{font-size:12px;font-family:Verdana,Arial,Helvetica,Sans-serif;display:inline-block!important;width:auto!important;float:none!important;transition:300ms}
.fa_vote:hover,.fa_voted{background-image:url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);opacity:.6}
.fa_voted{cursor:default}
.fa_count{font-weight:700;margin:0 3px;cursor:default}
.fa_positive{color:#4A0}
.fa_negative{color:#A44}
.fa_votebar_inner{background:#4a00;transition:300ms}
.fa_votebar,.fa_votebar_inner{background:#c440;height:3px}
span.fa_voted.fa_plus{color:#fff;height:19px;padding:7px}
span.fa_voted.fa_minus{color:#fff;height:19px;padding:7px;color:#fff;height:19px;padding:7px}
.fa_voted,.fa_vote{background:#2b596f;border:solid #2b596f 2px;cursor:default;padding:4px;vertical-align:middle}
li.fa_reputation{float:left;margin-left:5px}
.rep-button,.rep-button:active,.rep-button:focus{font-size:0;margin:0 0 0 6px;vertical-align:middle;padding:6px 7px}
::marker{font-size:0}
.rep-button,.rep-button:active,.rep-button:focus{background-color:#2b596f}
i.ion-thumbsdown,i.ion-thumbsup{font-size:0;vertical-align:17px}
a.fa_voted.fa_plus,a.fa_voted.fa_minus,a.fa_vote.fa_plus,a.fa_vote.fa_minus{font-size:0;color:#fff}
.rep-button img,{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
a.fa_voted.fa_minus img,a.fa_voted.fa_plus img,button.rep-button.fa_like img,button.rep-button.fa_dislike img,.rep-button.fa_liked img,.rep-button.fa_disliked img{float:right;margin-left:5px;vertical-align:middle;width:25px;height:25px}
.rep-button img,a.fa_vote.fa_plus img,a.fa_vote.fa_minus img{float:right;height:25px;margin-left:5px;vertical-align:middle;width:25px}
.rep-nb{background-color:rgba(255,255,255,0.25);border-radius:2px;font-size:11px;margin-right:7px;vertical-align:1px;padding:11px 15px}
.rep-button.fa_liked,.rep-button.fa_disliked{padding:6px 10px 6px 0}

.fa_like_div {
    overflow: hidden;
    padding: 19px;
    background: #c6ccd478;
}
.rep-button, .rep-button:active {
 height: auto;
}
---------------

Installing the JavaScript

To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.

Title : as you like
Placement : In all the pages
Code:
$(function() {
          // General Configuration of the plugin
          var config = {
            position_left : true, // true for left || false for right
            negative_vote : true, // true for negative votes || false for positive only
            vote_bar : true, // display a small bar under the vote buttons
      
            // button config
            icon_plus : '',
            icon_minus : '',
            
          
            
            // language config
            title_plus : '',
            title_minus : '',
      
            title_like_singular : '',
            title_like_plural : '',
      
            title_dislike_singular : '',
            title_dislike_plural : '',
      
            title_vote_bar : ''
          },
        
        
          // function bound to the onclick handler of the vote buttons
          submit_vote = function() {
            var next = this.nextSibling, // the counter next to the vote button that was clicked
                box = this.parentNode,
                bar = box.getElementsByTagName('DIV'),
                vote = box.getElementsByTagName('A'),
                mode = /eval=plus/.test(this.href) ? 1 : 0,
                i = 0, j = vote.length, pos, neg, percent;
      
            // submit the vote asynchronously
            $.get(this.href, function() {
              next.innerHTML = +next.innerHTML + 1; // add to the vote count
              next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
        
              pos = +vote[0].nextSibling.innerHTML;
              neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
              percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
        
              if (bar[0]) {
                bar[0].style.display = '';
                bar[0].firstChild.style.width = percent;
                box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
              }
            });
      
            // revoke voting capabilities on the post once the vote is cast
            for (; i < j; i++) {
              vote[i].href = '#';
              vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
              vote[i].onclick = function() { return false };
            }
      
            return false;
          },
        
          vote = $('.vote'), i = 0, j = vote.length,
          version = $('.bodylinewidth')[0] ? 0 :
                    document.getElementById('phpbb') ? 1 :
                    $('.pun')[0] ? 2 :
                    document.getElementById('ipbwrapper') ? 3 :
                    document.getElementById('modernbb') ? 4 :
                    'badapple', // version check
      
          // version data so we don't have to redefine these arrays during the loop
          vdata = {
            tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
            name : [version],
            actions : ['.post-options', '.post-options', '.posting-icons', '.fa_like_div'][version]
          },
      
          post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
      
          // prevent execution if the version cannot be determined
          if (version == 'badapple') {
            if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
            return;
          }
      
          for (; i < j; i++) {
            post = $(vote[i]).closest('.post')[0];
            bar = $('.vote-bar', vote[i])[0]; // vote bar
            button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
            pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
            ul = $(vdata.actions, post)[0]; // post actions
            li = document.createElement(vdata.tag); // vote system container
            li.className = 'fa_reputation';
      
            if (li.tagName == 'SPAN') li.style.display = 'inline-block';
      
            // calculate votes
            if (bar) {
              total = +bar.title.replace(/.*?\((\d+).*/, '$1');
              percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
        
              n_pos = Math.round(total * (percent / 100));
              n_neg = total - n_pos;
            } else {
              n_pos = 0;
              n_neg = 0;
            }
      
            // set up negative and positive titles with the correct grammar, votes, and usernames
            title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
            title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
      
            // define the vote counts
            li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
            span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
      
            // create positive vote button
            plus = document.createElement('A');
            plus.href = button[0] ? button[0].href : '#';
            plus.onclick = button[0] ? submit_vote : function() { return false };
            plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
            plus.innerHTML = config.icon_plus;
            plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
      
            span[0] && li.insertBefore(plus, span[0]);
      
            // create negative vote button
            if (config.negative_vote) {
              minus = document.createElement('A');
              minus.href = button[1] ? button[1].href : '#';
              minus.onclick = button[1] ? submit_vote : function() { return false };
              minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
              minus.innerHTML = config.icon_minus;
              minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
        
              span[1] && li.insertBefore(minus, span[1]);
            }
      
            // create vote bar
            if (config.vote_bar) {
              vote_bar = document.createElement('DIV');
              vote_bar.className = 'fa_votebar';
              vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
              vote_bar.style.display = bar ? '' : 'none';
              li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
              li.appendChild(vote_bar);
            }
      
            // finally insert the vote system and remove the default one
            config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
            vote[i].parentNode.removeChild(vote[i]);
          }
        });
 
 
 
 
 
 
$(window).load(function() {
$("li.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
        $(this).find("a.fa_voted.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
        $(this).find("a.fa_voted.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
        $(this).find("a.fa_vote.fa_plus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f60d10.png" />');
        $(this).find("a.fa_vote.fa_minus").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/1f61210.png" />');
    });
});
 
 
$(window).load(function() {
$("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
 
$(window).load(function() {
$("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
 
 
 
 
 
 
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
Save the script and the modification is now installed

PunBB VERSION::

1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify Add emojis to the like and reputation buttons Editer button
4. Find this code:
Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div profile_{postrow.displayed.PROFILE_POSITION}">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->

5. And replace by this:
Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div profile_{postrow.displayed.PROFILE_POSITION}">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <div class="postliker"><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
                                                  </div>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                                                  
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <div class="postlike"><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
                                                  </div>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                                                  
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->
6. Hit save and click publish Add emojis to the like and reputation buttons 1928220652
----------------

Installing the CSS

Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

CSS
Code:
         .fa_vote, .fa_voted, .fa_count {
          font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
    
    .fa_vote:hover, .fa_voted {
    background-image: url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);
    opacity: .6;
}
        .fa_voted { cursor:default }
    
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
    
        .fa_positive { color:#4A0 }
        .fa_negative { color:#A44 }
    
        .fa_votebar_inner {
    background: #4a00;
    transition: 300ms;
}
 
.fa_votebar, .fa_votebar_inner {
    background: #c440;
    height: 3px;
}
span.fa_voted.fa_plus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
  span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
 span.fa_voted.fa_minus {
    color: #fff;
    height: 19px;
    padding: 7px;
}
.fa_voted, .fa_vote {
    background: #2b596f;
    border: solid #2b596f 2px;
    cursor: default;
    padding: 4px;
    vertical-align: middle;
}
li.fa_reputation {
    margin-left: 5px;
    float: left;
}
.fa_vote img, .fa_voted img, a.fa_voted.fa_minus img, a.fa_voted.fa_plus img, button.rep-button.fa_like img, button.rep-button.fa_dislike img, .rep-button.fa_liked img, .rep-button.fa_disliked img {
    float: left;
    margin-left: 5px;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
button.rep-button img {
    width: 25px;
    height: 25px;
}
 
 button.rep-button.fa_liked, button.rep-button.fa_like, button.rep-button.fa_dislike , button.rep-button.fa_disliked,  .rep-button, .rep-button:active, .rep-button:focus{
    margin-left: 11px;
    padding: 5px 3px;
     font-size: 0px;
}
 span.rep-nb {
    font-size: 15px!important;
}
.rep-nb {
    border-left: 1px solid #C7C3BF;
    font-weight: 700;
    line-height: 9px;
    margin-left: 0px;
    padding-left: 6px;
}
.rep-button, .rep-button:active, .rep-button:focus {
    background: #2b596f;
    border: 1px solid #2b596f;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #2b596f inset;
    color: #ffffff;
    margin: 0px 0px 2px 7px;
float: right;
}

.rep-button i, .rep-button svg {
    display: none;
}

.postliker, .postlike {
    margin-right: 7px;
    float: left;
}
---------------

Installing the JavaScript

To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.

Title : as you like
Placement : In all the pages
Code:
$(function() {
          // General Configuration of the plugin
          var config = {
            position_left : true, // true for left || false for right
            negative_vote : true, // true for negative votes || false for positive only
            vote_bar : true, // display a small bar under the vote buttons
      
            // button config
            icon_plus : '',
            icon_minus : '',
            
           // language config
            title_plus : '',
            title_minus : '',
      
            title_like_singular : '%{VOTES}',
            title_like_plural : '%{VOTES}',
      
            title_dislike_singular : '%{VOTES}',
            title_dislike_plural : '%{VOTES}',
      
            title_vote_bar : '%{VOTES}'
          },
        
// function bound to the onclick handler of the vote buttons
          submit_vote = function() {
            var next = this.nextSibling, // the counter next to the vote button that was clicked
                box = this.parentNode,
                bar = box.getElementsByTagName('DIV'),
                vote = box.getElementsByTagName('A'),
                mode = /eval=plus/.test(this.href) ? 1 : 0,
                i = 0, j = vote.length, pos, neg, percent;
      
            // submit the vote asynchronously
            $.get(this.href, function() {
              next.innerHTML = +next.innerHTML + 1; // add to the vote count
              next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
        
              pos = +vote[0].nextSibling.innerHTML;
              neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
              percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
        
              if (bar[0]) {
                bar[0].style.display = '';
                bar[0].firstChild.style.width = percent;
                box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
              }
            });
      
            // revoke voting capabilities on the post once the vote is cast
            for (; i < j; i++) {
              vote[i].href = '#';
              vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
              vote[i].onclick = function() { return false };
            }
      
            return false;
          },
        
          vote = $('.vote'), i = 0, j = vote.length,
          version = $('.bodylinewidth')[0] ? 0 :
                    document.getElementById('phpbb') ? 1 :
                    $('.pun')[0] ? 2 :
                    document.getElementById('ipbwrapper') ? 3 :
                    document.getElementById('modernbb') ? 4 :
                    'badapple', // version check
      
          // version data so we don't have to redefine these arrays during the loop
          vdata = {
            tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
            name : [version],
            actions : ['.post-options', '.posting-icons', '.fa_like_div.profile_left'][version]
          },
      
          post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
      
          // prevent execution if the version cannot be determined
          if (version == 'badapple') {
            if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
            return;
          }
      
          for (; i < j; i++) {
            post = $(vote[i]).closest('.post')[0];
            bar = $('.vote-bar', vote[i])[0]; // vote bar
            button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
            pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
            ul = $(vdata.actions, post)[0]; // post actions
            li = document.createElement(vdata.tag); // vote system container
            li.className = 'fa_reputation';
      
            if (li.tagName == 'SPAN') li.style.display = 'inline-block';
      
            // calculate votes
            if (bar) {
              total = +bar.title.replace(/.*?\((\d+).*/, '$1');
              percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
        
              n_pos = Math.round(total * (percent / 100));
              n_neg = total - n_pos;
            } else {
              n_pos = 0;
              n_neg = 0;
            }
      
            // set up negative and positive titles with the correct grammar, votes, and usernames
            title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
            title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
      
            // define the vote counts
            li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
            span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
      
            // create positive vote button
            plus = document.createElement('A');
            plus.href = button[0] ? button[0].href : '#';
            plus.onclick = button[0] ? submit_vote : function() { return false };
            plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
            plus.innerHTML = config.icon_plus;
            plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
      
            span[0] && li.insertBefore(plus, span[0]);
      
            // create negative vote button
            if (config.negative_vote) {
              minus = document.createElement('A');
              minus.href = button[1] ? button[1].href : '#';
              minus.onclick = button[1] ? submit_vote : function() { return false };
              minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
              minus.innerHTML = config.icon_minus;
              minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
        
              span[1] && li.insertBefore(minus, span[1]);
            }
      
            // create vote bar
            if (config.vote_bar) {
              vote_bar = document.createElement('DIV');
              vote_bar.className = 'fa_votebar';
              vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
              vote_bar.style.display = bar ? '' : 'none';
              li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
              li.appendChild(vote_bar);
            }
      
            // finally insert the vote system and remove the default one
            config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
            vote[i].parentNode.removeChild(vote[i]);
          }
        });
 
$(window).load(function() {
$("span.fa_reputation,  .fa_count, .fa_vote, .fa_voted").each(function() {
        $(this).find("a.fa_voted.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
        $(this).find("a.fa_voted.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
        $(this).find("a.fa_vote.fa_plus").html('<img src="https://twemoji.maxcdn.com/16x16/1f60d.png" />');
        $(this).find("a.fa_vote.fa_minus").html('<img src="https://twemoji.maxcdn.com/16x16/1f612.png" />');
    });
});
 
$(window).load(function() {
$("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
        $(this).find(".postliker").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
$(window).load(function() {
$("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
        $(this).find(".postlike").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find(".postliker").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
    });
});
 
$(window).load(function() {
$(".rep-button").each(function() {
        $(this).find(".postlike").html('<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a16.png" />');
    });
});
Save the script and the modification is now installed




Last edited by كونان2000 on October 29th 2021, 5:51 am; edited 2 times in total
كونان2000
كونان2000
New Member

Male Posts : 11
Reputation : 10
Language : arabic

View user profile https://help.forumotion.com/users/3412/19/22/63/avatars/111346-8

skouliki, SarkZKalie and TonnyKamper like this post

Back to top Go down

Add emojis to the like and reputation buttons Empty Re: Add emojis to the like and reputation buttons

Post by YoshiGM October 28th 2021, 5:16 pm

Wow, let me congratulate you.
This is an a "reaction" system using the new like and dislike buttons.

Great tutorial. Victory Yes
YoshiGM
YoshiGM
Active Poster

Male Posts : 1155
Reputation : 132
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

كونان2000 likes this post

Back to top Go down

Add emojis to the like and reputation buttons Empty Re: Add emojis to the like and reputation buttons

Post by كونان2000 October 29th 2021, 5:37 am

Hello  @YoshiGM
thanks for all ^^
---
The first and third publication has been modified to include the following versions

thumright   PunBB
thumright   PhpBB2
thumright   Phpbb3
thumright   Invision
thumright   ModernBB
scratch  AwesomeBB does not work
كونان2000
كونان2000
New Member

Male Posts : 11
Reputation : 10
Language : arabic

View user profile https://help.forumotion.com/users/3412/19/22/63/avatars/111346-8

SarkZKalie, TonnyKamper and jucarese like this post

Back to top Go down

Add emojis to the like and reputation buttons Empty Re: Add emojis to the like and reputation buttons

Post by Beyonder December 2nd 2021, 6:34 pm

Nice job!
Beyonder
Beyonder
Forumember

Male Posts : 683
Reputation : 25
Language : English
Location : Beyond Realm

View user profile http://fictionalomniverse.forumotion.com/

كونان2000 likes this post

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum