FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Style most liked post on the page

Style most liked post on the page

2 posters
Valid
Guest
  • Guest

    Team contributor
    You have been part of the community team
    Active Contributor
    The user has wrote more than 100 posts and comments
    Post lover
    You have liked more than 50 posts!
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Forum Writer
    You have opened more than 20 topics on the forum
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 556
      Points : 22180
    STYLE MOST LIKED POST ON THE PAGE


    Overview

    Description

    With this tutorial you will be able to change the look of most liked post so that it can stand out from the others. In the scope of this tutorial we will keep it simple as much as possible while you can add some additional styling that suits you best.

    Demonstration

    Style most liked post on the page Most-liked

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › It only works with AwesomeBB Forumotion forums' versions

    Installation

    Introduction

    Installation is quite simple and all you have to work with JS.

    Javascript & jQuery

    For the next step you need to go towards Administration Control Panel (ACP)   Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

    • Title: Most liked post
    • Where: In the topics
    • Code:

      You need to reply to the topic in order to see the code resources




    Javascript Customization

    If there are no liked posts, none will be styled. If there are several with the same amount of likes, only the first occurance will be styled while others will be ignored.

    What can be changed in this script is style itself.
    This targets post body:
    Code:
    $(`#${maxPostsID}` + " .post")

    This targets post footer:
    Code:
    $(`#${maxPostsID}` + " .post-footer" )


    Final considerations

    The only limitation to this script is that it doesn't really take most liked post in the topic but on the page that is being browsed. Each page, different post will be styled.

    If there are two or more posts with same number of likes, script will chose first one.
    If you need different styling, please let me know.

    One last thing. In order for script to work, only likes must be enabled.

    Notes

    Approved bySystem32
    Approved on December 21st, 2022
    Tested on Most recent browsers
    Difficulty level /   
    Source FM Codes
    This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.

    Valid
    Aioria


    • Community newbie
      Belongs to the community for at least two years
      Forum member
      Belongs to the community of FMCodes
        Posts : 16
        Points : 28710
      Nice tutorial!

      Topic Actions

      Sponsored




      FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Style most liked post on the page

      ©phpBB | Contact | Report an abuse | Cookies