Customize avatar style depending on user role

[Bebunch]

Hi,

I’d like to customize avatar display depending on user role : something like adding a colored border around the avatar with a different color if user is moderator, member, etc.

Is there a way to do that in Kleo ?

Thanks !

[Laura]

Hello, you can use Buddypress verified plugin and add different color badges to users, but i do not know if you can do it based on roles

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Kieran]

@Laura, what CSS class is used to generate the colored border around the profile image for profile and activity stream?

[Laura]

Hello, for profiles
ID= item-header-avatar
CLASS= rounded

For activity
CLASS= activity-avatar
CLASS= rounded

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Bebunch]

Hi Laura,

Thanks for your answer. BuddyPress Verified does part of the job : it only works on the member profile page. It seems that no badge is displayed on avatar in forums or activity feed.

Do you use a custom Kleo function to generate the avatar ? Do you know which function (custom, WP, BuddyPress, bbPress) I should rewrite (or filter) ?

Thanks.

[Kieran]

This is incredibly rough / manual and might not work everywhere so you may need to add to this.

Add the following to style.css when using a child theme, or to the css box in theme options if not running child theme.

COPY CODE

#item-header-avatar .user-1-avatar {
border: 4px solid #367bb7;
}
.activity-avatar .user-1-avatar {
border: 2px solid #367bb7;
}

The value of 1 indicates the user ID you wish to highlight in this way, so if the user ID is 32, change 1 to 32.

Hope this helps.

[Kieran]

rinse and repeat accordingly for X amount of admins.

[Bebunch]

Hi,

Thanks !

I found another way by using the standard WP “get_avatar” filter : it gives the user Id as an argument and I’m able to get the user role and add my now class to the avatar.

COPY CODE

add_filter('get_avatar','change_avatar_css', 10, 5);
function change_avatar_css($class, $id_or_email, $size, $default, $alt) {
	$class = str_replace('class="avatar', 'class="avatar-bs-role-'.bs_user_customrole($id_or_email).' avatar', $class) ;
	return $class;
}

[Author]

Posts