Default avatar background color

MingZ

Hi Guys,

Do you know how to change the color to nominated color for the default avatar background color ?

I have tried files like :
1. /vendor/flarum/core/js/lib/helpers/avatar.js
2. /vendor/flarum/core/js/lib/utils/stringTOColor.js
3. /vendor/flarum/core/js/lib/models/Users.js

But after uploading to server. non of them are changing the color for the avartar background.

Has anyone went through this similar change ? Or any hints ?

mattsteele

MingZ If you want them to all be the same colour, the simplest way I've found is to apply custom CSS to .Avatar and .UserCard.

Pollux

MingZ Do you know how to change the color to nominated color for the default avatar background color ?

I have tried files like :
1. /vendor/flarum/core/js/lib/helpers/avatar.js
2. /vendor/flarum/core/js/lib/utils/stringTOColor.js
3. /vendor/flarum/core/js/lib/models/Users.js

You should not change any of the core files, otherwise you will run into problems sooner or later.

Like mattsteele said use CSS to apply custom styles via Admin panel > Appearance > Custom CSS, e.g.

.Avatar {
    background: black !important;
}

Otherwise you may write an extension to change the original behaviour.

MingZ

Hi mattsteele & Pollux

Thank you for the replies and it works ! :thumbup:

HD3D

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

Frink

MingZ its :thumbsup:, you forgot the s ?

MingZ

Frink from our comments , both of them can't show the emoji unlikely.

But :thumbup: was reminded hint from pop out box drop down. Perhaps another bug ?

Frink

MingZ Could be, but mine didn't show the emoji because it was enclosed in code blocks. :thumbsup: = ?, but :thumbup: = :thumbup:

Frink

MingZ did you file an issue on GitHub?

MingZ

Frink Not yet. Working on something else atm.

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 😄