:venniepeeking: More compact buttons

[vocal forge]

we're so back......

[feral egret]

idk if you’d be up for it but with treatment 2 you could probably have these buttons without the entire sidebar

dunno though just a thought

(Nice job btw)

[wraith otter]

Variant 2 is broken for me, probably due to other parts of my css

[wraith otter]

thank you!

[feral egret]

np

variant 2 is a bit weird though cause there’s nothing to differentiate the scroller in the home page from the one in the dms page

last i checked

[wraith otter]

yeah it is, but I don't like having DMs and the other menus separate like that

[feral egret]

that’s fair

tbh home doesn’t have enough buttons to really warrant it having its own page

even without any snippets the scroller just looks way too empty

[wraith otter]

only the header at the top

[feral egret]

that variant could definitely use more polish i feel

[wraith otter]

home vs DMs

that's the only difference I found

[feral egret]

yeah

navigation’s a bit odd too cause the DMs area doesn’t save your spot anymore

the idea has potential they could just execute it better

[wraith otter]

I'm not too fond of their latest concepts ngl

they're trying to fix issues that are simply not there

[feral egret]

yeah i get that

they really should just rollout favorites or something

that’s been an experiment for over 4 years now which is just insane

[viscid plinth]

goat

[iron void]

beautiful

[wraith otter]

thanks

[charred geyser]

a bit weird

[wraith otter]

I just noticed the [NEW] label is not centered

I'll fix it later

Jk I can't, I don't have it anymore

[feral egret]

Could clear dismissible contents to try and get it to show up

[wraith otter]

I'm all ears (for later)

[wraith otter]

alright I have no idea how to do that

[feral egret]

open the dcf overrides section in devtools and look for the override related to the shop there most likely is one there

[wraith otter]

Oh wow

I'll try it later when I get home

Thanks

[feral egret]

seems like it's this one

[wraith otter]

[wraith otter]

wait, is this the React devtools?

[feral egret]

no it's discord's devtools you should be able to open them with Ctrl + Alt + O

[wraith otter]

that does nothing on my device

it's not Ctrl + Alt + I, right?

[feral egret]

ctrl + alt + I is chrome devtools

[wraith otter]

well, nothing happens with O

[feral egret]

do you have this enabled

[wraith otter]

yep

[feral egret]

hmm

well it actually says it in the description here so idk why it doesn't work

[wraith otter]

managed to open them

by clicking here

[feral egret]

ah okay

[wraith otter]

alright that worked

thanks

[feral egret]

np

[wraith otter]

I'd say it's centered, although I used px so it might change with different scrollbar widths

hm no, it still works fine because it's inside the element

[wraith otter]

no idea why it's slightly on the right here then

[feral egret]

i could try taking a look at it in a minute

[wraith otter]

never knew about this option ngl

[feral egret]

okay instead of setting a left position on the badge set justify content to center on the link class

>.linkButton__972a0 >.link__972a0 {
        padding: 6px;
        justify-content: center;

wherever you have that ^

[wraith otter]

that

makes so much sense lol

then atp I'm going to edit the number badge as well

nah it's already good

[lilac bloom]

@wraith otter thoughts on doing these server ones lol may actually look good

[wraith otter]

What if I told you it's already a thing

But I don't want to publish it yet because it's not optimised well enough

(it's also already on my github folder, but I have no idea if it's up to date)

[lilac bloom]

that looks good cant wait to get it

[wraith otter]

well, have fun testing it
it will 100% affect your performances as of now, since it uses a few :has() selectors (I managed to reduce them to only 2) for internal logic and stuff

@import url('https://raw.githubusercontent.com/Krammeth/css-snippets/refs/heads/main/ImprovedButtons.css');

and yes, it's normal for the single "Channels & Roles" button to stay the same if it's the only one there

[silk heart]

why is :3 red

[wraith otter]

vp pindms

[patent hamlet]

can you do the same to this?

[wraith otter]

^

[patent hamlet]

works great ty

[wraith otter]

[patent hamlet]

but I'm surprised that you made this one look good in any condition and not the original one

or is that an issue with how I made the shop and nitro buttons disappear?

[wraith otter]

Uhh no, they are spaced differently

I don't remember why I did that tho, will fix asap

If it can be fixed, that is

Because the logic behind them is very different

[patent hamlet]

I hope it can

[wraith otter]

Fun fact, the original was actually the channels' one

[patent hamlet]

oh

that's cool

[wraith otter]

I found the difference, you can simply change justify-content: space-evenly to justify-content: center in the code, line 17

[patent hamlet]

COOL

TYSM

[wraith otter]

[gloomy monolith]

discord just broke this snippet

[leaden palm]

horror

[wraith otter]

and all other snippets

[gloomy monolith]

indeed

practically

[wraith otter]

just pushed the fixes to my repo, it might take a bit for github to process them

[gloomy monolith]

awesome, it's working again 👍

[wraith otter]

kudos to the class updater website because I was not going to manually update all that

[patent hamlet]

it's back to normal as if the snippet isn't there

[gloomy monolith]

a fixed version was uploaded yesterday

[wraith otter]

if you're using the plain code in the QuickCSS, simply copy and paste the new one

if it's the online theme/import, weird because I pushed the fix yesterday

[patent hamlet]

I'll change it to the import rn so I don't have to face that again

[wraith otter]

[viscid plinth]

seems u fixed the performance on them

[wraith otter]

https://tenor.com/view/falcon-and-the-winter-soldier-i-didnt-do-anything-bucky-barnes-i-did-nothing-wrong-sebastian-stan-gif-25659981

[viscid plinth]

https://tenor.com/view/shhh-shush-silence-nose-gif-17895433

[gloomy monolith]

(he indeed fixed the performance)

[viscid plinth]

take the credit

[wraith otter]

Have I?

I just fixed the classes

[gloomy monolith]

https://cdn.discordapp.com/emojis/850966136753356820.gif?size=48

[gloomy monolith]

dementia

[wraith otter]

That's 2 separate things

[gloomy monolith]

really 🤔

well i think this is what amiru was referring to

[wraith otter]

Hm nope, your screenshot is about the DMs/Nitro/Shop scroller

[wraith otter]

This is for the server channels at the top

[gloomy monolith]

ooooh you're right, i didn't even realize

[wraith otter]

Dw about it

[gloomy monolith]

i assumed it was still the same snippet since it's in this thread lol
this is why you don't assume

[wraith otter]

No it's just a different one I haven't gotten the time to post yet

But if you guys say that it doesn't slow discord down too much then I guess I can post it

[gloomy monolith]

yeah i don't notice an impact on performance

[wraith otter]

on a side note, I just pushed a small fix to this to make stuff align properly

[patent hamlet]

any idea why this is happening?

[wraith otter]

Can you inspect element the spaces in between and send a screenshot of what's there?

I'll check later on my pc if I also have that issue

[patent hamlet]

ok

[patent hamlet]

hope these help

[wraith otter]

Not really, but I hope I can replicate it on my end too

[viscid plinth]

i too have this issue

appears its only in certain servers

ive managed to replicate it in the cod server and sea of thieves server

obs and elgato too

[wraith otter]

https://cdn.discordapp.com/attachments/1228130315621371914/1288203353888915496/cat.gif

[wraith otter]

I don't really know what to say, it's working fine on my device in both cases

[wraith otter]

oh actually, there's no boost bar there

[wraith otter]

nor here

okay, I see the problem

if there's no boosting bar but there is a server banner, the position is scuffed

why would that be the case tho

I thought I had fixed that issue

okay, I just pushed a fix

@patent hamlet @viscid plinth could you please check in a few minutes and see if it's working properly?

[viscid plinth]

shall do

[wraith otter]

thanks

[wraith otter]

I did, but I guess discord changed how the elements are handled because now my fix was actually causing an issue

Should be fine now though, I tested with both cases

[patent hamlet]

kinda fixed yeah

lots of space below though

[wraith otter]

it's actually too little space above

I pushed another update, see if it's better now

[viscid plinth]

like this for me now

much better than before

[wraith otter]

yeah, that's how it's supposed to be

[patent hamlet]

it is tysm

[wraith otter]

[balmy gale]

how do i make the "friends" text visible like the original css?

[wraith otter]

I'll send the code snippet later, it's fairly easy but I need to be on pc

[wraith otter]

there you go

.e6b7699ce8339e1c-friendsButtonContainer > ._972a0d22c8afa7f0-channel > ._972a0d22c8afa7f0-linkButton > ._972a0d22c8afa7f0-link[href="/channels/@me"] > ._972a0d22c8afa7f0-avatarWithText > ._20a53846fe2e8513-content {
  display: unset !important;
}```

do mind that this will push the buttons on 2 rows when you have a pending message request

[balmy gale]

thank yu

[wraith otter]

[wraith otter]

I was thinking about actually posting this on the snippets channel, has anyone else had/found unsolved issues with it?

[plucky sage]

works fine for me

[wraith otter]

I can't even find the issue because I don't have any servers like that

although I think I fixed it anyway by bruteforcing and changing the whole code in that section

[wraith otter]

I just pushed a fix, let me know if it did anything

[plucky sage]

alrighty

not on laptop right now

[wraith otter]

no problem

[wraith otter]

oh, and if you happen to get the "new" thing again, could you please send the class here so I can add it to the styling? thanks

[plucky sage]

tested and it works

[wraith otter]

open the element a bit more

you should reach ._658442d9ffa4221c-content and open it to see its children elements

no wait

I'm stupid

[gloomy monolith]

hello stupid i'm dad

[wraith otter]

alright, let me know if the "new" moves around in a bit

I just pushed a change to make it more similar to the other snippet

[wraith otter]

so similar to this

[plucky sage]

looks good

[wraith otter]

Yippee

[lilac bloom]

lol only happens in one server its weird

[wraith otter]

https://tenor.com/view/tyler1-doggr-dogger-tyler1screaming-dogger-tyler1-gif-24625049

What's that button?

[leaden palm]

Poor cat in the background 😭

[wraith otter]

Actually, I just noticed the number badge is not where it's supposed to be
Are you sure you're using my import link?

[lilac bloom]

im using the import link yeah and its litterly only acting like that in 1 server all other servers its normal as you made it

[wraith otter]

That's extremely weird

[wraith otter]

Can you send a screenshot of the html tree for that area starting from the very top div in the scroller?

[wraith otter]

just pushed some minor changes

• fixed the "new" badge on the Channels and Roles button being moved when there was only 1 button
• tried styling the "get started" bar that appears when you first join certain servers

[wraith otter]

updated the original snippet to also include the nitro "offer" badge, as well as fixing the style

I will try to make this work again even after the classpocalypse that was unleashed on Canary, in case that ever reaches stable

[wraith otter]

updated with the new classes

[leaden palm]

Could you tell me how to make it work again?

I didn't want to bother anyone and tried to fix it on my own but I think I did something wrong

.friendsButtonContainer_e6b76 > .channel_972a0 > .linkButton_972a0 > .link_972a0[href="/channels/@me"] > .avatarWithText_972a0 > .content_20a53 {
  display: unset !important;
}

[wraith otter]

.friendsButtonContainer_e6b769 > .channel__972a0 > .linkButton__972a0 > .link__972a0[href="/channels/@me"] > .avatarWithText__972a0 > .content__20a53 {
  display: unset !important;
}```

there you go

you were missing a 9 at the end of the 1st class in your selector

.friendsButtonContainer_e6b76
vs
.friendsButtonContainer_e6b769

[leaden palm]

Thank you so much 🙏

[wraith otter]

np

[wraith otter]

thoughts about merging the 2 snippets together and adding a small control panel at the top?

[wraith otter]

Alright, I will work on it in the upcoming days and make a new post for the merged snippet on the channel