CSS to make your avatar circular in your MP?

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

Is there CSS available to make your avatar circular? I searched W3Schools.com and the only thing that I could see that comes close is the border-radius, but it doesn't seem to make it completely circular.

I mean, I know that the avatars are circular, but I didn't know if it was possible to make it so the avatar is made circular with CSS since in my project at the moment the element I'm trying to make circular is my default avatar. I don't want to make it circular for everyone; just a few people with a slight glow on it, if possible - I know the glow maybe pushing it, but it could probably be done with the shadow CSS.

I just didn't know if anyone knew of any other way to do it.

Thanks so much!

[Brian]

Hi, Alan Vende.

Have a look at this thread: support.proboards.com/thread/561108/circular-avatars

[Alan Vende]

Thanks, Brian!

[Azy]

A couple of notes to tack onto that thread:
Sometimes you'll need to set overflow to hidden once you round off the corners, because the image shows through anyway. I forget under what circumstances this happens, I *think* it's with flash avatars (such as your one now)
Another point is non-square avatars will look oval. I have searched LONG AND HARD for a fix, but the only thing that works that allows me to clip to a square first, requires the avatar URL. If Proboards released a $[user.avatar.href] variable, this would be easy to code a work around. 

So all you can do for rectangular avatars is to force the dimensions back to a square, which doesn't look *too* bad with smaller avatars like avatar_quote anyway.

[Alan Vende]

Oct 14, 2015 4:20:48 GMT -8 Azy said:

A couple of notes to tack onto that thread:
Sometimes you'll need to set overflow to hidden once you round off the corners, because the image shows through anyway. I forget under what circumstances this happens, I *think* it's with flash avatars (such as your one now)
Another point is non-square avatars will look oval. I have searched LONG AND HARD for a fix, but the only thing that works that allows me to clip to a square first, requires the avatar URL. If Proboards released a $[user.avatar.href] variable, this would be easy to code a work around. 

So all you can do for rectangular avatars is to force the dimensions back to a square, which doesn't look *too* bad with smaller avatars like avatar_quote anyway.

My avatars were originally squares, though. It's only for one set of profiles that I want to do this for, though, and I have gotten it a little bit. I think you can see it here, but if you can't, let me know!

I have made the avatar circular with the following CSS:

/* Circular Avatar */
.mini-profile.remembrance-mp .avatar {
   border: 1px solid #FFFFFF;
   border-radius: 100%;
   height: 165px;
}
I also did this with the background of the last online information:

/* User Registered On Info */
.mini-profile.remembrance-mp .online-account {
   display: block;
   border: 1px solid #888888;
   border-radius: 25px;
   background-color: #FFFFFF;
   width: 130px;
   padding-top: 2px;
   padding-right: 3px;
   padding-bottom: 2px;
   padding-left: 3px;
   margin-left: auto;
   margin-right: auto;
}
Although, I wish I could somehow find a way to make the actual text white like I did the other (the Custom title, for example), but no matter how I code it, it won't render (no matter what browser I use - an old or a new one.)

[Azy]

I'm not seeing a last online dinger anyway, so I'm guessing it's a member-only thing. (I really should register lol, and you can on mine! (Do you have pets? ))
For stuff that doggedly determines to be stuck a certain way, try the !important attribute after the property declaration. Also look out for inline styles, 'cause those'll be hard to override.

[Alan Vende]

Ack! My bad. I keep forgetting what I make member's only and what I make visible to guests. I thought I made it so everything I had was visible to guests... then I realized that what I have is on a test theme at the moment and isn't available on all themes.

I do have pets, actually, two male cats!

I tried the !important declaration a lot. Actually, I use it a few times in the Custom Mini-Profile Creator Plugin!