Rounded avatar?

[BBNZowner]

Hi there, I've seen on a few forums people have a mod or template edit which makes all avatars rounded into a circle - I'm sure I've seen something here about it to but can't find the thread anymore.

Any idea how to do this?


I've tried editing the postbit.css as so (ive tried a few things here, heres one example):

.postbit .postuseravatarlink img {
    height: 150px;
    width: 175px;
    border-radius: 50px;
    border: 0px none;
    float: right;
}

no result
I'm still pretty useless at figuring exactly what to do for things like this haha, chances are im nowhere near the right place

[Lynne]

We would need a link to a thread on your site, and an image of what you want, in order to help with CSS issues.

[BBNZowner]

I'm currently testing on the completely default template, with no changes. So the CSS is all original from that one (I'd provide a link, but my current forum template is locked to a customised one for users).

I've attached an image of what id like to achieve (badly edited as I've forgotten to bookmark the forum running it and away from photoshop :P).

Basically, any uploaded avatars show up as a circle instead of the original picture shape.

[ozzy47]

Perhaps this mod, https://vborg.vbsupport.ru/showthread.php?t=305608

[BBNZowner]

I will have a look at the mod, thanks

edit: Not quite what I had in mind, too much going on with that for my forum.

[TheLastSuperman]

Hmm making it a circle can be done w/ CSS but all would need to be the same size avatar... gosh I've seen something before css wise that did what you said and made whatever image a perfect circle it may have used some .js as well can't recall but here's a snippet that rounds corners of avatars in posts see if you can tinker with this some (paste @ bottom of additional.css):

.postuseravatar img {
	-moz-border-radius-top{vb:stylevar right}: 10px !important;
	-moz-border-radius-top{vb:stylevar left}: 10px !important;
	-webkit-border-top-{vb:stylevar right}-radius: 10px !important;
	-webkit-border-top-{vb:stylevar left}-radius: 10px !important;
	border-top-{vb:stylevar right}-radius: 10px !important;
	border-top-{vb:stylevar left}-radius: 10px !important;
	-moz-border-radius-bottom{vb:stylevar right}: 10px !important;
	-moz-border-radius-bottom{vb:stylevar left}: 10px !important;
	-webkit-border-bottom-{vb:stylevar right}-radius: 10px !important;
	-webkit-border-bottom-{vb:stylevar left}-radius: 10px !important;
	border-bottom-{vb:stylevar right}-radius: 10px !important;
	border-bottom-{vb:stylevar left}-radius: 10px !important;
}

^ Change the 10px to 50px or your value.

Edit: Ohh and when you're tinkering w/ css and you use additional.css to "overwrite" a default definition, well if it already had a border-radius defined (any css) and you overwrite in additional.css w/o using !important it may not display your changes SO if you ever run into a scenario where you know it should work but it's not simply add !important to the end to ensure it knows "hey this is important to show just like this".

[BBNZowner]

That has done exactly what I wanted, thanks!