Replace your emoji button

[earnest mountain]

this is my first css snippet so please tell me if there's any issues with it

[viscid valley]

very cooo

[earnest mountain]

thank you :3

[earnest mountain]

this looks great with refactor's
spinny emojis #1198153087760728124 message

[fresh moat]

i appreciate the exploding cat

[bitter trout]

nice!

[quiet frigate]

perfectionn

[short badger]

I love this, but I found a small bug if someone's also using the EmojiReplace theme, where the grey emoji button would still have the regular emoji as background, fixed it by adding an empty grey emoji at its place instead

.sprite__294b3.spriteGreyscale__750f4 {
    mask-image: url(https://cdn.discordapp.com/emojis/1024751291504791654.png) !important;
    mask-size: 24px !important;
    background-image: url(https://cdn.discordapp.com/emojis/1224729618917883914.webp) !important; /* fix emojireplacer */
}```

[earnest mountain]

oh i had the important labels there but decided to remove them to try to be more compatible with stuff that wants to override it

thanks for telling me :3

[short badger]

Yeah I had to re-add them because the other theme would just replace it

[clever burrow]

hope ya dont mind but I made it semi-future proof and any emoji even non 1:1 should work

:root{
  --customEmojiIconURL: url(https://cdn.discordapp.com/emojis/1217110775601172591.gif?size=240&quality=lossless);
  --customEmojiIconMask: url(https://cdn.discordapp.com/emojis/1217110775601172591.gif?size=240&quality=lossless);
}
/* Custom Emoji Button */
[class*=emojiButton] [class*=spriteColored]{
  background: var(--customEmojiIconURL) center/contain no-repeat;
}

[class*=emojiButton] [class*=spriteGreyscale]{
  mask: var(--customEmojiIconMask) center/contain no-repeat;
}

with viggy as a default!

[short badger]

[unreal finch]

oo viggy

[earnest mountain]

thank you :3

[clever burrow]

[winter whale]

updated classes, this should now work.

/* Custom Emoji Button */
.sprite_d91a75.spriteColored_d91a75 {
    background-image: url(https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=128&quality=lossless);
    background-size: 24px;
}

.sprite_d91a75.spriteGreyscale_d91a75 {
    mask-image: url(https://cdn.discordapp.com/emojis/1024751291504791654.png?size=128&quality=lossless);
    mask-size: 24px;
}```

[earnest mountain]

thanks

[midnight pagoda]

this isn't working for me for whatever reason, not even when removing all the other css snippets

[winter whale]

just edited the message, copy that one.

[midnight pagoda]

that works, thank you!

[winter whale]

you're welcome! if it breaks in the future again please mention me. 🙂

but a quicker way would be copying that css and pasting into https://syndishanx.github.io/Website/Update_Classes.html

since it will provide the updated classes

[midnight pagoda]

ooooh understood, thanks!

[ornate fiber]

wanted to ask for an updated version, but the site did it, thank you

/* Custom Emoji Button */
.sprite__04eed.spriteColored__04eed {
    background-image: url(https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=128&quality=lossless);
    background-size: 24px;
}

.sprite__04eed.spriteGreyscale__04eed {
    mask-image: url(https://cdn.discordapp.com/emojis/1024751291504791654.png?size=128&quality=lossless);
    mask-size: 24px;
}```

[ornate fiber]

the visual refresh broke it again

[clever burrow]

use #1224558120735346708 message

forces it to center to the element

[midnight pagoda]

how do I make it so that when it's just a shadow it doesn't move?

nvm, managed to do it myself

[clever burrow]

was gonna say it's as simple as changing .gif to .png lul

[midnight pagoda]

yeah, somehow I was expecting for it to be more complex so it was not my first thought lmao

[earnest mountain]

i didnt realize people were still using this!

im back briefly to update the snippets that have new messages

so this one included