Add stars to the topic automatic
The number of stars increases automatically as the number of participating members increases
---------------
1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify button
4. Find this code:
- Code:
{POSTERS_LIST}
5. And replace by this:
- Code:
<div class="stars">
 {POSTERS_LIST}<br />
<div class="star">{POSTER_MORE_MODAL}</div></div>
       Â
        Â
  <style>
.star {
  font-size: 0;
} Â Â
.poster-list {
   float: none;
  margin-bottom: 0px;
  padding: 0px 0;
}
.poster-more-item {
 display: inline-block;
}
i.poster-modal-close.material-icons {
  display: none;
}
.poster-more-modal {
   padding: 5px;
   display: inline-block!important;
}
.poster-list .poster .poster-more-list {
  right: 45px;
  max-height: 204px;
  width: 400%;
}
 .poster-list .poster .poster-more-list div:not(:last-child) {
  margin-bottom: 6px;
  display: block;
} Â Â
  </style>    Â
Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS
- Code:
div.poster-more-list > div:nth-child(10) > span,
div.poster-more-list > div:nth-child(11) > span,
div.poster-more-list > div:nth-child(12) > span,
div.poster-more-list > div:nth-child(2) > span,
div.poster-more-list > div:nth-child(3) > span,
div.poster-more-list > div:nth-child(4) > span,
div.poster-more-list > div:nth-child(5) > span,
div.poster-more-list > div:nth-child(6) > span,
div.poster-more-list > div:nth-child(7) > span,
div.poster-more-list > div:nth-child(8) > span,
div.poster-more-list > div:nth-child(9) > span {
  background: url(https://i.servimg.com/u/f20/16/85/77/67/stars-10.png);
  background-size: 100% 100%;
  display: inline-block;
  padding: 35px 25px 30px;
}
You can change the star image to any other image
   Â
_________________________________________________________
note...
This modification is applicable to any forum version, Â
The author with the first post will not be counted.
And if you see seven stars at the top of the topic.. this means that the number of participating members is seven,
The number stops at 11 stars.
And if you want to increase the number of stars you have to add a new line to the CSS stylesheet and change the number
- Code:
div.poster-more-list > div:nth-child(13) > span
That's it, I hope you liked the tutorial .
----------------------------------------------
_________________________
This tutorial was written by @كونان2000
Special thanks to @Ù…Øمد قدوتنا  for the idea
Last edited by كونان2000 on June 24th 2023, 6:55 am; edited 6 times in total