MyBB Tutorials
1.6 / 1.8 Customize usergroup formats
Submitted by sword art, 12-05-2016, 10:50 PM, Thread ID: 21084
Thread Closed
This guide is for anyone, who wants to customize their Member Groups.
It's great if you're willing to distinguish between Staff, Members, Donators or other Member Groups.
I'll add some default codes within this guide, which you can easily implement on your website.
Useful Links:
Link to all FA icons
We'll be using Font Awesome icons.
Link to HTML Color Names
There are many colors that may suite your needs or color tastes, that's why this is handy.
You don't want to have your Members to have cyan color on a Light Skin and so forth.
Step by Step
ACP > Users & groups > Groups > (group of your choice)
Username Style /Group Formatting Field is what we're going to be working with:
I will be using the " fa-fa-heart " icon as default for Admins.
fa fa-user means icon used, all FA icon codes are found in useful links.
means the user icon will be pink(so it's distinguished from other Members.)
means the color of the Admin's username.
Final result:
![[Image: wJ85.png]](https://i.pi.gy/wJ85.png)
Additionally:
You can add other formats like hexadecimal and shadows.
Example:
It's great if you're willing to distinguish between Staff, Members, Donators or other Member Groups.
I'll add some default codes within this guide, which you can easily implement on your website.
Useful Links:
Link to all FA icons
We'll be using Font Awesome icons.
Link to HTML Color Names
There are many colors that may suite your needs or color tastes, that's why this is handy.
You don't want to have your Members to have cyan color on a Light Skin and so forth.
Step by Step
ACP > Users & groups > Groups > (group of your choice)
Username Style /Group Formatting Field is what we're going to be working with:
I will be using the " fa-fa-heart " icon as default for Admins.
Code:
<i class="fa fa-heart" style="color: pink;"></i> <span style='color: pink'>{username}</span>- Remember to keep {username}: </span>
- Also depending on what fontawesome Icon you use it might be best put a space between </i> and <span style> to make the names not collide.
fa fa-user means icon used, all FA icon codes are found in useful links.
Code:
"color: pink;"means the user icon will be pink(so it's distinguished from other Members.)
Code:
span style='color:pink'means the color of the Admin's username.
Final result:
Additionally:
You can add other formats like hexadecimal and shadows.
Example:
Code:
<i class="fa fa-star-o" style="color:#ff5e65;"></i><span style="color:#ff5e65; text-shadow: 0px 0px 5px rgb(255, 0, 0);">
{username}</span>Users browsing this thread: 3 Guest(s)