Is it possible to increase the size of a group flair?

[STORMS]

Is there an easy way to increase the size of the flair that goes by your name when attached to certain groups?

.

[Lilly]

In common - css of a theme or component. you can do something like this

Avatar flair resized from the default 40px to 60px:

.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
}

default 40 px

60 px

Can change flair location with this component:

Trust-Level Avatar Flair

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) [examples] 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” …

[STORMS]

Do I have it in the right place?

[Lilly]

looks like it. (is there something else in the header tab that’s highlighted?)

code I posted should be here:

[STORMS]

Yep, it’s all there. The flair is still 20x20 in posts.

[Lilly]

oh sorry I missed the post one.

For 30px

.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
}

.topic-avatar .avatar-flair, 
.avatar-flair-preview .avatar-flair, 
.collapsed-info .user-profile-avatar .avatar-flair, 
.user-image .avatar-flair, 
.latest-topic-list-item .avatar-flair {
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

default 20px

30px

[STORMS]

Thank you! I’m definitely not a coder, so I appreciate the support & assist!

[Lilly]

no problem. you can fine tune adjust that px sizing to granularly get it how you want.

[STORMS]

I noticed if I put a HEX color on it, it shrinks back down. Can you assist me here also

[Lilly]

yea ok to make it easier for you and others to do this, I fired up a quick theme component:

GitHub - Lillinator/custom-avatar-flair-size: Change your Discourse avatar flair size

Let me know how it works
You still have to change the flair image and background color in the group avatar flair settings. This component just provides some basic settings for sizing the image flairs and their background circles. Desktop only though - I tried some mobile stuff, but it wasn’t worth tweaking for that small.

[JammyDodger]

Would this make a good addition to Avatar Size and Shape?

[Lilly]

oh I forgot about that one. does it do the same thing? oh nm, it’s just avatars, I thought it did flairs too. hmmm might not be a bad idea…

mine is pretty basic that I threw together in a few min. I think I’d want to change the input fields format perhaps.

[JammyDodger]

I think it’s currently only for avatars, but group flairs seem ‘adjacent’ if this could be folded in. I’d have to fire it up to check though.

[STORMS]

@Lilly is it also possible to set perimeters around “stacking” flair? For what I have in mind, it would be beneficial for users to be able to stack several, based on “kinds” of groups they’re in.

[STORMS]

@Lilly why does flair disappear for me when in chat? Is there an easy way to have flair show in chats?

[Lilly]

As far as I know, flairs have never been viewable in chat. You could always add a post to the existing feature request

Avatar flairs in Chat

Are there any plans to add flair to the avatars on Chat? Would be very handy to have there (for all the same reasons its handy on Topic/PM posts).