#CompactSidebarButtons

1 messages · Page 1 of 1 (latest)

shrewd roost
storm oyster
#

too bad this doesn't work to well with compact title bar snippet

dawn wasp
# storm oyster too bad this doesn't work to well with compact title bar snippet

wasnt aware of that snippet, but i do use something that achieves the same thing. you can see if it works for you:

[class^="content"] {
    [class^="sidebar"] {
        margin-top: -3.3vh;
        border-top: 0px;
                padding-top: var(--custom-app-top-bar-height);
    }
    [aria-label="Servers sidebar"] {
        --custom-app-panels-height: 20px;
        padding-top: 1vh;
    }
}
[class^="base"] {
    margin-top: calc(var(--custom-app-top-bar-height) * -1);
}
storm oyster
#

thats wha ti use

#

had to upload it as a file too many chars

dawn wasp
#

maybe that snippet is out of date? i tried it and removed the rest of my quickcss, and it didnt work just by itself

#

id recommend either checking back with that snippet bcs discord updates tend to really mess with css selectors, or try my little block of code and see whichever works best for you

vernal locust
#

For me it works when I change language to 'English US'
(Just to clarify it doesn't work in other languages)

sour fossil
#

Liked it

dawn wasp
#

update: the new discord update adds this useless activity button, and unfortunately it uses the exact same structure as the friends button, so i need to :has() to select it for now. since this is brand new, im not gonna use something like :nth-child() until this update rolls out to more people

image.png
dawn wasp
carmine citrus
#

sadly, as cool as this snippet is, it's giving me some REAL bad performance issues :(

proud violet
eternal willow
#

any idea if this shows when new cosmetics are in the shop?

dawn wasp
#

it does not, that tag has been completely removed for this

fluid zodiac
#

doesnt seem to work

unborn hull
#

this gives an incredible loss in performance for whatever reason.

fluid zodiac
#

:has maybe

upper heart
storm oyster
#

@shrewd roost this sorry i dislike getting DM's

image.png
shrewd roost
storm oyster
#

yeah

shrewd roost
storm oyster
#

this compact buttons is nice an all but it could do without the :has selector makes discord lag too much

charred kernel
# 
.scroller__99e7c[data-list-id^="private-channels-uid_"] {
  scrollbar-width: 0;
  scrollbar-color: transparent;
  >.content_d125d2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    >div:not([class]):first-child,
    >div[role="button"],
    >.privateChannelsHeaderContainer__99e7c,
    >.channel__972a0.dm__972a0 {
      width: 100%;
    }
    >.friendsButtonContainer_e6b769,
    >div:nth-of-type(3),
    >.channel__972a0:not(.dm__972a0),
    >.wrapper_ebee1d {
      margin: 0;
    }
    .channel__972a0:not(.dm__972a0) {
      margin: 0 4px;
      >.linkButton__972a0 >.link__972a0 {
        padding: 8px 10px;
        >.avatarWithText__972a0 {
          >.avatar__20a53 {
            margin: 0;
          }
          >.content__20a53 {
            display: none;
          }
        }
      }
    }
  }
}```
this works fine for now, but I can't style that new button yet since I don't have it
image.png
carmine citrus
storm oyster
silver blaze
charred kernel
#

Thank you, I'll check later if it works or if I have to edit the snippet with the experiment in mind

floral stump
#

is there a way to force these onto one line?

Screenshot_2025-11-08_at_03.03.122x.png
charred kernel
#

Reducing the padding, probably

#

And ngl, I didn't think of the messages requests button

floral stump
#

yea im trying to reduce the padding

charred kernel
#

I don't have any approvestare

floral stump
#

it's kinda working

charred kernel
silver blaze
charred kernel
silver blaze
#

ah lmao rip

charred kernel
#

if you want to be the test subject and DM me, I can check

silver blaze
#

i always keep those 4 scammers which ping me in dm and surely dont wanna offer any art submission or other stuff

#

just to have this

silver blaze
charred kernel
#

hm, I'm pondering whether to make the icon red and remove the ping

image.png
#

it's not like you would have that icon without a ping anyway

silver blaze
#

oh damn nvm now its 5 buddies hanging out there lol

image.png
silver blaze
#

hmm u could technically make it smaller and move it top right on the icon

charred kernel
#

I could also do that

#

6 buttons don't fit on there anyway, not like that

silver blaze
#

I hope they cancel this land and learn bs tho

charred kernel
#

Rn it's 10px side padding, maybe 7-8px works

charred kernel
silver blaze
#

it feels like extra mobile tabs that no one will click, while u will simply only have empty space in dms xd

#

they gotta learn that sometimes its good as it is

charred kernel
#

I'd say I'm quite happy with the result

image.png
# 
.scroller__99e7c[data-list-id^="private-channels-uid_"] {
  scrollbar-width: 0;
  scrollbar-color: transparent;
  >.content_d125d2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    >div:not([class]):first-child,
    >div[role="button"],
    >.privateChannelsHeaderContainer__99e7c,
    >.channel__972a0.dm__972a0 {
      width: 100%;
    }
    >.friendsButtonContainer_e6b769,
    >div:nth-of-type(3),
    >.channel__972a0:not(.dm__972a0),
    >.wrapper_ebee1d {
      margin: 0;
    }
    .channel__972a0:not(.dm__972a0) {
      margin: 0 4px;
      >.linkButton__972a0 >.link__972a0 {
        padding: 6px;
        >.avatarWithText__972a0 {
          padding: 0;
          >.avatar__20a53 {
            margin: 0;
          }
          >.content__20a53 {
            display: none;
          }
        }
        >.numberBadge__2b1f5 {
          position: absolute;
          left: 18px;
          bottom: 3px;
          transform: scale(0.7);
        }
      }
    }
  }
}```
lavish holly
#

someone here should include the search thing at the top in the button list

#

oh is that it?

unborn hull
charred kernel
#

There are no :has() selectors so it should be

unborn hull
upper heart
#

yeah it does not cause lag for me, unlike the original snippet

charred kernel
unborn hull
#

perfect, was waiting for this to be fixed since i originally reported the loss in performance. ty krammeth your work is always high quality mlm_hearts

charred kernel
#

Thanks

dawn wasp
#

the :has() selector portion was replaced with an :nth-child() selector since around a week ago

#

forgor to give an update in the thread

floral stump
charred kernel
#

Will work on it once I get the ad as well

silver blaze
charred kernel
# floral stump

updated with the fix for this

.scroller__99e7c[data-list-id^="private-channels-uid_"] {
  scrollbar-width: 0;
  scrollbar-color: transparent;
  >.content_d125d2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    >div:not([class]):first-child,
    >div[role="button"],
    >.privateChannelsHeaderContainer__99e7c,
    >.channel__972a0.dm__972a0 {
      width: 100%;
    }
    >.friendsButtonContainer_e6b769,
    >div:nth-of-type(3),
    >.channel__972a0:not(.dm__972a0),
    >.wrapper_ebee1d {
      margin: 0;
    }
    .channel__972a0:not(.dm__972a0) {
      margin: 0 4px;
      >.linkButton__972a0 >.link__972a0 {
        padding: 6px;
        >.avatarWithText__972a0 {
          padding: 0;
          >.avatar__20a53 {
            margin: 0;
          }
          >.content__20a53 {
            display: none;
          }
        }
        >.numberBadge__2b1f5 {
          position: absolute;
          left: 17.5px;
          bottom: 0;
          transform: scale(0.7);
        }
        >.newBadge__4ed1a {
          position: absolute;
          left: -3px;
          bottom: 0;
          transform: scale(0.7);
        }
      }
    }
  }
}```
floral stump
#

peak

charred kernel
#

Just noticed a small detail
since I made the buttons smaller to make them fit in one single row, the red badges aren't vertically aligned properly anymore

#

I'll fix it later when I get back to my laptop

charred kernel
karmic gust
#

Dang, this is nice. Thanks for this.

karmic gust
#

How did you manage to break it Will?

naive portal
#

deleted the message since it was no longer an issue

karmic gust
#

Fair I suppose.

#

👍 Glad you got it working for yourself

faint matrix
#

is there a way to get it centered?

#

and like, basically center itself automatically

upper heart
#

i did it by increasing the horizontal padding

#

i increased this value

image.png
#

you can also do this but that will center more than just the buttons

image.png
faint matrix
#

does it make them adjust into a row of 5, or does it just shift them

upper heart
#

hmm i don't really know how dm requests work but if it really would add a 5th button, it would go on a second row cuz it wouldn't fit on the first one due to the padding

#

maybe someone else has a better answer

#

so for example if i increase the horizonal padding too much, the buttons will go on multiple rows

image.png
faint matrix
upper heart
#

sure

faint matrix
faint matrix
#

I have instinctively ignored it because it seemed irrelevant to the issue

upper heart
#

yeah that one uses justify-content: space-evenly; instead of justify-content: left;

#

it's also more optimized, the original one is laggy as heck

charred kernel
fickle cape
#

is there a fix for this?

image.png
carmine citrus
charred kernel
#

Should I post my version on the snippets channel?

upper heart
#

yeah cuz otherwise people might keep using the unoptimized version

fickle cape
#

ideally as an import if possible

charred kernel
#

Alright, I'll make a post when I get back to my laptop later approvestare

charred kernel