In this tutorial I will show you how you can easily replace img stars by FontAwesome icons.
Note: FontAwesome library is needed. Compatible with FontAwesome 4.7, may require modification for upgraded versions of FontAwesome.
1) In ACP open "postbit_classic" template.
2) Find and select this code:
3) Replace the code above by this one and save.
4) Open "memberlist_user" template.
5) Find and select this code:
6) Replace the code above by this one and save.
7) Open "member_profile" template.
8) Find and select this code:
9) Replace the code above by this one and save.
10) Open "global.css" and add at the end this code:
11) You can fully customise the output via this CSS. Letter "X" in .star_X represents the number of stars set in the usergroup settings. Save changes and go to User&Groups tab and continue to "Groups" settings in ACP.
12) Open any of you usergroup (for example "Administrators") and find "User Stars" settings.
13) Here you can set any number - in our case 0-6 (you can add more, just edit your CSS code mentioned above).
14) After that leave blank URL for User Star image on the right and save the changes.
Here you can see the output.
![[Image: 4iukH3s.png]]()
![[Image: DgrLUWt.png]]()
You can change color, icons, size and whatever you need.
Thank you @effone for your hints and support! Really appreciate it!
Note: FontAwesome library is needed. Compatible with FontAwesome 4.7, may require modification for upgraded versions of FontAwesome.
1) In ACP open "postbit_classic" template.
2) Find and select this code:
PHP Code:
{$post['userstars']}
PHP Code:
<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span>
5) Find and select this code:
PHP Code:
{$user['userstars']}
6) Replace the code above by this one and save.
PHP Code:
<span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span>
8) Find and select this code:
PHP Code:
{$userstars}
PHP Code:
<span style="text-align: center;" class="userstar star_{$stars}" title="{$usertitle}"></span>
PHP Code:
/** Usergroup star rating - FontAwesome **/
.userstar {
font-family: FontAwesome;
font-size: 13px;
color: #969696;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
}
.star_0 :before {
content: "\f006\f006\f006\f006\f006\f006";
}
.star_1 :before {
content: "\f005\f006\f006\f006\f006\f006";
}
.star_2 :before {
content: "\f005\f005\f006\f006\f006\f006";
}
.star_3 :before {
content: "\f005\f005\f005\f006\f006\f006";
}
.star_4 :before {
content: "\f005\f005\f005\f005\f006\f006";
}
.star_5 :before {
content: "\f005\f005\f005\f005\f005\f006";
}
.star_6 :before {
content: "\f005\f005\f005\f005\f005\f005";
}
12) Open any of you usergroup (for example "Administrators") and find "User Stars" settings.
13) Here you can set any number - in our case 0-6 (you can add more, just edit your CSS code mentioned above).
14) After that leave blank URL for User Star image on the right and save the changes.
Here you can see the output.
You can change color, icons, size and whatever you need.
Thank you @effone for your hints and support! Really appreciate it!