Add stars to the topic automatic

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>        

6. Hit save and click publish


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

thats a very nice idea
thank you for sharing and thank you for trying each time new things

@كونان2000 can i ask you something

lot of us have many lines at our CSS so by adding more lines we might reach the limit

can those lines - stars be counted this way?
div.poster-more-list > div:nth-child(1-10) > span
div.poster-more-list > div:nth-child(11-20) > span

hello  skouliki,
First of all, thank you for the kind words


The line doesn't work that way I think 

You can make fonts smaller in the following way

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;
}

Or you can put CSS in viewtopic_body template

Code:

 
<style>
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;
}
</style>
 

thanks i will try the css in the template and i will post my results update : it is working fine

we need members with great ideas so no need to thank me, i do believe you are a good coder

@skouliki
Thanks, I'm glad you like it ! ^^

With a little more work I'm sure the CSS files can be added to the JavaScripts This is what I have done with some of mine as I ran out of space on my CSS files.

hi @Ape

Yes, you can add CSS to JavaScript

Code:

$(function(){
  $("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 ").css({
    "background-image": "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"
        });
});

Please make sure you correct the CSS codes. There is a

Code: d

missing in the first line of them.

Regards,
TC.

TheCrow wrote:Please make sure you correct the CSS codes. There is a

Code: d

missing in the first line of them.

Regards,
TC.

Oh I wasn't paying attention

thank you @TheCrow


Post has been modified