How to make avatars round - Printable Version

How to make avatars round - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: How to make avatars round (/Thread-How-to-make-avatars-round)

How to make avatars round - Pirate - 02-04-2015

THIS IS NOT MINE
CREDITS TO: http://community.mybb.com/thread-166378.html

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

Screenshot:

[Image: 4947505225.png]

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:

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

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

Code:
.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; in both of the codes.

Hoped this helped. Smile