Hitskin.com
Hello Guest
This tutorial will help you to show an emoji after pressing the interaction buttons, as in the example below.
----------------------------------
This tutorial will help you to show an emoji after pressing the interaction buttons, as in the example below.
----------------------------------
After pressing the Like button, this emoji will appear >
Dislike button >>
plus button >>>
minus button >
------------------------------------------
- phpBB2:
Find the next part in viewtopic_body template
- Code:
<div>{postrow.displayed.MESSAGE}</div>
replace it with
- Code:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.fa_likee_div p.fa_like_list, .fa_likee_div p.fa_dislike_list {
background: #0c121200;
line-height: 0px;
padding: 0;
}
.fa_likee_div {
line-height: 0px;
}
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
line-height: 0px;
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
border: 0 !important;
display: none;
}
.fa_like_list, .fa_dislike_list {
border: 0 !important;
}
.vote-post-Message img {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- 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/f20/16/85/77/67/ocia-a17.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/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- 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>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
- AwesomeBB:
- _______________________________
Find the next part in viewtopic_body template
- Code:
{postrow.displayed.MESSAGE}
replace it with
- Code:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.fa_likee_div {
position: relative;
top: -5px;
}
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
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 {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- 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/f20/16/85/77/67/ocia-a17.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/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- 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>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
----
- ModernBB:
- _______________________________
Find the next part in viewtopic_body template
- Code:
<div>{postrow.displayed.MESSAGE}</div>
replace it with
- Code:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.fa_likee_div {
position: relative;
top: -5px;
}
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
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 {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- 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/f20/16/85/77/67/ocia-a17.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/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- 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>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
----
- PunBB و Invision و phpBB3 :
- _______________________________
Find the next part in viewtopic_body template
- Code:
<div>{postrow.displayed.MESSAGE}</div>
replace it with
- Code:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
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 {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- 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/f20/16/85/77/67/ocia-a17.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/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- 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>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
Don't forget to save:
----
We hope you like this Trick
-----------------
Don't hesitate to ask me if you have any bug or any flaw you might've spotted
Thanks
Thanks
________________________
This tutorial was written by @كونان2000
Special thanks to @محمد قدوتنا for the idea
Last edited by كونان2000 on June 24th 2023, 6:56 am; edited 4 times in total
Facebook
Twitter
Pinterest
Youtube
