XF 2.1 Default ("letter") avatar border

[Wildcat Media]

I'm wrapping up the styling for one of my forums, using a custom theme. But this modification I'm looking to do should apply to any theme, as I'm pretty sure this is part of the default XF style properties.

What I want to do is put a border around the default ("letter") avatar, like this:




As you can see, I have it working. Yet I feel like it's a hack. I have to define a different border for each avatar size. I did not bother with the smallest size (showing activity in a thread) because the border is needed to separate the offset avatar from the main one.

This is what I have in extra.less. I'm wondering if it will be reliable, cover all the available sizes, and isn't too hacky. I also wonder if there is an easier way to do this. So far it seems good:

.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 3px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--xxs.avatar--default.avatar--default--dynamic,
.avatar.avatar--xxs.avatar--default.avatar--default--text {
    border: 2px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--l.avatar--default.avatar--default--dynamic,
.avatar.avatar--l.avatar--default.avatar--default--text {
    border: 12px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--m.avatar--default.avatar--default--dynamic,
.avatar.avatar--m.avatar--default.avatar--default--text {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--o.js-avatar.js-avatarCropper.avatar--default.avatar--default--dynamic {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

Any thoughts? I don't have to launch with it, but I find the forum looks much better with some kind of border around the default avatars.

 

[Max Taxable]

I agree it makes the default avatars look better. Good job!

 

[Wildcat Media]

So here's a more concise way of doing this--I observed that this property works for all sizes:

.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 0.13em solid rgba(0,0,0,0.12);
    font-weight: 700;
}

I use black with an alpha channel of 0.12 to darken the border slightly. You can use rgba(255,255,255,0.12) to lighten it. Increase or decrease the alpha channel to change how much lightness or darkness you want to apply. Adjust the border width as needed.