Default avatar background color

HD3D

Pollux Thanks you, the default black color worked but can we use a default image instead?

clarkwinkelmann

HD3D you should be able to set an image background via CSS.

For more advanced changes you'll probably need a javascript extension.

HD3D

clarkwinkelmann Thanks sir but I don't really need advanced changes, I just want to use a blank profile picture as default like the below one

Pollux

HD3D I just want to use a blank profile picture as default like the below one

Make your image 36 x 36 pixels in size and use this CSS:

.Avatar {
    background-image: url(https://i.ibb.co/9cj28M4/blank-profile-pic.jpg) !important;
}

You can even make the outer part of your silhouette white and the inner part transparent to keep the random colors given to users without their own avatar uploaded but with the shape of your silhouette.

HD3D

Pollux Thank you but it is not working as expected, the text is white and the background should auto resize and fit in the circle if not alright, I can resize it

Pollux

Try:

.Avatar {
    background-image: url(https://i.ibb.co/9cj28M4/blank-profile-pic.jpg2) !important;
    background-size: cover !important;
}

If you want to get rid of the single character, you might add:

color: transparent;

HD3D

Pollux Thank you so much, Worked like a charm 😍

FBI

You may change the transparent version taken from this picture below:
Transparent Avatar

Then, you're still get Colorful background avatar, like this 😀

.Avatar {
    background-image: url(https://i.imgur.com/b08hxPY.png) !important;
    background-size: cover !important;
    color: transparent;
}

HD3D

FBI Wow thanks FBI 😍

HD3D

@Pollux @FBI Guys, I have a problem, Everything works fine except the transparent profile pictures.

If Im using the custom profile picture for everyone and then someone uploads own avatar, it should automatically replace the default profile picture no? If the default profile picture is showing behind transparent profile pictures then it means it is still there behind all the profile pictures.

Please give me a solution asap 🙏

clarkwinkelmann

HD3D if you use span.Avatar, the CSS should only affect the "no avatar" state. img.Avatar will only affect the "with avatar" state.

HD3D

clarkwinkelmann Tried

span.Avatar {
    background-image: url(https://i.imgur.com/b08hxPY.png) !important;
    background-size: cover !important;
    color: transparent;
}

But it doesn't make any difference to transparent avatars like above

Edit: My bad sir, I forgot to purge the cache, it is working great now, thank you so much 😄

« Previous Page