19-04-2019, 09:33 AM
To replace default MyBB userstars by a modern good looking FontAwesome icons.
- FontAwesome v5.x library is required, please load it on your website
1) Open "postbit_classic" and "postbit" template and find this this line of code:
and replace it with this code:
2) Open "memberlist_user" template and find this line of code:
and replace it with this code:
3) Open "member_profile" template and find this line of code:
and replace it with this code:
4) Open "global.css" stylesheet and add at the end this block of code:
5) You are done, check the result!
- FontAwesome v5.x library is required, please load it on your website
1) Open "postbit_classic" and "postbit" template and find this this line of code:
{$post['userstars']}
and replace it with this code:
<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span>
2) Open "memberlist_user" template and find this line of code:
{$user['userstars']}
and replace it with this code:
<span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span>
3) Open "member_profile" template and find this line of code:
{$userstars}
and replace it with this code:
<span style="text-align: center;" class="userstar star_{$stars}" title="{$usertitle}"></span>
4) Open "global.css" stylesheet and add at the end this block of code:
/** Usergroup star rating - FontAwesome v5 - MyBB.Group **/
.userstar {
font-family: Font Awesome\ 5 Free;
font-size: 13px;
color: #969696;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
font-weight: 900;
}
.star_0 :before {
content: "\f005\f005\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_1 :before {
content: "\f005";
}
.star_1 :after {
content: "\f005\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_2 :before {
content: "\f005\f005";
}
.star_2 :after {
content: "\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_3 :before {
content: "\f005\f005\f005";
}
.star_3 :after {
content: "\f005\f005\f005\f005";
font-weight: 400;
}
.star_4 :before {
content: "\f005\f005\f005\f005";
}
.star_4 :after {
content: "\f005\f005\f005";
font-weight: 400;
}
.star_5 :before {
content: "\f005\f005\f005\f005\f005";
}
.star_5 :after {
content: "\f005\f005";
font-weight: 400;
}
.star_6 :before {
content: "\f005\f005\f005\f005\f005\f005";
}
.star_6 :after {
content: "\f005";
font-weight: 400;
.star_7 :before {
content: "\f005\f005\f005\f005\f005\f005\f005";
}
5) You are done, check the result!