Make the Like and Reputation button appear. like facebook
+3
skouliki
AngelM
كونان2000
7 posters
Page 1 of 1
Make the Like and Reputation button appear. like facebook
Hello All
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
2: You must also have the reputation system enabled under Modules > Reputation > Activate reputation system.
3:If you put the codes here 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
- 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:
<!-- 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 -->
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">
<!-- 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="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>
<!-- 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><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>
<!-- END switch_dislike_button -->
</div>
<!-- END switch_likes_active -->
</div></div>
<div class="vote-post">
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">
{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<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>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<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>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
</div>
<br />
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</td></tr>
----------------
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:
<!-- 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 -->
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">
<!-- 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="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>
<!-- 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><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>
<!-- END switch_dislike_button -->
</div>
<!-- END switch_likes_active -->
</div></div>
<div class="vote-post">
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">
{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<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>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<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>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
</div>
<br />
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
----------------
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.
_______________________________
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)
Last edited by كونان2000 on June 24th 2023, 10:03 am; edited 6 times in total
skouliki, SarkZKalie, TonnyKamper, TheCrow, Mimóza, Obscure and AngelM like this post
Re: Make the Like and Reputation button appear. like facebook
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.
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.
كونان2000 likes this post
Re: Make the Like and Reputation button appear. like facebook
hi @AngelM
thank you very much, because of you I succeeded in preparing the tutorial
Thank you, that's great to hearI tested this on my test board and it works great. So I just put it on my live forum and I love it!
you are welcome ^^Thank you for all the time you put into this @كونان2000 It was a pleasure working with you on it.
thank you very much, because of you I succeeded in preparing the tutorial
as soon as possible I will work on all versionsI can't wait until you do the one for phpbb2 so I can tell my friend about it.
TonnyKamper, Mimóza and AngelM like this post
Re: Make the Like and Reputation button appear. like facebook
As always great job
Mimóza, كونان2000 and AngelM like this post
Re: Make the Like and Reputation button appear. like facebook
hi @كونان2000 what is the difference with this cunning?
https://help.forumotion.com/t161487-show-emojis-below-posts-after-pressing-react-buttons
https://help.forumotion.com/t161487-show-emojis-below-posts-after-pressing-react-buttons
كونان2000 likes this post
Re: Make the Like and Reputation button appear. like facebook
hi
Post has been updated,
It is now working on versions
Phpbb3
Phpbb2
--------
Other versions: soon
Thank you very much
more beautiful
more stylish
Post has been updated,
It is now working on versions
Phpbb3
Phpbb2
--------
Other versions: soon
@skoulikiskouliki wrote:As always great job
Thank you very much
hi @jucaresejucarese wrote:hi @كونان2000 what is the difference with this cunning?
https://help.forumotion.com/t161487-show-emojis-below-posts-after-pressing-react-buttons
more beautiful
more stylish
TonnyKamper, jucarese and Mimóza like this post
Re: Make the Like and Reputation button appear. like facebook
Oh, we have reactions more stylish.
Good job
Good job
كونان2000 likes this post
Re: Make the Like and Reputation button appear. like facebook
@كونان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.
Last edited by AngelM on September 5th 2022, 2:08 am; edited 1 time in total
كونان2000 likes this post
Re: Make the Like and Reputation button appear. like facebook
Omg, that's amazing, thank you!
SarkZKalie and كونان2000 like this post
Re: Make the Like and Reputation button appear. like facebook
Thank you very much @YoshiGMYoshiGM wrote:Oh, we have reactions more stylish.
Good job
@MimózaMimóza wrote:Omg, that's amazing, thank you!
Thank you very much
hi @AngelM ^^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.
The first post has been updated
Now the emoji are smaller
Before
after
TonnyKamper, Mimóza and AngelM like this post
Re: Make the Like and Reputation button appear. like facebook
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.
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.
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.
Have a beautiful day.
Re: Make the Like and Reputation button appear. like facebook
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
---------------------
And smiles became small in all versions
+
It is now working on the following versions
Phpbb 2
Phpbb 3
Punbb
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
---------------------
The first post has been updatedMy friend that has phpbb2 is waiting for you to do them small on that version, then she will put them on her forum.
And smiles became small in all versions
+
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:
<!-- 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 -->
</div>
<!-- END switch_likes_active -->
<div class="postfoot">
<div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
<!-- 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 -->
<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">
<!-- 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="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>
<!-- 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><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>
<!-- END switch_dislike_button -->
</div>
<!-- END switch_likes_active -->
</div></div>
<div class="vote-post">
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">
{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<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>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<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>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
</div>
<br />
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</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}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</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>
----------------
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;
}
TonnyKamper, Mimóza and AngelM like this post
Re: Make the Like and Reputation button appear. like facebook
Thanks for explaining that.كونان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
---------------------The first post has been updatedMy friend that has phpbb2 is waiting for you to do them small on that version, then she will put them on her forum.
And smiles became small in all versions
+
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:
<!-- 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 -->
</div>
<!-- END switch_likes_active -->
<div class="postfoot">
<div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
<!-- 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 -->
<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 withDon't forget to save:
- 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">
<!-- 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="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>
<!-- 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><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>
<!-- END switch_dislike_button -->
</div>
<!-- END switch_likes_active -->
</div></div>
<div class="vote-post">
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">
{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<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>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<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>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
</div>
<br />
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</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}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</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>
----------------
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;
}
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
Obscure and كونان2000 like this post
Re: Make the Like and Reputation button appear. like facebook
Good afternoon!
While @كونان2000 is developing this tutorial for all versions of the forums, you can use another of his tutorial
While @كونان2000 is developing this tutorial for all versions of the forums, you can use another of his tutorial
Razor12345- Support Moderator
- Posts : 1549
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine
TonnyKamper and كونان2000 like this post
Re: Make the Like and Reputation button appear. like facebook
Hello @Vilgefortz, Hello @Razor12345
- AwesomeBB:
- 1: Find the next part in viewtopic_body template
- 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}">
<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>
<!-- 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}">
<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>
<!-- 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 -->
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">
<!-- 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="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>
<!-- 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><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>
<!-- END switch_dislike_button -->
</div>
<!-- END switch_likes_active -->
</div></div>
<div class="vote-post">
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">
{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div><br />
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<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>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<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>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
</div>
<br />
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div">
<!-- BEGIN switch_like_list -->
<strong> {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</strong>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<strong> {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST} </strong>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</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;
}
Razor12345 likes this post
Similar topics
» Information: Disabling Facebook connect Module + Facebook "Like" Button + Paypal.
» facebook connect doesn't work + facebook share button
» facebook button to connect to facebook page
» How do I make it so they can log in via facebook connect?
» Facebook button
» facebook connect doesn't work + facebook share button
» facebook button to connect to facebook page
» How do I make it so they can log in via facebook connect?
» Facebook button
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum