The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Custom messages in posts based on number of likes

4 posters

Go down

Custom messages in posts based on number of likes Empty Custom messages in posts based on number of likes

Post by كونان2000 September 14th 2024, 5:04 am

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.

Custom messages in posts based on number of likes Ocia_a15
---------------------------------




Bronze Message: Appears when a post receives between 3 and 7 likes.
Custom messages in posts based on number of likes O8888813

Silver Message: Appears when a post receives between 8 and 15 likes.
Custom messages in posts based on number of likes O8888814

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,
Custom messages in posts based on number of likes O8888815
---------------------------------------------------------------------------------



CSS Code


Admin Panel  Custom messages in posts based on number of likes 2924924668  Display Custom messages in posts based on number of likes 2924924668 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;}
You can change the color's your self to make them fit your own forum theme.
Don't forget to save



JavaScript Code


Administration panel Custom messages in posts based on number of likes 2924924668 Modules Custom messages in posts based on number of likes 2924924668 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);
        }
    });
});
Important!: To make it works you absolutely need to indicate the version of your forum
By modifying the following part of the code
Code:
var currentServer = 'AwesomeBB';


Replace
Code:
AwesomeBB
with your forum version
---------------------------------------


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!, king


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
كونان2000
كونان2000
Forumember

Male Posts : 284
Reputation : 120
Language : Arabic

https://anime.forumperso.com/

invisible_fa, SarkZKalie, TonnyKamper, poesia-verses and Wizzard like this post

Back to top Go down

Custom messages in posts based on number of likes Empty Re: Custom messages in posts based on number of likes

Post by Wizzard September 14th 2024, 8:02 am

Great as always. Smile
Wizzard
Wizzard
Forumember

Male Posts : 125
Reputation : 23
Language : English

https://net-cafe.forumotion.com/

كونان2000 likes this post

Back to top Go down

Custom messages in posts based on number of likes Empty Re: Custom messages in posts based on number of likes

Post by TonnyKamper September 14th 2024, 11:35 am

Very nice  @كونان2000
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

كونان2000 likes this post

Back to top Go down

Custom messages in posts based on number of likes Empty Re: Custom messages in posts based on number of likes

Post by SLGray September 15th 2024, 2:57 am

Just a reminder:  You still need to follow the rules and guidelines in this section.  That includes the global ones, too.


Custom messages in posts based on number of likes Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51554
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Custom messages in posts based on number of likes Empty Re: Custom messages in posts based on number of likes

Post by كونان2000 September 15th 2024, 6:04 am

Wizzard :rose: and TonnyKamper :rose:
Thanks to both of you. I’m glad both of you liked it. ^^


SLGray wrote:Just a reminder:  You still need to follow the rules and guidelines in this section.  That includes the global ones, too.
hi SLGray
Could you please clarify what specific rules or guidelines I may have overlooked? I want to ensure that I adhere to all the requirements.
كونان2000
كونان2000
Forumember

Male Posts : 284
Reputation : 120
Language : Arabic

https://anime.forumperso.com/

TonnyKamper, poesia-verses and Wizzard like this post

Back to top Go down

Custom messages in posts based on number of likes Empty Re: Custom messages in posts based on number of likes

Post by SLGray September 16th 2024, 3:15 am

The one that deals with font/text. like size and bold.


Custom messages in posts based on number of likes Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51554
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Custom messages in posts based on number of likes Empty Re: Custom messages in posts based on number of likes

Post by كونان2000 September 16th 2024, 6:02 am

SLGray wrote:The one that deals with font/text. like size and bold.
I think the rules here are a bit too strict,
but my post has been edited. Very Happy
كونان2000
كونان2000
Forumember

Male Posts : 284
Reputation : 120
Language : Arabic

https://anime.forumperso.com/

Wizzard likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum