The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add stars to the topic automatic

4 posters

Go down

Add stars to the topic automatic Empty Add stars to the topic automatic

Post by كونان2000 February 12th 2022, 8:37 am

Add stars to the topic automatic
Add stars to the topic automatic Animat12
The number of stars increases automatically as the number of participating members increases Add stars to the topic automatic Icon_biggrin
---------------



1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify Add stars to the topic automatic Editer 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 Add stars to the topic automatic 1928220652


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
Add stars to the topic automatic Ocia_a15

Add stars to the topic automatic Summer10 Add stars to the topic automatic F2937110 Add stars to the topic automatic D8b5d910 Add stars to the topic automatic Dggqgv10 
_________________________________________________________


note...

This modification is applicable to any forum version,  Add stars to the topic automatic 4126721595

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
Add stars to the topic automatic Ocia_a16


That's it, I hope you liked the tutorial Add stars to the topic automatic 1f31f.

----------------------------------------------


 This tutorial was written by كونان2000 ^^


_________________________

This tutorial was written by كونان2000


Last edited by كونان2000 on March 29th 2022, 9:48 pm; edited 5 times in total
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 36
Reputation : 21
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

skouliki, SarkZKalie and TonnyKamper like this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by skouliki February 12th 2022, 8:40 am

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
skouliki
skouliki
Manager
Manager

Female Posts : 12336
Reputation : 1519
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper and كونان2000 like this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by كونان2000 February 12th 2022, 9:33 am

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


The line doesn't work that way I think  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>
 



Last edited by كونان2000 on February 14th 2022, 4:50 pm; edited 1 time in total
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 36
Reputation : 21
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

TonnyKamper likes this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by skouliki February 12th 2022, 12:41 pm

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

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

Female Posts : 12336
Reputation : 1519
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper and كونان2000 like this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by كونان2000 February 13th 2022, 5:33 am

@skouliki
Thanks, I'm glad you like it ! ^^
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 36
Reputation : 21
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

skouliki likes this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by Ape February 13th 2022, 8:02 pm

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.


Add stars to the topic automatic Left1212Add stars to the topic automatic Center11Add stars to the topic automatic Right112
Add stars to the topic automatic Ape_b110
Add stars to the topic automatic Keep_s10
Add stars to the topic automatic Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17639
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by كونان2000 February 13th 2022, 11:09 pm

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

كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 36
Reputation : 21
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

TonnyKamper likes this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by TheCrow February 14th 2022, 11:56 am

Please make sure you correct the CSS codes. There is a
Code:
d
missing in the first line of them.

Regards,
TC.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6780
Reputation : 785
Language : Greek, English

View user profile https://forumote.forumotion.com

كونان2000 likes this post

Back to top Go down

Add stars to the topic automatic Empty Re: Add stars to the topic automatic

Post by كونان2000 February 14th 2022, 5:10 pm

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 Razz

thank you @TheCrow Add stars to the topic automatic 1f44d


Post has been modified
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 36
Reputation : 21
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

SarkZKalie likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum