Hitskin.com
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, 5:03 am; edited 6 times in total
Facebook
Twitter
Pinterest
Youtube
