display the current number of members in each group along with the images of the Group Moderator

Displaying Images of the Group Moderator: The code retrieves and displays the images of the Group Moderator
in an attractive manner. This helps members know who the main people managing the group are. (The Group Moderator
have additional permissions, such as adding or removing members from the group.)

Number of Group Members: In addition to the images, the code shows the current number of members in each group with a clear number next to the group name. This information provides users with a quick idea of how active the group is.
---------------------------


First: Search in the index_body template for the code that starts with:

Code:

<!-- BEGIN switch_group_legend -->

and ends with:

Code:

<!-- END switch_group_legend -->

Remove it and replace it with:

Code:


<!-- BEGIN switch_group_legend -->
<div class="Modern-MEMBERS">{GROUP_LEGEND}</div>
<!-- END switch_group_legend -->

Second: Add the following code at the end of the groupcp_info_body template:

Code:

<div class="U-A-G"style="display: none;">
<!-- BEGIN switch_count_users_group -->
<div class="G-COUNT">{switch_count_users_group.GROUP_COUNT}</div>
<!-- END switch_count_users_group -->
 <br /><td class="USERNAME-AVATAR-GROUP" data-th="{L_USERNAME} :&nbsp;"><br /><a href="{U_MOD_VIEWPROFILE}"><div class="USERNAME-AVATAR-GROUP">{MOD_AVATAR}{MOD_USERNAME}</div></a></td>
  </div>

Installing the JavaScript

Title : Your choice
Placement : In the home page

Code:

$(document).ready(function() {
    $("a[href$='group']").each(function() {
        var url = $(this).attr('href');
    
        $.get(url, function(data) {    
            var memberList1 = $(data).find('.USERNAME-AVATAR-GROUP');
            memberList1.insertBefore('[href="' + url + '"]');
        
            var memberList2 = $(data).find('.G-COUNT');
            memberList2.insertAfter('[href="' + url + '"]');
        });
    });
});

document.write('<style type="text/css">
   .USERNAME-AVATAR-GROUP img {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    vertical-align: middle;
    margin: 3px;
}
.USERNAME-AVATAR-GROUP {
    background: aliceblue;
    font-size: 12px;
    padding: 3px;
    border-width: medium;
    border: solid 1px #00000036;
    box-shadow: 1px 0px 0px 0px;
    overflow: hidden;          
}
.Modern-MEMBERS a {
    font-size: 12px;
    background: #ffffff;
    padding: 3px;
    border-width: 0;
    border: dotted 0.4px !important;
    box-shadow: 1px 0px 0px 0px;
}
.Modern-MEMBERS {
    display: flex;
    font-size: 0px;          
}
td.USERNAME-AVATAR-GROUP {
    display: none;
}
.USERNAME-AVATAR-GROUP:after {
    content: "Moderator";
    float: left;
    position: relative;
    top: 5px;
    font-size: 12px;      
}

.G-COUNT {
    background: #000000;
    margin: 3px;
    display: inline-block;
    color: #fffffe;
    padding: 3px;
    border-radius: 19px;
    font-size: 12px;      
}
.Modern-MEMBERS b {
display: inline-block;
    margin: 2px;
    padding: 5px;
    background: #e1e1e1;
    text-align: center;
    border: dotted 1px #00000036;
} </style>');

Congratulations, and may God grant you success!

Is this only for phpBB3? It looks like it, but just curious.

Wizzard wrote:Is this only for phpBB3? It looks like it, but just curious.

hello @Wizzard
Works on all versions

Wonderful  @كونان2000

TonnyKamper wrote:Wonderful  @كونان2000

Thanks TonnyKamper ^^