ips tutorial Customizing Member Groups Icons/Color

[Xbotero]

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 > Members > Groups > Edit (Pencil Icon)

Admins

• Group Formatting Field is what we're going to be working with:
• I will be using the fa-fa-user icon as default for both Admins, Members and Mods.

<i class="fa fa-user" style="color: red;"></i> <span style='color:#ffff'>
Group Name Remains in all cases: </span>

• What you see above, is customized color/icon that I use on my boards for admins.
  • fa fa-user means icon used, all FA icon codes are found in useful links.
  • "color: red;" means the user icon will be red (so it's distinguished from other Members)
  • span style='color:#ffff' means the color of the Admin's username.

Members

• The code remains the same, but it won't be red, but it will have the same color as the username, so in this case it will look like this:

<i class="fa fa-user" style="color: ffff;"></i> <span style='color:#ffff'>

Moderators

• The same icon, but green color.

<i class="fa fa-user" style="color: green;"></i> <span style='color:#ffff'>

This is all how it looks like in the end.

Customization

Let's say i want to create a Donator Group with a specific icon/color. I want the icon to be a green dollar bill.

<i class="fa fa-usd" style="color: green;"></i> <span style='color:fffff'>

This is how it looks like