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 » Add emojis to the like and reputation buttons

Add emojis to the like and reputation buttons

3 posters
Valid
Niko
  • Forum Administrator

    Team contributor
    You have been part of the community team
    Community veteran
    You belong to this community since its ancient time
    Active Contributor
    The user has wrote more than 100 posts and comments
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Post lover
    You have liked more than 50 posts!
    Beta Tester
    You have been part of the Beta-Testing team
    Forumotion expert
    This user is an expert with Forumotion free forum hosting
    10th Anniversary (Grand Re-open)
    Thanks for being part of our grand re-opening
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Forum Writer
    You have opened more than 20 topics on the forum
    The Life of the Party
    You have made more than 20 members in our community, wow!
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 3615
      Points : 129737
    Add emojis to the like and reputation buttons


    Overview

    Description

    This tutorial will help you to add emoji to reputation button and like buttons, as well as counting votes without having to change the page!

    Demonstration

    Add emojis to the like and reputation buttons Dvkln610

    Technical limitations

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

    Installation

    Introduction

    1. This modification applies as long as your templates have not been modified significantly.
    2. You must have the reputation system.
    3. You must have the Like and Dislike system.


    CSS

    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

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

    ModernBB



    PhpBB2



    PhpBB3



    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.

    ModernBB

    • Title: free choice - does not influence the code effect
    • Where: In all pages
    • Code:

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



    PhpBB2

    • Title: free choice - does not influence the code effect
    • Where: In all pages
    • Code:

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



    PhpBB3

    • Title: free choice - does not influence the code effect
    • Where: In all pages
    • Code:

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



    Javascript Customization

    • Code:
      position_left : true,
      // true for left || false for right
    • Code:
      negative_vote : true,
      // true for negative votes || false for positive only
    • Code:
      vote_bar : true,
      // display a small bar under the vote buttons


    HTML Content & Templates Modification

    For the last step you need to go towards Administration Control Panel (ACP) Display Templates General - viewtopic_body and modify its content:

    PhpBB2

    Find this snippet :

    Replace with:

    PhpBB3

    Find this snippet:

    Replace with:


    Notes

    Approved byNiko
    Approved on January 29th 2022
    Tested on ModernBB / phpBB2 / PhpBB3 - on modern browsers
    Difficulty level  / 
    Source Add emojis to the like and reputation buttons by كونان2000

    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
    Cryptic


    • 10th Anniversary (Grand Re-open)
      Thanks for being part of our grand re-opening
      Merry Christmas 2022
      Thanks for having been with us during Christmas season!
      Members true love
      You have received more than 15 likes on your posts. Seems our members really like you!
      Community newbie
      Belongs to the community for at least two years
      Active Contributor
      The user has wrote more than 100 posts and comments
      Passioned user
      You have participated in 50+ different topics, a true fan!
        Posts : 107
        Points : 30348
      Awesome! Thank you for the tutorial!

      Valid
      Joost
      • Iperactive

        Community veteran
        You belong to this community since its ancient time
        Forumotion expert
        This user is an expert with Forumotion free forum hosting
        Active Contributor
        The user has wrote more than 100 posts and comments
        Post lover
        You have liked more than 50 posts!
        Forum Writer
        You have opened more than 20 topics on the forum
        Members true love
        You have received more than 15 likes on your posts. Seems our members really like you!
        Passioned user
        You have participated in 50+ different topics, a true fan!
          Posts : 336
          Points : 92752
        Nice tutorial!

        Topic Actions

        Sponsored




        FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Add emojis to the like and reputation buttons

        ©phpBB | Contact | Report an abuse | Cookies