Show emojis below posts after pressing react buttons
+3
jucarese
TonnyKamper
كونان2000
7 posters
Show emojis below posts after pressing react buttons
by كونان2000 Tue Jul 05, 2022 12:01 pm
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
Last edited by كونان2000 on Sun Jul 24, 2022 9:14 pm; edited 3 times in total
كونان2000- Forumember
-
Posts : 114
Reputation : 56
Language : Arabic 
skouliki, Niko, SarkZKalie, TonnyKamper, Mimóza, System32 and Revelore like this post
Re: Show emojis below posts after pressing react buttons
by TonnyKamper Wed Jul 06, 2022 6:08 am
Awesome @كونان2000 can you make a tutorial for version Invision too please? 
TonnyKamper- Forumember
-
Posts : 885
Reputation : 74
Language : Dutch/English
Location : The Netherlands -
كونان2000 likes this post
كونان2000- Forumember
- Posts : 114
Reputation : 56
Language : Arabic -
TonnyKamper and Mimóza like this post
Re: Show emojis below posts after pressing react buttons
by jucarese Wed Jul 06, 2022 2:24 pm
I can't make it work in punbb
https://todasplataformas.foroactivo.com/t1-tu-primer-tema
user:profiletests
pw:Pruebastotales
https://todasplataformas.foroactivo.com/t1-tu-primer-tema
user:profiletests
pw:Pruebastotales
jucarese- Hyperactive
-
Posts : 2192
Reputation : 100
Language : spanish
Location : SSF Admin -
كونان2000 likes this post
Re: Show emojis below posts after pressing react buttons
by SLGray Wed Jul 06, 2022 5:54 pm
Was your templates modified already?jucarese wrote:I can't make it work in punbb
https://todasplataformas.foroactivo.com/t1-tu-primer-tema
user:profiletests
pw:Pruebastotales
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
- Posts : 50596
Reputation : 3478
Language : English
Location : United States -
jucarese and كونان2000 like this post
Re: Show emojis below posts after pressing react buttons
by skouliki Thu Jul 07, 2022 12:01 am
for my punbb test forum it is working
skouliki- Manager
- Posts : 12902
Reputation : 1561
Language : English,Greek
Location : Greece -
TonnyKamper and كونان2000 like this post
Re: Show emojis below posts after pressing react buttons
by skouliki Thu Jul 07, 2022 12:06 am
jucarese wrote:I can't make it work in punbb
https://todasplataformas.foroactivo.com/t1-tu-primer-tema
user:profiletests
pw:Pruebastotales
did you deactivate the old like + - system ?
skouliki- Manager
- Posts : 12902
Reputation : 1561
Language : English,Greek
Location : Greece -
TonnyKamper, jucarese and كونان2000 like this post
Re: Show emojis below posts after pressing react buttons
by jucarese Thu Jul 07, 2022 1:22 am
SLGray wrote:Was your templates modified already?jucarese wrote:I can't make it work in punbb
https://todasplataformas.foroactivo.com/t1-tu-primer-tema
user:profiletests
pw:Pruebastotales
Yes
skouliki wrote:jucarese wrote:I can't make it work in punbb
https://todasplataformas.foroactivo.com/t1-tu-primer-tema
user:profiletests
pw:Pruebastotales
did you deactivate the old like + - system ?
yes
It seems that today it works,Yesterday, clean cookies and cache and nothing, and today it works
jucarese- Hyperactive
- Posts : 2192
Reputation : 100
Language : spanish
Location : SSF Admin -
TonnyKamper likes this post
TonnyKamper- Forumember
- Posts : 885
Reputation : 74
Language : Dutch/English
Location : The Netherlands -
كونان2000 likes this post
Re: Show emojis below posts after pressing react buttons
by كونان2000 Thu Jul 07, 2022 8:48 pm
Thank you all my friends
WORKS Now ON THE FOLLOWING FORUM VERSIONS
PHPBB2
PHPBB3
PunBB
Invision
ModernBB
AwesomeBB
--------------
WORKS Now ON THE FOLLOWING FORUM VERSIONS
PHPBB2
PHPBB3
PunBB
Invision
ModernBB
AwesomeBB
--------------
كونان2000- Forumember
- Posts : 114
Reputation : 56
Language : Arabic -
skouliki and TonnyKamper like this post
Re: Show emojis below posts after pressing react buttons
by كونان2000 Sun Jul 24, 2022 9:33 pm
It works on all versions
كونان2000- Forumember
- Posts : 114
Reputation : 56
Language : Arabic -
skouliki, SarkZKalie, TonnyKamper and jucarese like this post
Re: Show emojis below posts after pressing react buttons
by SarkZKalie Thu Jul 28, 2022 8:43 pm
Thank you for the information 
SarkZKalie- Support Moderator
- Posts : 1366
Reputation : 217
Language : English -
كونان2000 likes this post
كونان2000- Forumember
- Posts : 114
Reputation : 56
Language : Arabic -
TonnyKamper likes this post
Re: Show emojis below posts after pressing react buttons
by System32 Yesterday at 3:23 pm
Perfect my man, just perfect. I put it on other place but still wow. Just a stupid question, you can't make counter for how many hearts or likes to be displayed?
System32- Forumember
- Posts : 349
Reputation : 15
Language : Serbian,English -
TonnyKamper likes this post
Similar topics» Add emojis to the like and reputation buttons
» Chat show the entire history without pressing a button archives.
» How to remove contact buttons from posts & information/options in writing posts?
» Chat Box Buttons don't show
» Sometimes like and dislike buttons don't show.
» Chat show the entire history without pressing a button archives.
» How to remove contact buttons from posts & information/options in writing posts?
» Chat Box Buttons don't show
» Sometimes like and dislike buttons don't show.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
