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?

 

[Paul B]

border-radius: 50px;

 

[EQnoble]

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?

.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

 

[James]

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.

 

[Paul B]

Double Ninja!

 

[James]

Double Ninja!

In my defence, I was on mobile and SwiftKey didn't like me hyphenating words

 

[Andy.N]

View attachment 46265

border-radius: 50px;

.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.

 

[dtmcl]

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;

.newCssClass {
border-radius: 50px;
}

<img src="useravatar.png" class="newCssClass">

 

[Andy.N]

Thanks everyone for helping out so far.

Anyone knows how to put out a page in XF that can align some text/image/etc on left and right column like the example here
https://www.coursera.org/course/modelthinking

 

[Paul B]

There are loads of two column CSS guides available, here's one: http://www.dynamicdrive.com/style/layouts/category/C9/

 

[cmeinck]

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.

 

[Paul B]

Need a link to the site to check the code.

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

 

[cmeinck]

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.

 

[Paul B]

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

 

[cmeinck]

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

Perfect. Thanks!

 

[cmeinck]

Spoke too soon. Looks like it's not filling the circle completely.

 

[Paul B]

Looks fine to me in posts.
Where is that view?

 

[Jeremy]

That doesn't seem to be avoidable. I can see it happen here:
http://www.everythingicafe.com/forum/threads/iphone-6-instead-of-5s.101287/#post-999678

But its most likely due to the avatar being slightly smaller than the view window.

 

[Paul B]

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]

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.