Circle Avatars???

[Former Member]

Say you want your avatars to show up as circles. How would you code this???

[elli]

.avatar {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

jsfiddle.net/LuLqtnsb/

[Former Member]

Mar 11, 2016 9:29:58 GMT -8 elli said:

.avatar {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

jsfiddle.net/LuLqtnsb/

It didn't turn out in a circle.

[Former Member]

Oh wait I did it on another theme and it happened to work, elli . But how do I make that center where it takes the circle from? And how do I make it work on my profile as well?

[elli]

.avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

.avatar > img {
 width: 100%;
 height: auto;
}

jsfiddle.net/LuLqtnsb/1/

Keep in mind that this is just the concept for rounded images. You'll have to adjust it to suit your needs.

[Former Member]

testwhatiwanthere.proboards.com/thread/2/random-test?page=1&scrollTo=2

It still isn't taking the center of the image into the circle, elli.

[elli]

Like I said, this is just the concept for what you want. You'll need to make additional modifications yourself... but this should work for the mini profiles:

.mini-profile .avatar {
  width: 150px;
  height: 150px;
  overflow: hidden;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
  border-radius: 75px;
}

.avatar_size_default img,
.avatar_size_default default {
 width: 100%;
 height: auto;
}

[Former Member]

Oh there we go. This new code you made works, the previous one did not. Thanks.

[elli]

Mar 11, 2016 12:20:04 GMT -8 @draterion said:

Oh there we go. This new code you made works, the previous one did not. Thanks.

As I've mentioned three times now, I only provided you with the concept to make a round avatar. The code works fine. The assumption was that you would implement it yourself and make the necessary adjustments, rather than me having to give you the exact answer. Apparently it was wrong to assume.

[Former Member]

Mar 11, 2016 12:37:08 GMT -8 elli said:

Mar 11, 2016 12:20:04 GMT -8 @draterion said:

Oh there we go. This new code you made works, the previous one did not. Thanks.

As I've mentioned three times now, I only provided you with the concept to make a round avatar. The code works fine. The assumption was that you would implement it yourself and make the necessary adjustments, rather than me having to give you the exact answer. Apparently it was wrong to assume.

I'm sorry. I'm just not very good with CSS and the like. Never actually messed with it much til' now.

[elli]

Mar 11, 2016 12:45:41 GMT -8 @draterion said:

Mar 11, 2016 12:37:08 GMT -8 elli said:

As I've mentioned three times now, I only provided you with the concept to make a round avatar. The code works fine. The assumption was that you would implement it yourself and make the necessary adjustments, rather than me having to give you the exact answer. Apparently it was wrong to assume.

I'm sorry. I'm just not very good with CSS and the like. Never actually messed with it much til' now.

You're fine, you just didn't know, I shouldn't have made that assumption haha