Custom messages in posts based on number of likes
4 posters
Page 1 of 1
Custom messages in posts based on number of likes
Hello everyone,
If you’re looking for a way to encourage members to interact with posts, you can use a simple code that combines JavaScript and CSS to add customized messages based on the number of likes a post receives.
---------------------------------If you’re looking for a way to encourage members to interact with posts, you can use a simple code that combines JavaScript and CSS to add customized messages based on the number of likes a post receives.
Bronze Message: Appears when a post receives between 3 and 7 likes.
Silver Message: Appears when a post receives between 8 and 15 likes.
Gold Message: When a member’s post receives between 16 and 70 likes, the message changes to the Gold Message. The Gold Message represents the highest level of appreciation,
---------------------------------------------------------------------------------
CSS Code
Admin Panel Display Colors & CSS , CSS Stylesheet and paste the following code.
- Code:
.like-Bronze {border-right: solid 5px #a34521 !important;padding: 5px;background: #cfc5c2c7;overflow: hidden;margin-top: 33px;margin-left: 7px; margin-right: 7px;}
.like1-Bronze {position: relative;top: 7px;float: right;}
.like2-Bronze {position: relative;top: 7px;float: left;}
.like3-Bronze {width: fit-content;font-size: 32px;line-height: 1;text-align: center;color: #903915;text-shadow: 3px 3px 0 #fff;}
.like-Silver {border-right: solid 5px #bababa !important;padding: 5px;background: #dfdfdf;overflow: hidden;margin-top: 33px;margin-left: 7px; margin-right: 7px;}
.like1-Silver {position: relative;top: 7px;float: right;}
.like2-Silver {position: relative;top: 7px;float: left;}
.like3-Silver {width: fit-content;font-size: 32px;line-height: 1;text-align: center;color: #817e7e;text-shadow: 3px 3px 0 #fff;}
.like-gold {border-right: solid 5px #dab275 !important;padding: 5px;background: #eed6a1;overflow: hidden;margin-top: 33px;margin-left: 7px; margin-right: 7px;}
.like1-gold {position: relative;top: 7px;float: right;}
.like2-gold {position: relative;top: 7px;float: left;}
.like3-gold {width: fit-content;font-size: 32px;line-height: 1;text-align: center;color: #b17628;text-shadow: 3px 3px 0 #fff;}
Don't forget to save
JavaScript Code
Administration panel Modules HTML & JAVASCRIPT - Javascript codes management
and create a new script with the following settings.
Title : as you wish
Placement : In the topics
- Code:
$(document).ready(function() {
var Likestopt_Likestopt = {
'phpBB2': '.postbody:first',
'phpBB3': '.postbody .content:first',
'PunBB': '.postbody:first',
'Invision': '.post-entry:first',
'ModernBB': '.postbody .content:first',
'AwesomeBB': '.post-content:first'
};
var currentServer = 'AwesomeBB';
var authorSelector = Likestopt_Likestopt[currentServer];
$(".post").each(function() {
var currentPost = $(this);
var repNbText = currentPost.find(".rep-nb:first").text();
var Likestopt = parseInt(repNbText, 10);
currentPost.find(".like-Bronze,.like-Silver,.like-gold").remove();
var LikesHTML = '';
if (Likestopt >= 16 && Likestopt <= 70) {
LikesHTML = '<div align="center">' +
'<div class="like-gold">' +
'<div class="like1-gold"><img width="50" height="50" src="https://i.servimg.com/u/f20/16/85/77/67/o8888812.png" /></div>' +
'<div class="like2-gold"><img width="100" height="50" src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.png" /></div>' +
'<div class="like3-gold">gold Post<br />★★★★★</div>' +
'</div>' +
'</div>';
} else if (Likestopt >= 8 && Likestopt <= 15) {
LikesHTML = '<div align="center">' +
'<div class="like-Silver">' +
'<div class="like1-Silver"><img width="50" height="50" src="https://i.servimg.com/u/f20/16/85/77/67/o8888811.png" /></div>' +
'<div class="like2-Silver"><img width="100" height="50" src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.png" /></div>' +
'<div class="like3-Silver">Silver Post<br />★★★</div>' +
'</div>' +
'</div>';
} else if (Likestopt >= 3 && Likestopt <= 7) {
LikesHTML = '<div align="center">' +
'<div class="like-Bronze">' +
'<div class="like1-Bronze"><img width="50" height="50" src="https://i.servimg.com/u/f20/16/85/77/67/o8888810.png" /></div>' +
'<div class="like2-Bronze"><img width="100" height="50" src="https://i.servimg.com/u/f20/16/85/77/67/facebo10.png" /></div>' +
'<div class="like3-Bronze">Bronze Post<br />★</div>' +
'</div>' +
'</div>';
}
if (LikesHTML) {
currentPost.find(authorSelector).after(LikesHTML);
}
});
});
By modifying the following part of the code
|
Replace
|
---------------------------------------
This customization is a great way to motivate members and encourage them to engage more with the content. Try out this code today and see how it enhances member interaction with your posts!,
hope this system will contribute to improving content quality and inspire everyone to present their best work.
Last edited by كونان2000 on September 17th 2024, 5:34 am; edited 3 times in total
invisible_fa, SarkZKalie, TonnyKamper, poesia-verses and Wizzard like this post
كونان2000 likes this post
Re: Custom messages in posts based on number of likes
Just a reminder: You still need to follow the rules and guidelines in this section. That includes the global ones, too.
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.
Re: Custom messages in posts based on number of likes
Wizzard and TonnyKamper
Thanks to both of you. I’m glad both of you liked it. ^^
Could you please clarify what specific rules or guidelines I may have overlooked? I want to ensure that I adhere to all the requirements.
Thanks to both of you. I’m glad both of you liked it. ^^
hi SLGraySLGray wrote:Just a reminder: You still need to follow the rules and guidelines in this section. That includes the global ones, too.
Could you please clarify what specific rules or guidelines I may have overlooked? I want to ensure that I adhere to all the requirements.
TonnyKamper, poesia-verses and Wizzard like this post
Re: Custom messages in posts based on number of likes
The one that deals with font/text. like size and bold.
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.
Re: Custom messages in posts based on number of likes
I think the rules here are a bit too strict,SLGray wrote:The one that deals with font/text. like size and bold.
but my post has been edited.
Wizzard likes this post
Similar topics
» Number of likes shown in profile
» PM Number Count on Custom Menu
» Be able to increase number of custom email adresses
» Number of messages/points ect after forums delete
» New: Sort the list of topics by number of views, messages, by author, …
» PM Number Count on Custom Menu
» Be able to increase number of custom email adresses
» Number of messages/points ect after forums delete
» New: Sort the list of topics by number of views, messages, by author, …
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum