circular avatar with colored ring

[hdd]

i thought to have circular avatars with colored ring according to member rank like PB v6 avatars.
anyone help me writing code.
i have made the avatar circularborder-radius: 50%; border:2px #rank color??;

But i'm not getting how to do ring color according to ranks.
for example:  Admin group will have red border color of avatar , moderators group will have blue border color and similarly other member ranks.

Please help
Something like the attachment below:

Attachments:

[Retread]

There's probably a more elegant way to do this but one way I can think of involves using inline styling in the Layout Templates.

For instance, let's look at the Mini-Profile layout template for 'plain vanilla' theme:

<div class="$[miniprofile_class]">
	$[user]<br />
	{if $[user.is_guest]}Guest<br />{/if}
	{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
	{if $[user.group]}
		$[user.group.name]<br />$[user.group.stars]<br />
	{elseif $[user.rank]}
		$[user.rank.name]<br />
		{if $[user.rank.stars]}
			$[user.rank.stars]<br />
		{/if}
	{/if}
	{if $[user.custom_title]}$[user.custom_title]<br />{/if}
	$[user.warning.bar]
	<br />
	{if $[user.avatar]}
		<div class="avatar">$[user.avatar]</div><br />
	{/if}
	{if $[user.personal_text.message]}
		$[user.personal_text]<br />
	{/if}
	{if $[user.is_member]}
		<div class="info">
			Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
			{foreach $[user.mini_custom_field]}
				<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
			{/foreach}
			{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
		</div><br />
	{/if}
	{if $[user.badges_miniprofile]}
		<div class="$[user.badges_miniprofile_container_class]">
			{foreach $[user.badges_miniprofile]}
				$[user.badges_miniprofile.icon]
			{/foreach}
		</div>
	{/if}
</div>

We could change the line which is highlighted:
<div class="avatar">$[user.avatar]</div><br />

To:
<div class="avatar" style="border-radius: 50%; border:2px solid $[user.color];">$[user.avatar]</div><br />

The $[user.color] template variable holds the same color specification associated with the particular user (which is normally used for the colored Display Names for members of a group).

[Kami]

Inline styles are fine though best practice would be to use the style sheet and layout templates in combination. Usually I'd say use the style sheet entirely, but seeing as you can't call a variable in the stylesheet we'd want the variable called in the template.

In your CSS you'd want to have [to include avatars made with the avatar maker]:

.avatar-wrapper { border-radius: 50%; overflow: hidden; }

And in your templates you'd want to find this line and add this (marked in red):

<div class="avatar" style="border: 2px solid #[user.group.color];">$[user.avatar]</div>

I'm using 'user.group.color' since OP mentioned 'ranks', but $[user.color] works as well (though leave off the # if you use it, as it already comes with it).

[hdd]

Oct 21, 2019 7:30:29 GMT -8 Kami said:

Inline styles are fine though best practice would be to use the style sheet and layout templates in combination. Usually I'd say use the style sheet entirely, but seeing as you can't call a variable in the stylesheet we'd want the variable called in the template.

In your CSS you'd want to have [to include avatars made with the avatar maker]:

.avatar-wrapper { border-radius: 50%; overflow: hidden; }

And in your templates you'd want to find this line and add this (marked in red):

<div class="avatar" style="border: 2px solid #[user.group.color];">$[user.avatar]</div>

I'm using 'user.group.color' since OP mentioned 'ranks', but $[user.color] works as well (though leave off the # if you use it, as it already comes with it).

Oct 21, 2019 7:30:29 GMT -8 Kami said:

Inline styles are fine though best practice would be to use the style sheet and layout templates in combination. Usually I'd say use the style sheet entirely, but seeing as you can't call a variable in the stylesheet we'd want the variable called in the template.

In your CSS you'd want to have [to include avatars made with the avatar maker]:

.avatar-wrapper { border-radius: 50%; overflow: hidden; }

And in your templates you'd want to find this line and add this (marked in red):

<div class="avatar" style="border: 2px solid #[user.group.color];">$[user.avatar]</div>

I'm using 'user.group.color' since OP mentioned 'ranks', but $[user.color] works as well (though leave off the # if you use it, as it already comes with it).

Thanks Kami & Retrad
Perfectly what I wanted.

[hdd]

Kami   Retread


See the result from the attachment below:
Is it look like v6 mini-profile?

Attachments: