How To: Change round avatars to square in nsane Forums

[Karlston]

This method uses CSS to change the displayed avatars from round to square. 

 

I wrote it because most avatars' images are square or rectangular, and making them round hides the corners of the image. Dilbert's armpits disappeared when the image was rounded.

 

Use the Stylus addon (available for Firefox and Chrome) to apply the following CSS to www.nsaneforums.com.

 

Stylus (for Firefox)

 

Stylus (for Chrome)

 

 .ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large:after {
    border-radius: 0 !important;
}

 .ipsUserPhoto_medium img, img.ipsUserPhoto_medium, .ipsUserPhoto_medium:after {
    border-radius: 0 !important;
}

 .ipsUserPhoto_small img, img.ipsUserPhoto_small, .ipsUserPhoto_small:after {
    border-radius: 0 !important;
}

 .ipsUserPhoto_tiny img, img.ipsUserPhoto_tiny, .ipsUserPhoto_tiny:after {
    border-radius: 0 !important;
}

.ipsUserPhoto_mini img, img.ipsUserPhoto_mini, .ipsUserPhoto_mini:after {
    border-radius: 0 !important;
}

.ipsUserPhoto_xlarge img, img.ipsUserPhoto_xlarge, .ipsUserPhoto_xlarge:after {
    border-radius: 0 !important;
}

.ipsUserPhoto_tinier img, img.ipsUserPhoto_tinier, .ipsUserPhoto_tinier:after {
	border-radius: 0 !important;
}

It should also work for any other Invision powered forum.

 

EDIT: December 20, 2018 - Added squaring of the mini avatar images (.ipsUserPhoto_mini) that show when clicking on the Notification icon (bell) top right.

 

EDIT: May 16, 2019 - Added squaring of profile photo (.ipsUserPhoto_xlarge) shown near top left in member profile.

 

EDIT: March 23, 2020 - Added squaring of tinier photo (.ipsUserPhoto_tinier) which appear in embedded posts. Thanks to the eagle-eyed @TrojanK for spotting that one. 👍

[TrojanK]

Saw your edit 😄 I made a GIF for him

[I4rg£8all8ag]

Yerrrrr Dilbert's got armpits again 😁😁😁

[Karlston]

Oops... missed one...

 

Added squaring of the mini avatar images (.ipsUserPhoto_mini) that show when clicking on the Notification icon (bell) top right.

[Karlston]

Added squaring of profile photo (.ipsUserPhoto_xlarge) shown near top left in member profile.

[vitorio]

2 hours ago, Karlston said:

Added squaring of profile photo (.ipsUserPhoto_xlarge) shown near top left in member profile.

Please provide image. Thanks.

[Karlston]

25 minutes ago, vitorio said:

Please provide image. Thanks.

 

 

[TrojanK]

There's also the tinier avatar which appears when you embed a post

(see tinier avatar 👇)

 

PS:

I'm using the following code for avatars

img.ipsUserPhoto, .ipsUserPhoto img {border-radius: 4%;}

 

[Karlston]

21 hours ago, TrojanK said:

There's also the tinier avatar which appears when you embed a post

 

Nicely spotted. Have added the fix for that to the OP.

 

21 hours ago, TrojanK said:

I'm using the following code for avatars

 

Gives slightly rounded corners?

[TrojanK]

4 minutes ago, Karlston said:

21 hours ago, TrojanK said:

I'm using the following code for avatars

 

Gives slightly rounded corners?

Yes.