[Request] Square Avatars

[CasketPizza]

Any way to implement square avatars as an option? just to match like the square metro tiles in Start screen feeling. I found this code but cand figure out where to put it :/

@namespace url(http://www.w3.org/1999/xhtml);
.avatar-large, .avatar-profile, .avatar-small, .avatar-xlarge, .avatar-xsmall, .avatar-xxlarge, .user-popout .avatar-wrapper .avatar-popout {
    -webkit-border-radius: 0%;
    border-radius: 0%;
   border: 1px solid #8b9edc;
}

[TakosThings]

Yes, but you will run into issues with the status indicators (in particular) being hard to see, as well as other elements surrounding avatars looking 'off'.

I believe the classes in your example are out of date. (For reference almost all classes should look something similar to .avatar-3uk_u9, with the last bunch of characters being random jargon.)

@namespace url(http://www.w3.org/1999/xhtml); isn't necessary.

The below CSS will change the members list avatars to square. Add it to your CustomCSS if you use BetterDiscord, or to the very bottom of the CSS file (note that it won't survive an update)

.avatar-3uk_u9 .wrapper-3t9DeA{
    border-radius: 0;
}
.avatar-3uk_u9 .wrapper-3t9DeA svg foreignobject{
    mask: none;
}

In this example border-radius: 0 technically isn't required. The rounding actually comes from a masking image, which is how they achieve (in a round about way) the status indicator being separated from the avatar.

You'll have to figure out any further CSS to get the result you're looking for.

[CasketPizza]

wow! fast reply! thank you so much, that worked a treat. any ideas on how to make all the icons square? like in the chat list and the servers on the side?

On Sun, 1 Mar 2020 at 19:44, Steph notifications@github.com wrote:

Yes, but you will run into issues with the status indicators (in particular) being hard to see, as well as other elements surrounding avatars looking 'off'.

I believe the classes in your example are out of date. (For reference almost all classes should look something similar to .avatar-3uk_u9, with the last bunch of characters being random jargon.)

@namespace url(http://www.w3.org/1999/xhtml); isn't necessary.

The below CSS will change the members list avatars to square. Add it to your CustomCSS if you use BetterDiscord, or to the very bottom of the CSS file (note that it won't survive an update)

.avatar-3uk_u9 .wrapper-3t9DeA{ border-radius: 0; }.avatar-3uk_u9 .wrapper-3t9DeA svg foreignobject{ mask: none; }

In this example border-radius: 0 technically isn't required. The rounding actually comes from a masking image, which is how they achieve (in a round about way) the status indicator being separated from the avatar. [image: image] https://user-images.githubusercontent.com/20344790/75622364-26884e80-5bef-11ea-96cc-0dc88a5e4d1e.png

You'll have to figure out any further CSS to get the result you're looking for.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/TakosThings/Metro-for-Discord/issues/143?email_source=notifications&email_token=AHBGNPAGSYZYBRRGDXM4UJ3RFIN6PA5CNFSM4K7COYX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENMY2YI#issuecomment-593071457, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHBGNPFEECSR6WZIRNJ2NNLRFIN6PANCNFSM4K7COYXQ .

[TakosThings]

Easier in that case. Just find the element with the border-radius: 50% and set it to 0.

Currently the Guilds icons and Cozy chat avatars are just imgs