Home
Hello everyone
This code displays the current number of members in each group along with the images of the Group Moderator
on the homepage, making it easier for users to identify who manages the group.
Before
After
------------------------------------
This code displays the current number of members in each group along with the images of the Group Moderator
on the homepage, making it easier for users to identify who manages the group.
Before
After
------------------------------------
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 -->
- 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} : "><br /><a href="{U_MOD_VIEWPROFILE}"><div class="USERNAME-AVATAR-GROUP">{MOD_AVATAR}{MOD_USERNAME}</div></a></td>
 </div>
Installing the JavaScript
Title : Your choicePlacement : 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!
