HomeShow emojis below posts after pressing react buttons
+2
TonnyKamper
كونان2000
6 posters
Page 1 of 1
Show emojis below posts after pressing react buttons
by كونان2000 July 5th 2022, 7: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
Special thanks to @محمد قدوتنا for the idea
Last edited by كونان2000 on June 24th 2023, 6:56 am; edited 4 times in total
كونان2000- Forumember
-
Posts : 284
Reputation : 120
Language : Arabic -
skouliki, Niko, SarkZKalie, TonnyKamper, Mimóza and Revelore like this post
Re: Show emojis below posts after pressing react buttons
by TonnyKamper July 6th 2022, 1:08 pm
Awesome @كونان2000 can you make a tutorial for version Invision too please? 
TonnyKamper- Active Poster
-
Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin -
كونان2000 likes this post
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
TonnyKamper and Mimóza like this post
Re: Show emojis below posts after pressing react buttons
by Jucarese July 6th 2022, 9: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 : 2553
Reputation : 120
Language : spanish
Location : SSF Admin -
كونان2000 likes this post
Re: Show emojis below posts after pressing react buttons
by SLGray July 7th 2022, 12:54 am
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 : 51554
Reputation : 3524
Language : English
Location : United States -
Jucarese and كونان2000 like this post
Re: Show emojis below posts after pressing react buttons
by skouliki July 7th 2022, 7:01 am
for my punbb test forum it is working
skouliki- Manager
- Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece -
TonnyKamper and كونان2000 like this post
Re: Show emojis below posts after pressing react buttons
by skouliki July 7th 2022, 7: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 : 15391
Reputation : 1709
Language : English,Greek
Location : Greece -
TonnyKamper, Jucarese and كونان2000 like this post
Re: Show emojis below posts after pressing react buttons
by Jucarese July 7th 2022, 8: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 : 2553
Reputation : 120
Language : spanish
Location : SSF Admin -
TonnyKamper likes this post
TonnyKamper- Active Poster
- Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin -
كونان2000 likes this post
Re: Show emojis below posts after pressing react buttons
by كونان2000 July 8th 2022, 3:48 am
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 : 284
Reputation : 120
Language : Arabic -
skouliki and TonnyKamper like this post
Re: Show emojis below posts after pressing react buttons
by كونان2000 July 25th 2022, 4:33 am
It works on all versions
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
skouliki, SarkZKalie, TonnyKamper and Jucarese like this post
Re: Show emojis below posts after pressing react buttons
by SarkZKalie July 29th 2022, 3:43 am
Thank you for the information 
SarkZKalie- Support Moderator
- Posts : 1443
Reputation : 220
Language : English -
كونان2000 likes this post
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
TonnyKamper likes this post
Re: Show emojis below posts after pressing react buttons
by Guest November 25th 2022, 10: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?
Guest- Guest
Re: Show emojis below posts after pressing react buttons
by كونان2000 November 28th 2022, 2:07 pm
Sorry, I did not understand your questionSystem32 wrote: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?
But you can't display more than four emojis
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
Re: Show emojis below posts after pressing react buttons
by Guest November 28th 2022, 5:38 pm
What I meant is, you have number of likes, total number of likes. But you can't have total number of hearts, angry etc?كونان2000 wrote:Sorry, I did not understand your questionSystem32 wrote: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?
But you can't display more than four emojis
Guest- Guest
Similar topics» How to remove contact buttons from posts & information/options in writing posts?
» How to show posts?
» Show sigs in posts
» How to show oldest posts first
» How can i make the thank/+1 show on posts?
» How to show posts?
» Show sigs in posts
» How to show oldest posts first
» How can i make the thank/+1 show on posts?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
