This theme component allows an admin to add flair to user avatars based on the user’s trust level. Trust level flair displays anywhere on the site that you would normally see group flair. There are a few theme settings to adjust the position of the flair in relation to the avatar.
Basic Examples (with group flair in place)
There is also a bottom-right position that will either replace group flair or be replaced by group flair depending on how you set the “group flair always on top” setting.
Main setup
Using images as flair
You will need to add your own flair images to the theme component. A good size is around 100×100px. The one I used in the example above is 88×88px. You can download a transparent template image here to get started if that’s helpful:
The easiest way to upload an image is to create a separate “Trust Level Avatar Flair Assets” local component (instructions here for those unfamiliar). When viewing the assets component, select the + Add button under the Uploads section of the theme component and choose your flair image file. Repeat this for each flair image you want to include. Once you have the images uploaded, right click on the image link and copy the url of the image. Finally, paste the url into the trust level field of your choice.
Using Font Awesome for your flair
You can use Font Awesome icons instead of using uploaded images. A full list of available icons can be found here. All you need to do is check the setting to use Font Awesome then add the name of the icon to the appropriate flair image field:
IMPORTANT NOTE: Currently you cannot mix Font Awesome and images, if there is a strong interest in doing so, I can look into it further.
Settings
You will find that there are several settings available within this theme component. They have descriptions explaining what they do and how to use them, but if anyone has an suggestions on how to improve them to make things more clear, please let me know!
Hovering over the trust-level avatar flair will display the name of the trust level. If you wish to change the name of the trust level, you can go to Admin > Customize > Text and search for the following to change the names:
js.trust_levels.names.newuserjs.trust_levels.names.basicjs.trust_levels.names.memberjs.trust_levels.names.regularjs.trust_levels.names.leader
Please feel free to post if there are any questions, problems, or suggestions!
 |
Repository | Trust-level Avatar Flair |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |