FontAwesome (v5) - usergroup stars
#1
FontAwesome 
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!
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
FontAwesome FontAwesome (v5) - loading spinner Eldenroot 0 151 19-04-2019, 08:55 AM
Last Post: Eldenroot



Users browsing this thread: 1 Guest(s)