Rounded Avatars - Mini Profile - Updated

[Former Member]

Rounded Avatars
On Mini Profile

Tested
Using Latest Browsers
Chrome - Firefox - Microsoft Edge - Internet Explorer 11

Screenshots






Go -Themes
Advanced Styles & CSS
And add the code below at the Bottom of the style sheet


You can change the border:1px solid #000000  To any colour


/* Rounded Avatars I */
.avatar { .rounded-corners(40%, 40%, 40%, 40%); }
.avatar > img { .rounded-corners(40%, 40%, 40%, 40%); }
.avatar img {
border-radius: 100%;
height: 90%; width: 90%;
border:1px solid #000000;
margin: 5px;
}




Steve

((Updated))
adding margin: 5px;
Centre aligned the avatar maker avatars better on the mini profile))

__________________

If you want to add a little padding around the avatar
Then Use The Code Below

Screenshot



Go -Themes

Advanced Styles & CSS

And add the code below at the Bottom of the style sheet

You can change the border:1px solid #000000  To any colour

You can change the border size and colour to size 5px



border:5px solid #66a3ff;


/* Rounded Avatars II */
.user.avatar { .rounded-corners(40%, 40%, 40%, 40%); }
.avatar > img { .rounded-corners(40%, 40%, 40%, 40%); }
.avatar img {
border-radius: 100%;
height: 80%; width: 80%;
border:1px solid #000000;
margin: 5px;
padding: 5px;
}
.avatar-wrapper img {
width: 80%;
}


If your avatars slightly overlap on the activity page profiles
See this link 
support.proboards.com/post/6863923/thread
For help on how to fix the issue

Or you can remove the circled avatar from the activity list

Go - Themes -  Advanced Styles & CSS



And add the code below at the Bottom of the style sheet

 .show-user .activity.list td.avatar,
.show-user .following.list td.avatar { display: none; }

[aRMY83]

This is one nice CSS code for the avatars @xsteveuk and no doubt that many will use it.

[JJ]

I love this!! Thank you, @xsteveuk !

Edited to Add:

I installed this and I still love it, but it made some of the member's avatars that were small, larger, to fit in the size of the code, so there was a distortion. Any idea on how to fix this?

[Former Member]

Oct 29, 2016 18:08:47 GMT -8 JJ said:

I love this!! Thank you, @xsteveuk !

Edited to Add:

I installed this and I still love it, but it made some of the member's avatars that were small, larger, to fit in the size of the code, so there was a distortion. Any idea on how to fix this?

Hi, JJ

I haven't been ignoring you - I spent most the morning trying different  css for the round avatar
and looking up on Goggle round avatars css tricks - and if I adjust the height: 80%; width: 80%;
it makes all the avatars small on the mini profile
I guess setting a height and width makes all the image fit that size specified

Unless any other has any suggestions


Steve 

[JJ]

Ok, thanks for trying, @xsteveuk. If I understand you correctly, this code makes all images the same size as designated in the code. I still love the idea. It made so many of the avatars look really special. But the small ones look dreadful, all blown up.