MyBB Community Forums

This is my style sheet shape_avatar.cssbut it is not working please correct this code

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

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

(2015-06-13, 09:46 AM)fredzy Wrote: [ -> ]This is my style sheet shape_avatar.cssbut it is not working please correct this code

this should be suffice imo...

td.post_avatar div.author_avatar img {
  border-radius: 50%;
}

How to make in chat circle avatars and member profile and memberlist?

Thx, But I need some help. How do I make it work on the portal page of my website?
http://fedoracraft.net/index.php

(2015-01-30, 08:09 PM)Netaro Wrote: [ -> ]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.  

Thanks for this

It's NOT work ,!!!! anyone get help us!!

(2015-03-09, 07:24 AM)Leefish Wrote: [ -> ]And all fixed

and how it was fixed ?

Templates & Styles -> themes -> your theme -> advanced mode -> find ".post .post_author div.author_avatar img"

below is the default code without the border

.post .post_author div.author_avatar img {
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
}

add border-radius: 100px or 100% for circled avatar.

modify the code to your own liking or design.

.post .post_author div.author_avatar img {
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 100px;
}

blow is a image how it looks.