Global avatar fallback workaround

Published on

We had a recent request where the commenters of the ReplyBox were not uploading a profile picture. The website owner didn’t really like the look of the initials we fallback to so asked if they could upload an image if the commenters do not have an avatar uploaded. Although this is a great functionality, we’ve only had 1 or 2 requests for it so felt it wasn’t hugely useful to code in the functionality in ReplyBox.

We have, however, got a great workaround that anyone can use. As we allow custom CSS in ReplyBox, then we can simply override anyone with no avatar uploaded with a single line of CSS.

.comments-list div.avatar { background-image: url( https://your-website.com/fallback-avatar.jpg ) !important; }

That’s it, simply change “https://your-website.com/fallback-avatar.jpg” to your full image path and it will display. To place the CSS in ReplyBox, go to your Account > Site > Settings > Design > Custom CSS.

Before:

ReplyBox avatars

After:

ReplyBox avatar override

Is this something you will use?