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