• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Rounded avatar?

Andy.N

Well-known member
#7
.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
#8
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
#11
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
 

cmeinck

Well-known member
#13
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
#19
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
#20
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.