Home
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
