Current time: 28-03-2024, 09:08 PM
Hello There, Guest!
Login 
  • Search
  • 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
    Development Contributor
    #2
    it will be more great if every guide would have screenshot /gif too
    Like Reply
    Development Contributor
    #3
    this tutorial need you attention , tutorial on mybb site is working but this one in not working 

    BR
    Mujeeb
    Like Reply

    Possibly Related Threads…

    FontAwesome
    Replies: 0
    Views: 3,920
    Last Post: Eldenroot
    @ 19-04-2019, 08:55 AM
     
    Replies: 0
    Views: 2,631
    Last Post: effone
    @ 14-04-2019, 11:23 AM