CSS: Changing the new default avatar display so all initials appear the same color

Service: Hoop.la

Depending upon your site's design you may want to change the new default avatar display so that all initials appear the same color. With a bit of CSS you can do that.

Copy the following into your Display Settings > Custom CSS box

.default-member-avatar-container circle,
.default-member-avatar-container rect { fill: gainsboro !important; }

In this example "gainsboro" is a greyish color (#dcdcdc for those keeping score). You'll find a large listing of colors to chose from here.   You can probably find a few better color charts if this doesn't give you a color that appeals.

You will also want to update the Email CSS for "default_avatar" to match whatever color you set on the website as well. Add the following in after whatever you already have in the text box.  Remember to adjust the color to match.

background-color: gainsboro !important;

Original Post
Likes (2)
STJonmark Weber

Activity Stream

We use the color red in our logo and for a lot of other branding.


So, I inserted the following CSS into the Display Settings > Custom CSS box:

/* Make All Initials The Same Color */
.default-member-avatar-container circle,
.default-member-avatar-container rect {
 fill: #ee0000 !important;



Photos (1)

Don't forget the email theme too @Rich Melvin so that the avatars don't look oddly different in emails than they do on the forums.  That's the second part of the tip, and will give your community a more finished look.  

But, well done!  

Third link down under Design in your control panel. The last paragraph of this tip describes what to do there to make the avatars in emails that are sent out match the site.   

Made the change, but the Preview Sample Emails (both of them) don't work. The browser (Firefox version 66.0.5 (64 bit)  just sits there and shows "Transferring data from stats.g.doubleclick.net."

What does doubleclick.net have to do with our forum?

Add Reply