Rounded avatar?

[Andy.N]

I'm planning to make an XF page that is similar to this page
https://www.coursera.org/course/modelthinking

Anyone knows how to create a rounded avatar for the author like one in the link above?

 

[Andy.N]

@Brogan
How would you make the resource thumbnail/icon round as well. Thanks
I have this but the background color under the resource thumbs are not rounded.

.resourceIcon img,
.resourceImage,
.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50% !important;
}

 

[Paul B]

Try removing the background colour from .resourceListItem .resourceImage.

 

[ARSamo]

.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50px !important;
}

@Brogan
How would you make the resource thumbnail/icon round as well. Thanks
I have this but the background color under the resource thumbs are not rounded.

.resourceIcon img,
.resourceImage,
.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50% !important;
}

not working on firefox..

 

[Paul B]

It works fine on Firefox.

 

[oO5 Dynasty]

.avatar img, .avatar .img, .avatarCropper {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-khtml-border-radius: 100%;
border-radius: 100%;
}
.avatar img, .avatar .img, .avatarCropper {
background-color: rgb(60, 60, 60);
border: 2px solid rgb(255, 255, 255);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-khtml-box-shadow: 0 0 3px rgba(0,0,0,0.4);
box-shadow: 0 0 3px rgba(0,0,0,0.4);
background-position: 0 0 !important;
}
img {
-ms-interpolation-mode: bicubic;
}
fieldset, img {
border: 0;
}

This Worked for me. Got the code from @Sheldon Via https://xenadmins.com

 

[ARSamo]

.avatar img, .avatar .img, .avatarCropper {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-khtml-border-radius: 100%;
border-radius: 100%;
}
.avatar img, .avatar .img, .avatarCropper {
background-color: rgb(60, 60, 60);
border: 2px solid rgb(255, 255, 255);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-khtml-box-shadow: 0 0 3px rgba(0,0,0,0.4);
box-shadow: 0 0 3px rgba(0,0,0,0.4);
background-position: 0 0 !important;
}
img {
-ms-interpolation-mode: bicubic;
}
fieldset, img {
border: 0;
}

This Worked for me. Got the code from @Sheldon Via https://xenadmins.com

still not working in FF

 

[oO5 Dynasty]

still not working in FF

Hum, im not good at coding, but i know i did the round avatar by using the code everybody said to use. Then on my site in my side bar the avatars looked messed up. So thats when i went to a site that had it working properly and read the code and then i tried it out to see if it would work and it did. So i guess i got lucky .

 

[RobaFresca]

border-radius: 50px;

.avatar .img.m {
border-radius: 50px;
}

.newCssClass { border-radius: 50px; }

I may probably be stupid....but....could anyone of you tell me WHERE EXACTLY to make this changes as i am not a coder ?

Thx in advance

 

[Paul B]

Add it to the EXTRA.css template.

 

[RobaFresca]

Thx Mr. "Quick Response" Brogan !

 

[Heavy]

I think i've heard there is an Add-on for this or are i'm wrong?

 

[Paul B]

It doesn't require an add-on, it can be done with CSS, as explained in the thread.

 

[tommydamic68]

I am having a few avatars that are somewhat octagon for some reason after trying to have them rounded as per the code in this thread, any thoughts?


On the members page, members card and view reported content page.

 

[Chernabog]

I thought avatars were rounded automatically in XF2.1 - but mine seem to be square still :O -- is there a setting for that? ((hmmm))

 

[Paul B]

They are rounded by default but it's a style property so check that first - search for 'Avatar border radius'.