Rounded avatar?

James

Well-known member
You could just set a 50% border radius on the XF avatar, but you'll run into issues where the face might not be centred. In such cases you'll need to alter the background-position.
 

Andy.N

Well-known member
.avatar .img.m {
border-radius: 50px;
}
just make sure when you want to make a perfect square a circle to use a radius that is about half the px of the height and width
Thanks all.

Just to clarify:
I'd like to center the avatar on that specific page, not for ALL avatar on every posts.
Also, the avatar will be from a member account so I guess I will need to hotlink the avatar url.
 

ShadyX

Well-known member
Thanks all.

Just to clarify:
I'd like to center the avatar on that specific page, not for ALL avatar on every posts.
Also, the avatar will be from a member account so I guess I will need to hotlink the avatar url.
Add a new CSS class.

Eg;

Code:
.newCssClass {
border-radius: 50px;
}
Code:
<img src="useravatar.png" class="newCssClass">
 

cmeinck

Well-known member
This has been extremely helpful. The left and top of my rounded avatars are getting cropped. When I inspect element in Chrome, deseleting .avatar .img { background repeart: no repeat; }, it looks great. I'm just not sure where to remove or append the extra.css for this style. Thanks.

Screen Shot 2013-06-12 at 8.06.01 PM.png
 

Brogan

XenForo moderator
Staff member
Need a link to the site to check the code.

It looks like the avatar image is too large for the container.
 

cmeinck

Well-known member
On my pre-1.2 board, I was able to get rounded avatars (but removed due to cropping). When I add the code above to extra.css, I'm not see any changes. Did anything change?

Here's my forum.
 

Brogan

XenForo moderator
Staff member
I don't see it on that page either.
It all looks fine from here.

Bearing in mind all the CSS does is round the corners so any problems with avatars too small will already exist.
 

Jeremy

Well-known member
I don't see it on that page either.
It all looks fine from here.

Bearing in mind all the CSS does is round the corners so any problems with avatars too small will already exist.
Its *very* slight in the link I posted above, but yeah, I think its unavoidable due to varying avatar sizes.
 
Top