Jump to content

Customizing Member Groups Icons/Color


Recommended Posts

  • Administrators

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

  • Hidden Content

      Reply to this topic to see the hidden content.
    • We'll be using Font Awesome icons.
  • Hidden Content

      Reply to this topic to see the hidden content.
    • 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 

    Hidden Content

      Reply to this topic to see the hidden content.
     as default for both Admins, Members and Mods.

Hidden Content

    Reply to this topic to see the hidden content.
  • 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:

Hidden Content

    Reply to this topic to see the hidden content.

Moderators

  • The same icon, but green color.

Hidden Content

    Reply to this topic to see the hidden content.

This is all how it looks like in the end.

Screenshot_2019-06-26-04-31-26-532_com.android.chrome.png

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.

Hidden Content

    Reply to this topic to see the hidden content.

This is how it looks like

test.thumb.PNG.199caa31e29424041e4243e9980e0f2b.png

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...