Closest I got to this was using a webhook that triggers on new user and then there is an API to update user where some items not coming from the initial creation field get adjusted, and adjust the ‘Avatar’ setting of the user. Never moved forward with it though, so not sure if still works. You have to have have the file loaded already, so I had loaded it to a test user, looked up that user using the API to get the current value to use when updating the new users.

This one is not very cut and dry because there are multiple places where your avatar can appear and each one would need to be addressed if you want that avatar to show in all those places.

For example: This code would only affect the flyout menu with the hamburger button.

If you want the avatar to show on a Profile Widget on a custom page - you would need different code.

/** Default Avatar for Main Menu **/

/** This Block Removes the Default User Initials **/
/** Not Sure if that 3 would be Different per Platform **/
span.ui-typography-heading-3 {
    display: none;
}

/** This Block Sets the URL for Your Default Avatar **/
 div.ui-avatar-background-light.ui-avatar-body.ui-avatar-text-color-accent {
    background-image: url("path/to/avatar.png") !important;
}

Thinking about this more, you could go a different route entirely and instead of trying to encourage them to change it by modifying the image directly, just do an email notification tied to new users, or periodically with like a welcome to the system, heres some things to go do message with steps to update their image.

Yeah - I’m not sure the ROI is there on this one.

Might be better off having an orientation contest of sorts and award points/badges for certain aspects that folks complete such as uploading an avatar.

There is another reason NOT to do this.

If the learner does upload their own avatar image - it doesn’t override the default.

Yeah, that’s why I was going the route of just putting an image in, then they can replace it. I don’t think it is worth the effort alone, but if doing another process for ‘new user do x’ than an relatively easy additional change.

myprofile-widget div.avatar__initials {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/default-profile-image.png)  !important;
	height: 100px !important;
    width: 100px !important;
}/* default avatar image */

myprofile-widget div.avatar__initials {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/default-profile-image.png)  !important;
	height: 100px !important;
    width: 100px !important;
}/* default avatar image */

This *sort of* covers a widget but not adequately. It also does not address the avatar in the side menu or the avatar on the ‘My Activities’ page.

I can still see the initials and it covers other information as shown.

Sorry! Normally it goes with this css:

/*move avatar image up and left*/
myprofile-widget div.wrapper.wrapper-shadow.ng-star-inserted div.cover div.profile { 
    padding-top: 10px !important;
    padding-left: 10px !important;
}
/*resize profile widget avatar image*/
myprofile-widget .profile .avatar-container avatar .avatar-clip .avatar__image {
    height: 100px !important;
    width: 100px !important;
}
/*move profile widget realname and email to the right*/
myprofile-widget .profile .details-container {
	padding-left: 110px !important;
	color: black !important;
	font-weight: bold !important;
}

Only appearing on the home page my profile widget is intentional.

Thanks! I forgot the initials.