Current time: 04-07-2020, 10:34 PM
Hello There, Guest!
  • Search
  •  
    Thread Rating:
    • 0 Vote(s) - 0 Average

    FontAwesome (v5) - usergroup stars


    MyBB Group Developer
    #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!
    Like Reply
    Junior Member
    #2
    it will be more great if every guide would have screenshot /gif too
    Like Reply

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