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 subject icons to topics in widgets

Add subject icons to topics in widgets

5 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 : 3614
      Points : 129487
    Add subject icons to topics in widgets


    Overview

    Description

    This tutorial allows you to automatically add any subject icons, if active and if assigned to topics, even in the widgets present on the portal or on the forum index.

    Demonstration

    Ultimi argomenti attiviNuovi argomenti
    Add subject icons to topics in widgets 2021-113Add subject icons to topics in widgets 2021-114

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › Requires to be the Founder of the #Forumotion Forum
    › It works with all Forumotion forums' versions but PhpBB2

    The tutorial is not compatible with the PhpbBB2 version

    Installation


    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: free choice - does not influence the code effect
    • Where: All pages
    • Code:

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



    Javascript Customization

    It is necessary to modify the version of your forum within the Javascript code, by modifying the string
    Code:
    var selector = selector ('phpbb3');

    Allowed values ​​are:
    • phpBB3
    • PunBB
    • Invision
    • AwesomeBB
    • ModernBB


     The tutorial is not compatible with the PhpbBB2 version

    HTML Content & Templates Modification

    For the last step you need to go towards Administration Control Panel (ACP) Display Templates Portal and modify the content of the template(s) we are interested in.

    "LATEST TOPICS" MODULE

    Template to modify:
    Code:
     mod_new_topics
    Find this snippet :

    Replace with:

    "LATEST TOPICS" MODULE

    Template to modify:
    Code:
     mod_most_active_topics
    Find this snippet :

    Replace with:

    "MOST VIEWED TOPICS" MODULE

    Template to modify:
    Code:
     mod_most_viewed_topics
    Find this snippet :

    Replace with:

    "LAST ACTIVE TOPICS" MODULE

    Template to modify:
    Code:
     mod_recent_topics
    Find this snippet :

    Replace with:

    "TOPICS WITH MULTIPLE REACTIONS" MODULE

    Template to modify:
    Code:
     mod_top_liked_post_month
    Find this snippet :

    Replace with:

    Final considerations

    In general, simply add the
    Code:
    .topic-with-icon
    class attribute to the div of the module you want to "populate" with the subject icons

    Notes

    Approved byNiko
    Approved on January 30th, 2022
    Tested on Most recent browsers
    Difficulty level  / 
    Source FMCodes

    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
    The sea


    • Very active poster
      The user has wrote more than 75 posts
      Forum Writer
      You have opened more than 20 topics on the forum
      Climbing user
      You have participated in 20+ different topics, keep it up!
      Community newbie
      Belongs to the community for at least two years
        Posts : 85
        Points : 22045
      Good one

      Valid
      hoanglongnhatbao


      • Community veteran
        You belong to this community since its ancient time
        Passioned user
        You have participated in 50+ different topics, a true fan!
        Active Contributor
        The user has wrote more than 100 posts and comments
        Post lover
        You have liked more than 50 posts!
        Members Guru
        You have received more than 50 likes on your posts. Our members really what you have to say!
          Posts : 145
          Points : 93767
        Thank you for this tutorial! It looks great!

        Valid
        Revolved101


        • Active poster
          The user has wrote more than 50 posts
          Climbing user
          You have participated in 20+ different topics, keep it up!
          Community newbie
          Belongs to the community for at least two years
            Posts : 55
            Points : 28095
          Thanks for the tutorial was looking for something like this

          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
            I'll try it right now, thank you

            Topic Actions

            Sponsored




            FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Add subject icons to topics in widgets

            ©phpBB | Contact | Report an abuse | Cookies