FontAwesome (v5) - usergroup stars

FontAwesome (v5) - usergroup stars - Printable Version

+- MyBB Group (https://mybb.group)
+-- Forum: Beside You (https://mybb.group/Forum-Beside-You)
+--- Forum: Guidebook (https://mybb.group/Forum-Guidebook)
+--- Thread: FontAwesome (v5) - usergroup stars (/Thread-FontAwesome-v5-usergroup-stars)

FontAwesome (v5) - usergroup stars - Eldenroot - 19-04-2019

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:

{$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!

RE: FontAwesome (v5) - usergroup stars - mujeebdgk - 20-08-2019

it will be more great if every guide would have screenshot /gif too

RE: FontAwesome (v5) - usergroup stars - mujeebdgk - 26-11-2020

this tutorial need you attention , tutorial on mybb site is working but this one in not working

BR
Mujeeb