Round/Circle Avatar Pictures.

[Netaro]

This tutorial will show you how to make your user's avatars round.

Screenshot:




Step 1: Go to: Admin CP ---> Templates & Style ---> Click on the name of your theme. (By Default it should be Default or MyBB 1.8) ---> Add Stylesheet

File Name: Doesn't matter, just make sure you end it with .css

Attached to: Globally

Then choose: Write my own content

Then write this code:

.post .post_author div.author_avatar img {
border-radius: 55%;
  transition:all 0.3s ease;
}

NOTE: If the code doesn't work correctly then try replacing border-radius: 55%;  with border-radius: 100%;

And now you are done.

If you want the avatars to become square when you hover your mouse cursor over them then add this code under the code you wrote above:

.post .post_author div.author_avatar img:hover {
border-radius: 0%;
transition:all 0.3s ease;
}

If you don't like the smooth animation just remove transition:all 0.3s ease; from both codes.

Hoped this helped.  

[ktemanuel]

hello very nice addition but I have a query like I can do to make the circle is a different color and not white
¿No es correcto?

[Netaro]

hello very nice addition but I have a query like I can do to make the circle is a different color and not white
¿No es correcto?

Add this

background: *COLOR HERE*;

To both of the codes. Change *COLOR HERE* to for example: #A2A2A2 or Red.

[ktemanuel]

Very thanks Netaro

[alv4]

This have any problems with wide avatars? because everytime I tried with other methods and it doesn't show a real circle when the picture is wide

[Wozzer]

Nice... thanks.
Can this effect also be applied to the Members List and Members Profile?

[Wozzer]

Nice... thanks.
Can this effect also be applied to the Members List and Members Profile?

I've tried to find this out myself... and failed .
Hoping someone with far better knowledge than me could help

[Wozzer]

Still trying to get this to work (i.e. be applied to the Members List and Members Profile)

I guess it is to do with:
.post .post_author div.author_avatar img

but no idea what the members list and profile would be called.

[Leefish]

In memberlist templates, memberlist user avatar, just give the img a class and then apply that in css. Something like

<img src="{$useravatar['image']}" class="avatar" alt="" {$useravatar['width_height']} />

and in css

img avatar {border-radius :50%}

[Wozzer]

Thanks Leefish,
Am obviously doing something wrong here as I can't seem to get it to work.

I have edited memberlist_user_avatar template to read:

<img src="{$useravatar['image']}" class="memberavatar" alt="" {$useravatar['width_height']} />

I have then created a css file called memberavatar.css which reads:

img memberavatar {
	border-radius: 50%;
	border: 50%;
	transition: all 0.3s ease;
}

Am I missing something?
Thanks