Square avatars CSS

almalino

If anyone interested I changed avatars to squares in my forum and it looks cool in my opinion. This is custom CSS you could add to make them square

.DiscussionListItem-author .Avatar {
    border-radius: 6px;
}

.PostUser-avatar {
    border-radius: 6px;
}

.Post-header .Avatar {
    border-radius: 6px;
}

.UserCard-avatar .Avatar {
    border-radius: 6px;
}

.AvatarEditor .Dropdown-toggle {
    border-radius: 6px; 
}

You can see the result here: https://rusforum.fi/

Suiramus

almalino

Is it possible to make the avatar square for the reply and when you start a discussion? Thanks!

halimjr

Suiramus Paste this CSS class to your custom CSS.

.ComposerBody-avatar, .PostUser-avatar {
    border-radius: 0;
}

It will set the border radius to 0, let me know if you face any issues.

Valeyard

Just use the one rule if that's what you're doing:

.DiscussionListItem-author .Avatar, .PostUser-avatar, .Post-header .Avatar, .UserCard-avatar .Avatar, .AvatarEditor .Dropdown-toggle, .ComposerBody-avatar, .PostUser-avatar {
  border-radius: 0;
  border: 4px ridge #72522F;
}

Braden

Try this one

.Avatar {
border-radius: 10% !important;
}