Custom Home Icon

[brittle sandal]

:3

[cosmic sorrel]

Thx 🗿

[azure roost]

wow how long the code is...

[cosmic sorrel]

It's not long lmfao

It's actually very short

But it's quality code that is the most important

[brittle sandal]

Honestly could prolly shorten it a bit, i’ll get on that in a sec

Content, width, and height, can all prolly go

[brittle sandal]

yep, I was able to condense 4 lines

[azure roost]

very short? no

[brittle sandal]

I mean if you absolutely wished, your majesty, I could make it a one-liner, but good luck editing things easily

:root{
--discord-icon: none; /* discord icon */--home-icon: block; /* moon icon */--home-icon-url: url('https://cdn.discordapp.com/emojis/1217110775601172591.gif?size=240&quality=lossless');}

[class*=childWrapper] > svg:not([class*=favoriteIcon]){display: var(--discord-icon);}
[class*=childWrapper]:has(svg:not([class*=favoriteIcon]))::before {display: var(--home-icon);position: absolute;background: var(--text-4);mask: var(--home-icon-url) center/contain no-repeat !important;}

[azure roost]

I have this code in my theme
https://github.com/SpaceEnergy/SpaceEnergy.github.io/blob/main/SpaceTheme/Discord/files/theme/guilds/index.css#L7-L13

[brittle sandal]

.ClassName can be rolled back at any time that discord desires I dont like using it

[azure roost]

well, you can change that

[brittle sandal]

I mean if you wanna handle random pings for a hypothetical 20 different things breaking, go for it, if I can future proof something I'll go with that option

I'm accounting for "does the user want the old icon back, do they want a special emoji? will the emoji be the same size as the other emoji?" what if it's 500x356 for example; if a 500x500 worked, 500x356 wouldnt

if it's for myself or a specific theme, then maybe I'd keep it super condensed and to my own taste, but I'm making something for other people to enjoy

[azure roost]

Emoji is no problem, you can use it and it's easy with the old icon

[brittle sandal]

without the center/contain or forcing the emoji size: https://lulu.bbaka.moe/4XPZTZqr1Mcl.gif

everything in there is there for a reason

also anything that uses a tag that's in a language might not be the same for other languages; aria-label for example

for the people that look back on this, yes, [data-list-item-id] is language specific, and can break code, if it's for yourself it's fine, if you wanna make something for all users, I wouldnt use it :3

class names are the only thing I really trust

[azure roost]

well my code has center...

[brittle sandal]

only center on mine

and removing no repeat causes this

[azure roost]

well I don't use aria-lable

[azure roost]

Everything works very well for me, no matter what the resolution of the image/gif is

[brittle sandal]

I mean it works, sure, but idk why you're coming at me about it, I posted something I liked and figured people would enjoy but we got CSS Ramsay telling me how theirs works better and is smaller, without really trying to think why I did things the way I did

you have a full theme posted on github, I dont and merely edits to Midnight, maybe instead of coming in to a thread to immediately one up someone, start with a learning opportunity and not "ugh thats a lot of code"

the stuff I did works, and I even cut 4 lines that were redundant due to center/contain no-repeat

I want to say no offense or anything, you most likely didnt mean to come off that way, but it really struck that way since that was the only message in here

[silent egret]

Imagine bragging about not using aria label when you use the class hash.
Please don't brag & say you're better because this and that. Way to ruin the vibe and shoot down someone trying to create stuff

[silent egret]

Is data-testid lang specific too? If so I need to update tons

[cosmic sorrel]

I like it too btw, very useful snippet

[brittle sandal]

hmm unsure, I'd be safe to just assume as such, classes seem to be universal regardless, I can give that a check

Where would this show up usually?

Spinner Icon, got it

[silent egret]

It's hard to check that. I recommend running debugger in console the instant it shows up so you can actually see it before it goes away

[silver bear]

@brittle sandal for me it's blank and I just copied your code. I checked it with no theme and css and still nothing :(

[brittle sandal]

Try using themeattributes plugin

I might have accidentally made it a dependency

[silver bear]

I already have that plugin installed

[brittle sandal]

hmmm

can I see the CSS you put in?

[silver bear]

yeah

[brittle sandal]

maybe a piece kinda just borked

[silver bear]

:root{
--discord-icon: none; /* discord icon */
--home-icon: block; /* moon icon */
--home-icon-url: url('https://cdn.discordapp.com/emojis/1217110775601172591.gif?size=240&quality=lossless');
}

[class*=childWrapper] > svg:not([class*=favoriteIcon]){
    display: var(--discord-icon);
  }
 [class*=childWrapper]:has(svg:not([class*=favoriteIcon]))::before {
      display: var(--home-icon);
      position: absolute;
      background: var(--text-4);
      mask: var(--home-icon-url) center/contain no-repeat !important;
}

[brittle sandal]

ok try replacing

background: var(--text-4);

with

background: var(--text-normal);

[silver bear]

still the same

[brittle sandal]

weird... just in case can I have a screenshot of the CSS window?

[brittle sandal]

imma try just a direct path for ya and see if that helps

[silver bear]

okay

[brittle sandal]

oh wait, Mac right? I think they have a different css structure

would you be fine with opening the dev tools, and selecting the home icon with this?

[silver bear]

nah I'm on Win 11

[silver bear]

ye wait

<div class="childWrapper_a6ce15 childWrapperNoHoverBg__7e8f1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z" class=""></path></svg></div>

idk if that's correct or not. I hate HTML

[brittle sandal]

win 11 but same classes

[silver bear]

😅

[brittle sandal]

oh wait a damn second lmao

swap ::before to ::after

[silver bear]

u mean like this? ```css
:root{
--discord-icon: none; /* discord icon /
--home-icon: block; / moon icon */
--home-icon-url: url('https://cdn.discordapp.com/emojis/1217110775601172591.gif?size=240&quality=lossless');
}

[class*=childWrapper] > svg:not([class*=favoriteIcon]){
display: var(--discord-icon);
}
[class*=childWrapper]:has(svg:not([class*=favoriteIcon]))::after {
display: var(--home-icon);
position: absolute;
background: var(--text-4);
mask: var(--home-icon-url) center/contain no-repeat !important;
}

[brittle sandal]

actually I kinda derped

:root{
--discord-icon: none; /* discord icon */
--home-icon: block; /* moon icon */
--home-icon-url: url('https://cdn.discordapp.com/emojis/1217110775601172591.gif?size=240&quality=lossless');
}

[class*=childWrapper] > svg:not([class*=favoriteIcon]){
  display: var(--discord-icon);
}
[class*=childWrapper]:has(svg:not([class*=favoriteIcon]))::before {
    content: '';
    display: var(--home-icon);
    position: absolute;
    width: 70%;
    height: 70%;
    background: var(--text-normal);
    mask-image: var(--home-icon-url) center/contain no-repeat !important;
    mask: var(--home-icon-url) center/contain no-repeat !important;
}

[silver bear]

now it works

[brittle sandal]

apparently the height and width was important

I cut it down to reduce space and it worked but on my theme lol

whoopsies

[silver bear]

F

btw what theme u using?

[brittle sandal]

Midnight

[silver bear]

u have a link?

[brittle sandal]

yeah lemme go get it rq

https://github.com/refact0r/midnight-discord/tree/master

[silver bear]

thank you! ^^

[brittle sandal]

of course!

[silver bear]

holy shit that theme is clean af

[silver bear]

I see you have some cyan there? is that another theme?

[brittle sandal]

nah I have a bunch of edits

[silver bear]

fair

[brittle sandal]

you have nitro so I can pass the thing I did

[silver bear]

if you are okay with that, sure^^

[brittle sandal]

  /* chroma Trans Theme */
    --bg-gradient-chroma-glow-1: #73cff4;
    --bg-gradient-chroma-glow-2: #eeafc0, #ffffff, #eeafc0;
    --bg-gradient-chroma-glow-3: #73cff4;
    --bg-gradient-chroma-glow-4: #73cff4;
    --bg-gradient-chroma-glow-5: #73cff4;

goes in your root (changes chroma glow appearance to trans colors)

I use Midnight Biscuit so some of the overlays are a little different

[silver bear]

thanks a lot! ^^

[brittle sandal]

no probs!

[silver bear]

just one more question.. do you also have this little black dot in the chatbar with that theme?

[brittle sandal]

i dont

oh wait now I do, it's only default dark theme

weird

[silver bear]

great

this looks so weird 😭

[terse carbon]

bro i thought that was just me

this removes it though

.form_d8a4a1::after {
  display: none;
}```

not sure if it affects anything else but hey no more weird black line

[silver bear]

thanks mate

appreciate it

[cosmic sorrel]

How did you get another transparent background?

[brittle sandal]

only have the 1 background, unless you mean the colors, that's just replacing Chroma Glow from the nitro appearance settings

[cosmic sorrel]

But isn't there a way to replace the background with an image? Instead of using the Chroma Glow option?