Make the Like and Reputation button appear. like facebook

by كونان2000 September 2nd 2022, 9:08 pm

Hello All

Make the Like and Reputation button appear. like facebook Frorum32

This tutorial will help you to change the appearance of the interaction buttons,

We wanted to imitate Facebook
---------------

 WORKS ON THE FOLLOWING FORUM VERSION
Phpbb 2
Phpbb 3
Punbb
Other versions: soon
_______________________________

1: Do not forget to activate I liked and disliked
Administration Panel >> general >> Messages and emails
Configuration

Make the Like and Reputation button appear. like facebook 15085010

2: You must also have the reputation system enabled under Modules > Reputation > Activate reputation system.

Make the Like and Reputation button appear. like facebook Ocia_a47

3:If you put the codes here Make the Like and Reputation button appear. like facebook 1f449

Improve the reputation system,
You should replace it with the new improved codes.
It has been optimized to match the tutorial.

Enable Javascript code management : yes

Make the Like and Reputation button appear. like facebook 96694410

phpBB2:

improved java code
Title * : as you like
Placement : In the topics

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 : '<img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" alt="+"/>', icon_minus : '<img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" alt="-"/>', // language config title_plus : 'laugh %{USERNAME}\'s post', title_minus : 'Love %{USERNAME}\'s post', title_like_singular : '%{VOTES} person laughs %{USERNAME}\'s post', title_like_plural : '%{VOTES} people laugh %{USERNAME}\'s post', title_dislike_singular : '%{VOTES} person cryings %{USERNAME}\'s post', title_dislike_plural : '%{VOTES} people crying %{USERNAME}\'s post', title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}' }, // 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_vote/, 'fa_voted'); 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 : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version], actions : ['.likedown-content', '.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_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_count fa_negative" 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]); } });

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

2: Find the next part in viewtopic_body template

Code::  <tr><td colspan="2"> <div class="fa_like_div">  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}   {postrow.displayed.switch_likes_active.switch_dislike_list.D_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>  <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>  </div></td></tr>

replace it with

Code:: <tr><td colspan="2"> <div class="likedown" style="float:none;"> <button class="dropbttn"> <div class="like-buttons"><img src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.jpg" /> </div> </button> <br /> <div class="likedown-content">  <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="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><img src="https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png" /></span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE} </button> <style> p.fa_like_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png); } </style>  <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><img src="https://i.servimg.com/u/f44/20/44/68/94/love10.png" /></span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </button> <style> p.fa_dislike_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/love10.png); } </style>  </div>  </div></div> <div class="vote-post">  <div class="fa_likee_div">  <div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>   <div class="fa-dislike" style="font-size: 0px;"> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />  </div>     <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" /> </div>   <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" /> </div>    </div> <br />  <div class="fa_likee_div">  <strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>   <strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>  </div>  </td></tr>

Don't forget to save:

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

3: Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS

Code:: .dropbttn { padding: 0; background-color: #3f51b5; color: #fff; font-size: 16px; border: solid #2196f3 2px; cursor: pointer; } .likedown { position: relative; display: inline-block; } .likedown-content { display: none; position: absolute; background-color: #f9f9f9; width: 200px; bottom: 30px; left: 0; border-radius: 22px; } .like-buttons img { width: 70px; } .likedown:hover .likedown-content { display: block; } .likedown:hover .dropbttn { background-color: #3e8e41; } .rep-button, .rep-button:focus, .rep-button:active { margin: 7px; } .vote.gensmall img { margin-left: 11px; } .vote { width: auto; display: flex; float: right; margin-right: 22px; margin-bottom: -75px; position: relative; top: 12px; } .rep-nb { font-size: 12px; margin-left: 11px; font-weight: 900; padding: 2px; color: #f5f5dc; background: #3f51b5; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; float: left; position: absolute; bottom: 20px; left: 10px; } .vote-post { background: #f1f8ff; border-left: solid #9c27b0 2px; margin-top: 5px; padding: 0px 0px 5px 0px; display: flex; width: 40%; } .fa_voted, .fa_vote:hover { opacity:0.4 } p.fa_dislike_list img, p.fa_like_list img { width: 50px; } p.fa_like_list:before { padding-right: 8px; } p.fa_dislike_list:before { } .fa-dislike, .fa-like { float: right; } .fa-dislike { margin-top: 5px; padding-left: 5px; padding-right: 3px; } .fa_like_list { border-radius: 3px; background-color: #0000; padding: 5px; margin-top: -5px; margin-left: -5px; } .fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before { border: 0 !important; display: none; } .fa_like_list, .fa_dislike_list { clear: both; margin: auto; background-color: #0000; padding: 0px; } .fa_like_list, .fa_dislike_list { font-size: 0; border: 0 !important; } div.fa_likee_div > strong:nth-child(2) > p, div.fa_likee_div > strong:nth-child(2) > p:before{ font-size: 11px; !important; content: none; } div.fa_likee_div > strong:nth-child(1) > p, div.fa_likee_div > strong:nth-child(1) > p:before { font-size: 11px; !important; content: none; } .fa-like { padding-left: 1px; position: relative; bottom: -1px; } .vote-post-Message img { position: relative; bottom: -5px; margin-left: 5px; } .vote-post-Message { width: 50px!important } .rep-button i, .rep-button svg { display: none; } .fa_like_div { padding: 0 !important; width: auto !important; } .rep-button, .rep-button:focus, .rep-button:active { padding: 0; border: none; background: linear-gradient(rgb(255 255 255 / 0%)0%,rgb(233 233 233 / 0%)100%); box-shadow: none; vertical-align: middle; float: none; } span.fa_reputation img { margin-left: 15px; } span.fa_reputation { position: absolute; right: 30px; bottom: 6px; display: block; } span.fa_count.fa_negative { font-size: 11px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 21px; left: 70px; } span.fa_count.fa_positive { font-size: 11px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 21px; left: 22px; }

PHPBB3:

improved java code
Title * : as you like
Placement : In the topics

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 : '<img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" alt="+"/>', icon_minus : '<img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" alt="-"/>', // language config title_plus : 'laugh %{USERNAME}\'s post', title_minus : 'Love %{USERNAME}\'s post', title_like_singular : '%{VOTES} person laughs %{USERNAME}\'s post', title_like_plural : '%{VOTES} people laugh %{USERNAME}\'s post', title_dislike_singular : '%{VOTES} person cryings %{USERNAME}\'s post', title_dislike_plural : '%{VOTES} people crying %{USERNAME}\'s post', title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}' }, // 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_vote/, 'fa_voted'); 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 : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version], actions : ['.post-options', '.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_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_count fa_negative" 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]); } });

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

2: Find the next part in viewtopic_body template

Code::  <div class="fa_like_div">  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}   {postrow.displayed.switch_likes_active.switch_dislike_list.D_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>  <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>  </div>

replace it with

Code:: <div class="likedown" style="float:none;"> <button class="dropbttn"> <div class="like-buttons"><img src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.jpg" /> </div> </button> <br /> <div class="likedown-content">  <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="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><img src="https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png" /></span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE} </button> <style> p.fa_like_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png); } </style>  <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><img src="https://i.servimg.com/u/f44/20/44/68/94/love10.png" /></span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </button> <style> p.fa_dislike_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/love10.png); } </style>  </div>  </div></div> <div class="vote-post">  <div class="fa_likee_div">  <div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>   <div class="fa-dislike" style="font-size: 0px;"> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />  </div>     <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" /> </div>   <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" /> </div>    </div> <br />  <div class="fa_likee_div">  <strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>   <strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>  </div>

Don't forget to save:

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

3: Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS

Code:: .dropbttn { background-color: #3f51b5; color: #fff; font-size: 16px; border: solid #2196f3 2px; cursor: pointer; } .likedown { margin-top: 100px; position: relative; display: block; } .likedown-content { display: none; position: absolute; background-color: #f9f9f9; width: 200px; bottom: 30px; left: 0; border-radius: 22px; } .like-buttons img { width: 70px; } .likedown:hover .likedown-content { display: block; } .likedown:hover .dropbttn { background-color: #3e8e41; } .rep-button, .rep-button:focus, .rep-button:active { margin: 7px; } .vote.gensmall img { margin-left: 11px; } .vote { width: auto; display: flex; float: right; margin-right: 22px; margin-bottom: -75px; position: relative; top: 12px; } .fa_voted, .fa_vote:hover { opacity:0.4 } .rep-nb { font-size: 12px; margin-left: 11px; font-weight: 900; padding: 2px; color: #f5f5dc; background: #3f51b5; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; float: left; position: absolute; bottom: 21px; left: 10px; } .vote-post { background: #f1f8ff; border-left: solid #9c27b0 2px; margin-top: 5px; display: flex; width: 40% } p.fa_dislike_list img, p.fa_like_list img { width: 50px; } p.fa_like_list:before { padding-right: 8px; } p.fa_dislike_list:before { } .fa-dislike, .fa-like { float: right; } .fa-dislike { padding-right: 10px; } .fa_like_div { margin-left: auto; } .fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before { border: 0 !important; display: none; } .fa_like_list, .fa_dislike_list { border: 0 !important; } .fa-like { padding-left: 1px; position: relative; bottom: -1px; } .vote-post-Message img { position: relative; bottom: -5px; margin-left: 5px; } .vote-post-Message { width: 50px!important } .rep-button i, .rep-button svg { display: none; } .fa_like_div { padding: 0 !important; width: auto !important; } .rep-button, .rep-button:focus, .rep-button:active { padding: 0; border: none; background: linear-gradient(rgb(255 255 255 / 0%)0%,rgb(233 233 233 / 0%)100%); box-shadow: none; vertical-align: middle; float: none; } .fa_like_list { border-radius: 3px; background-color: #0000; padding: 5px; margin-top: -5px; margin-left: -5px; } li.fa_reputation img { margin-left: 15px; } li.fa_reputation { position: absolute; right: 30px; bottom: 5px; display: block; } div.fa_likee_div > strong:nth-child(2) > p:before { content: none; } div.fa_likee_div > strong:nth-child(1) > p:before { content: none; } span.fa_count.fa_negative { font-size: 11px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 21px; left: 65px; } span.fa_count.fa_positive { font-size: 11px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 22px; left: 21px; }

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

We hope you like this great little Trick and Tip on how to make the change. Razz

_______________________________
This tutorial was written by كونان2000,
Special thanks to AngelM for the idea

This tutorial was written by @كونان2000,
(The codes were written by @كونان2000, and @Ange Tuteur code was used in this thread)

by AngelM September 3rd 2022, 1:26 am

I tested this on my test board and it works great. So I just put it on my live forum and I love it!

Thank you for all the time you put into this @كونان2000 It was a pleasure working with you on it.

I can't wait until you do the one for phpbb2 so I can tell my friend about it.

Make the Like and Reputation button appear. like facebook Ilovei10

by كونان2000 September 3rd 2022, 5:20 am

hi @AngelM

I tested this on my test board and it works great. So I just put it on my live forum and I love it!

Thank you, that's great to hear Celebrate

Thank you for all the time you put into this @كونان2000 It was a pleasure working with you on it.

you are welcome ^^
thank you very much, because of you I succeeded in preparing the tutorial

I can't wait until you do the one for phpbb2 so I can tell my friend about it.

as soon as possible I will work on all versions Very Happy

by **skouliki** September 3rd 2022, 7:30 am

As always great job

by jucarese September 3rd 2022, 10:57 am

hi @كونان2000 what is the difference with this cunning?
https://help.forumotion.com/t161487-show-emojis-below-posts-after-pressing-react-buttons

by كونان2000 September 4th 2022, 3:22 am

hi
Post has been updated,
It is now working on versions
Phpbb3
Phpbb2
--------
Other versions: soon

skouliki wrote:As always great job

@skouliki

Thank you very much :rose:

jucarese wrote:hi @كونان2000 what is the difference with this cunning?
https://help.forumotion.com/t161487-show-emojis-below-posts-after-pressing-react-buttons

hi @jucarese
more beautiful
more stylish Cool

by YoshiGM September 4th 2022, 3:48 pm

Oh, we have reactions more stylish.
Good job

by AngelM September 4th 2022, 3:52 pm

@كونان2000 I just put this on a testboard for phpbb2 and it works fine. I would like the smilies to be smaller though. They are quite big. Other than that... it's beautiful and clean. Thanks so much. Very Happy

by Mimóza September 4th 2022, 9:01 pm

Omg, that's amazing, thank you! Make the Like and Reputation button appear. like facebook 1f60a

by كونان2000 September 5th 2022, 6:38 am

YoshiGM wrote:Oh, we have reactions more stylish.
Good job

Thank you very much @YoshiGM Very Happy

Mimóza wrote:Omg, that's amazing, thank you!

@Mimóza

Thank you very much :rose:

AngelM wrote:@كونان2000 I just put this on a testboard for phpbb2 and it works fine. I would like the smilies to be smaller though. They are quite big. Other than that... it's beautiful and clean. Thanks so much.

hi @AngelM ^^
The first post has been updated
Now the emoji are smaller

Before

Make the Like and Reputation button appear. like facebook Frorum18

after

by AngelM September 5th 2022, 7:47 am

I just added this to my live forum and I see two Like buttons and no LMBO smilie.

Make the Like and Reputation button appear. like facebook Twolik10

I also added it to my test board and the Like goes up into the profile if there isn't a smilie. I forgot how you told me to fix that.

Make the Like and Reputation button appear. like facebook Likewi11

Thanks for helping and doing all this work!

Angel

by كونان2000 September 5th 2022, 8:37 am

hi @AngelM
Make sure that you have installed the codes correctly

Make the Like and Reputation button appear. like facebook Ocia_a48

thank you my friend

by AngelM September 5th 2022, 2:51 pm

كونان2000 wrote:hi @AngelM
Make sure that you have installed the codes correctly

thank you my friend

I have cleared out everything on the test board so I started fresh with this. But, here is what is happening:

1. All smilies show up as they should. They are beautiful and small, just like I wanted them. I love you

2. When I try to click on the Crying one, it fades them out, but it did not post to the topic. (This is a new post that was made and never posted to before). No smilies show up that were liked or loved.

Make the Like and Reputation button appear. like facebook Voting10

I have not tried it on my live board yet.

Thank you!

Angel

EDIT: I put this on my live forum and the same thing happens. But... I see if I refresh my page then the LMBO and crying will show up.

1. So, does that mean each time we use either of those smilies we need to refresh page for them to show up?

2. It doesn't show who gave you the Like or Love when using those two smilies.

I love these so much and I know other people are going to love them and use them too.

My friend that has phpbb2 is waiting for you to do them small on that version, then she will put them on her forum. Very Happy

Have a beautiful day.

by كونان2000 September 5th 2022, 5:00 pm

hi @AngelM
Fading smiles mean they've been pressed Dawa

It's like a dislike button
Before and after pressing

Make the Like and Reputation button appear. like facebook 99298410

+
The crying and laughing emoji only appears after the page is refreshed Pizza

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

My friend that has phpbb2 is waiting for you to do them small on that version, then she will put them on her forum.

The first post has been updated
And smiles became small in all versions
For you

+

It is now working on the following versions
Phpbb 2
Phpbb 3
Punbb

PunBB:

improved java code
Title * : as you like
Placement : In the topics

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 : '<img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" alt="+"/>', icon_minus : '<img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" alt="-"/>', // language config title_plus : 'Like %{USERNAME}\'s post', title_minus : 'Dislike %{USERNAME}\'s post', title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post', title_like_plural : '%{VOTES} people like %{USERNAME}\'s post', title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post', title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post', title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}' }, // 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_vote/, 'fa_voted'); 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 : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version], actions : ['', '.profile-icons', '.likedown-content'][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_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_count fa_negative" 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]); } });

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

2: Find the next part in viewtopic_body template

Code::  <div class="fa_like_div">  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}   {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}  </div>  <div class="postfoot"> <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} </div>  <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>  <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>  </div>  <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </div> <div style="clear:both;"></div> </div>

replace it with

Code:: <div class="postfoo"> <div class="likedown" style="float:none;"> <button class="dropbttn"> <div class="like-buttons"><img src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.jpg" /> </div> </button> <br /> <div class="likedown-content">  <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="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><img src="https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png" /></span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE} </button> <style> p.fa_like_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png); } </style>  <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><img src="https://i.servimg.com/u/f44/20/44/68/94/love10.png" /></span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </button> <style> p.fa_dislike_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/love10.png); } </style>  </div>  </div></div> <div class="vote-post">  <div class="fa_likee_div">  <div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>   <div class="fa-dislike" style="font-size: 0px;"> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />  </div>     <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" /> </div>   <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" /> </div>    </div> <br />  <div class="fa_likee_div">  <strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>   <strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>  </div>  </div> <div class="postfoot"> <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} </div> <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </div> <br /> <div style="clear:both;"></div> </div>

Don't forget to save:

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

3: Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS

Code:: .dropbttn { background-color: #3f51b5; color: #fff; font-size: 16px; border: solid #2196f3 2px; cursor: pointer; } .likedown { position: relative; display: inline-block; } .likedown-content { display: none; position: absolute; background-color: #f9f9f9; width: 200px; bottom: 30px; left: 0; border-radius: 22px; } .like-buttons img { width: 70px; } .likedown:hover .likedown-content { display: block; } .likedown:hover .dropbttn { background-color: #3e8e41; } .rep-button, .rep-button:focus, .rep-button:active { margin: 7px; } .vote.gensmall img { margin-left: 11px; } .vote { width: auto; display: flex; float: right; margin-right: 22px; margin-bottom: -75px; position: relative; top: 12px; } .fa_voted, .fa_vote:hover { opacity:0.4 } .rep-nb { font-size: 12px; margin-left: 11px; font-weight: 900; padding: 2px; color: #f5f5dc; background: #3f51b5; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; float: left; position: absolute; bottom: 21px; left: 7px; } .vote-post { background: #f1f8ff; border-left: solid #9c27b0 2px; margin-top: 5px; display: flex; width: 25% } p.fa_dislike_list img, p.fa_like_list img { width: 50px; } p.fa_like_list:before { padding-right: 8px; } .fa-dislike, .fa-like { float: right; } .fa-dislike { padding-right: 10px; } .fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before { border: 0 !important; display: none; } .fa_like_list, .fa_dislike_list { font-size: 0px; border: 0 !important; } .fa_dislike_list { margin: 5px 5px 0; } .fa-like { padding-left: 1px; position: relative; bottom: -1px; } .vote-post-Message img { position: relative; bottom: -5px; margin-left: 5px; } .vote-post-Message { width: 50px!important } .rep-button i, .rep-button svg { display: none; } .fa_like_div { padding: 0 !important; width: auto !important; } .rep-button, .rep-button:focus, .rep-button:active { padding: 0; border: none; background: linear-gradient(rgb(255 255 255 / 0%)0%,rgb(233 233 233 / 0%)100%); box-shadow: none; vertical-align: middle; float: none; } .fa_like_list { border-radius: 3px; background-color: #0000; padding: 5px; margin-top: -5px; margin-left: -5px; } span.fa_reputation img { margin-left: 15px; } span.fa_reputation { position: absolute; right: 32px; bottom: 3px; display: block; } div.fa_likee_div > strong:nth-child(1) > p:before { font-size: 10px!important; content: none; } div.fa_likee_div > strong:nth-child(2) > p:before { font-size: 10px!important; content: none; } div.fa_likee_div > strong:nth-child(1) > p, div.fa_likee_div > strong:nth-child(2) > p { font-size: 10px!important; } .postfoo { clear: both; border-top: 1px dashed #ccc; padding: 0.5em 1em; } span.fa_count.fa_negative { font-size: 10px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 22px; left: 65px; } span.fa_count.fa_positive { font-size: 10px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 22px; left: 21px; }

by AngelM September 5th 2022, 5:11 pm

كونان2000 wrote:hi @AngelM
Fading smiles mean they've been pressed
It's like a dislike button
Before and after pressing

+
The crying and laughing emoji only appears after the page is refreshed
---------------------

My friend that has phpbb2 is waiting for you to do them small on that version, then she will put them on her forum.
The first post has been updated
And smiles became small in all versions

+

It is now working on the following versions
Phpbb 2
Phpbb 3
Punbb

PunBB:

Thanks for explaining that.

You did such an awesome job on this whole project. You did exactly what I wanted. I am so happy with your work.

Thank you so much for making my forum look even better than it did.

Great job @كونان2000

I found the team here to be wonderful help. I appreciate you all.

I will let my friend know that she can add these to her phpbb2 forum now. She will be happy too.

Have a wonderful day.

Love Angel I love you

by Guest June 14th 2023, 9:40 am

Any update for AwesomeBB?

by **Razor12345** June 14th 2023, 9:55 am

Good afternoon!

While @كونان2000 is developing this tutorial for all versions of the forums, you can use another of his tutorial

by كونان2000 June 17th 2023, 5:33 pm

Hello @Vilgefortz, Hello @Razor12345

AwesomeBB:

1: Find the next part in viewtopic_body template

Code::  <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}"> <span class="rep-cat"> <i class="material-icons">thumb_up</i> {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE} </span> <span>{postrow.displayed.switch_likes_active.L_LIKE}</span> </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}"> <span class="rep-cat"> <i class="material-icons">thumb_down</i> {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </span> <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span> </button>   {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}   {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}  </div>

replace it with

Code:: <tr><td colspan="2"> <div class="likedown" style="float:none;"> <button class="dropbttn"> <div class="like-buttons"><img src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.jpg" /> </div> </button> <br /> <div class="likedown-content">  <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="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><img src="https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png" /></span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE} </button> <style> p.fa_like_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/thumbu10.png); } </style>  <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><img src="https://i.servimg.com/u/f44/20/44/68/94/love10.png" /></span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </button> <style> p.fa_dislike_list:before { content: url(https://i.servimg.com/u/f44/20/44/68/94/love10.png); } </style>  </div>  </div></div> <div class="vote-post">  <div class="fa_likee_div">  <div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>   <div class="fa-dislike" style="font-size: 0px;"> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />  </div>     <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/lol11.png" /> </div>   <div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"> <img src="https://i.servimg.com/u/f44/20/44/68/94/cry10.png" /> </div>    </div> <br />  <div class="fa_likee_div">  <strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>   <strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>  </div>  </td></tr>

2: improved java code
Title * : as you like
Placement : In the topics

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 : '<img src="https://i.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>', icon_minus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>', // language config title_plus : 'Like %{USERNAME}\'s post', title_minus : 'Dislike %{USERNAME}\'s post', title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post', title_like_plural : '%{VOTES} people like %{USERNAME}\'s post', title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post', title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post', title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}' }, // 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_vote/, 'fa_voted'); 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 : $('body')[0] ? 5 : '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 : ['.name', 'span.post-author-name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version], actions : ['.likedown-content', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons', '.likedown-content'][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_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_count fa_negative" 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]); } });

3: Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS

Code:: undefined.fa_reputation { position: absolute; right: 40px; top: 12px; } a.fa_vote.fa_plus, a.fa_voted.fa_plus { margin: 20px; } .dropbttn { background-color: #3f51b5; color: #fff; font-size: 16px; border: solid #2196f3 2px; cursor: pointer; } .likedown { position: relative; display: inline-block; } .likedown-content { display: none; position: absolute; background-color: #f9f9f9; width: 200px; bottom: 30px; left: 0; border-radius: 22px; } .like-buttons img { width: 70px; } .likedown:hover .likedown-content { display: block; } .likedown:hover .dropbttn { background-color: #3e8e41; } .rep-button, .rep-button:focus, .rep-button:active { margin: 7px; } .vote.gensmall img { margin-left: 11px; } .vote { width: auto; display: flex; float: right; margin-right: 22px; margin-bottom: -75px; position: relative; top: 12px; } .rep-button, .rep-button:active, .rep-button:focus { overflow: inherit; } .fa_voted, .fa_vote:hover { opacity:0.4 } .rep-nb { font-size: 12px; margin-left: 11px; font-weight: 900; padding: 2px; color: #f5f5dc; background: #3f51b5; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; float: left; position: absolute; bottom: 21px; left: 7px; } .vote-post { background: #f1f8ff; border-left: solid #9c27b0 2px; margin-top: 5px; display: flex; width: 25% } p.fa_dislike_list img, p.fa_like_list img { width: 50px; } p.fa_like_list:before { padding-right: 8px; } .fa-dislike, .fa-like { float: right; } .fa-dislike { padding-right: 10px; } .fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before { border: 0 !important; display: none; } .fa_like_list, .fa_dislike_list { font-size: 0px; border: 0 !important; } .fa_dislike_list { margin: 5px 5px 0; } .fa-like { padding-left: 1px; position: relative; bottom: -1px; } .vote-post-Message img { position: relative; bottom: -5px; margin-left: 5px; } .vote-post-Message { width: 50px!important } .rep-button i, .rep-button svg { display: none; } .fa_like_div { padding: 0 !important; width: auto !important; } .rep-button, .rep-button:focus, .rep-button:active { padding: 0; border: none; background: linear-gradient(rgb(255 255 255 / 0%)0%,rgb(233 233 233 / 0%)100%); box-shadow: none; vertical-align: middle; float: none; } .fa_like_list { border-radius: 3px; background-color: #0000; padding: 5px; margin-top: -5px; margin-left: -5px; } span.fa_reputation img { margin-left: 15px; } span.fa_reputation { position: absolute; right: 32px; bottom: 3px; display: block; } div.fa_likee_div > strong:nth-child(1) > p:before { font-size: 10px!important; content: none; } div.fa_likee_div > strong:nth-child(2) > p:before { font-size: 10px!important; content: none; } div.fa_likee_div > strong:nth-child(1) > p, div.fa_likee_div > strong:nth-child(2) > p { font-size: 10px!important; } .postfoo { clear: both; border-top: 1px dashed #ccc; padding: 0.5em 1em; } span.fa_count.fa_negative { font-size: 10px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 22px; right: 0px; } span.fa_count.fa_positive { font-size: 10px; margin-left: 11px; font-weight: 700; padding: 2px; color: #f5f5dc; background: #528714; border: 1px solid #C7C3BF; border-radius: 22px; display: block; line-height: inherit; position: absolute; bottom: 22px; left: 20px; }