Skip to main content

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

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;



Dave Dreezer
Last edited by Dave Dreezer
Original Post
×
×
×