Legacy Profile Popout

[KingGamingYT]

With Discord's removal of the legacy profile popout experiment (2 years in the making, apparently), I'm wondering if it's possible to style the new menu to look like the old one without a status dropdown. There's also the "click to copy username" easter egg, but I doubt that's possible to be replicated without JS.

[milbits]

im workin on it! but if you have a plugin for the experiments tab, try this

[KingGamingYT]

Ohp, I think there's been a bit of confusion in my wording, I'm referring to the status changer/mini profile popup next to the media controls, not the new profile popouts and full design Discord recently has been rolling out.

They had a dedicated experiment from back in 2022 to either use the new ones or change them back to how they were before, which got removed today.

[milbits]

oops
yeah, look at this poorly done thing

[KingGamingYT]

progress is progress ! ! lol

[KingGamingYT]

I decided to take a small stab at it today and I'm happy with what I did get changed, but unfortunately I don't think moving the status changer back into the menu is possible with purely css :(

[milbits]

this will drastically affect the economy...

[KingGamingYT]

im workin on it! but if you have a plugin for the experiments tab, try this

they removed the experiment lmfao

[milbits]

bruh 😭 😭 this is the fastest time that they ever removed an experiment too

they really dont want us to use the better ui huh

[KingGamingYT]

nope

no idea what you've done up to this point but in the past half hour I've managed to hack together something that's okay visually, has some issues functionally though

[milbits]

could i get the css? i didnt really have that much time styling it

[aeonlight]

istg discord hates its userbase.................

[milbits]

the investors probably lvoe it though

[KingGamingYT]

could i get the css? i didnt really have that much time styling it

Some of its taken from a snippet in the BetterDiscord server, but here it is

#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d > div > .colorDefault_d90b3d.labelContainer_d90b3d.item_d90b3d, 
#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d > .separator_d90b3d {
  display: none;
  }
.accountProfilePopoutWrapper_b2ca13 {
  top: 5px;
}
#status-set-custom-status > .label_d90b3d {
  text-indent: -9999px;
  line-height: 0;
}
#status-set-custom-status > .label_d90b3d::after {
  content: "Set a custom status";
  text-indent: 0;
  display: block;
  line-height: initial;
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b:before,
.accountProfilePopoutWrapper_b2ca13 .wrapper_cb78f1.biteSize_cb78f1,
.accountProfilePopoutWrapper_b2ca13 .header_c6e596,
.accountProfilePopoutWrapper_b2ca13 .body_d4e7c2 div:has(.descriptionClamp_fc5c48),
.accountProfilePopoutWrapper_b2ca13 .activity_cd74cc,
.accountProfilePopoutWrapper_b2ca13 .tags_c32acf,
.accountProfilePopoutWrapper_b2ca13 .profileEffects_f867f9,
.header_b07019,
.usernameRow_c32acf {
    display: none;
}
.accountProfilePopoutWrapper_b2ca13 .body_d4e7c2 {
    padding: 8px;
    gap: 8px;
}
.accountProfilePopoutWrapper_b2ca13 .username_d4e7c2 {
    padding: 0px 8px;
}
.accountProfilePopoutWrapper_b2ca13 .menus_d4e7c2 {
    gap: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_d4e7c2 {
    background-color: transparent;
}
.accountProfilePopoutWrapper_b2ca13  .menus_d4e7c2 > .menu_d4e7c2 > .scroller_d90b3d {
    padding: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_d4e7c2:last-of-type [role="group"]:first-of-type::before {
    content: "";
    display: block;
    margin: 7px 4px 8px 4px;
    border-bottom: 1px solid var(--profile-body-divider-color);
}

.accountProfilePopoutWrapper_b2ca13 {
    left: 0px;
    bottom: 0px;
}

.accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b.userProfileOuter_c69a7b {
    width: 220px;
    background: var(--background-floating);
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b {
    max-height: 100%;
    width: 220px;
    gap: 0px;
    padding-bottom: 0px;
    background: var(--background-floating);
}
#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d {
  right: 20px !important; 
  margin-left: 1em !important;
}

[KingGamingYT]

this may be a lost cause

[milbits]

what the fuck are they doing

[KingGamingYT]

can't wait to have to somehow reformat the thought bubble into a button and pull it down

[milbits]

that'll be so awesome and cool!

[KingGamingYT]

they updated the classes so now my above code is already irrelevant YAYYYY

[KingGamingYT]

Updated the classes and hopefully made it less of a mess, removed some padding in there and now I think it looks better than it did before

#account > .scrollerBase_c49869.none_c49869.scroller_d90b3d > .separator_d90b3d {
  display: none;
  }
.accountProfilePopoutWrapper_b2ca13 {
  top: 5px;
}
#status-set-custom-status > .label_d90b3d {
  text-indent: -9999px;
  line-height: 0;
}
#status-set-custom-status > .label_d90b3d::after {
  content: "Set a custom status";
  text-indent: 0;
  display: block;
  line-height: initial;
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b:before,
.accountProfilePopoutWrapper_b2ca13 .wrapper_cb78f1.biteSize_cb78f1,
.accountProfilePopoutWrapper_b2ca13 .header_b07019,
.accountProfilePopoutWrapper_b2ca13 .body_ad5fac div:has(.descriptionClamp_fc5c48),
.accountProfilePopoutWrapper_b2ca13 .activity_cd74cc,
.accountProfilePopoutWrapper_b2ca13 .tags_c32acf,
.accountProfilePopoutWrapper_b2ca13 .profileEffects_f867f9,
.accountProfilePopoutWrapper_b2ca13 .usernameRow_c32acf {
    display: none;
}
.accountProfilePopoutWrapper_b2ca13 .body_ad5fac {
    padding: 0px;
    gap: 8px;
}
.accountProfilePopoutWrapper_b2ca13 .username_d4e7c2 {
    padding: 0px 8px;
}
.accountProfilePopoutWrapper_b2ca13 .menus_ad5fac {
    gap: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_ad5fac {
    background-color: transparent;
}
.accountProfilePopoutWrapper_b2ca13 .menus_ad5fac > .menu_ad5fac > .scroller_d90b3d {
    padding: 0px !important;
}
.accountProfilePopoutWrapper_b2ca13 .menu_ad5fac:last-of-type [role="menu"]:first-of-type::before {
    content: "";
    display: block;
    margin: 7px 4px 8px 4px;
    border-bottom: 1px solid var(--profile-body-divider-color);
}

.accountProfilePopoutWrapper_b2ca13 {
    left: 0px;
    bottom: 0px;
}

.accountProfilePopoutWrapper_b2ca13 .userPopoutOuter_c69a7b.userProfileOuter_c69a7b, #status > .scrollerBase_c49869.none_c49869.scroller_d90b3d {
    width: 220px;
    background: var(--background-floating);
}
.accountProfilePopoutWrapper_b2ca13 .userPopoutInner_c69a7b {
    max-height: 100%;
    width: 220px;
    gap: 0px;
    padding-bottom: 0px;
    background: var(--background-floating);
}

[KingGamingYT]

Added the switch accounts icon back! It's kinda small but tbh the entire menu is fucked up in such a way I don't know if I can solve

[KingGamingYT]

A few more tweaks before I go to bed, some padding reduction and I added a divider between the switch accounts and custom status button because that's no longer there for some reason

[aeonlight]

I am this close to learning how to code just to make a custom application for discord.

[KingGamingYT]

i love css ! ! ! (you have to target all the buttons in the menu separately) ((these divs are making me lose my mind))

[milbits]

nesting exists, so you can do for example:

.crazyvar__73737 > div > div{
&.avatarwrapper_526277{
display:none}
&.meow355{
  &.disabled{}
}

}

there's also :is(.class1, .class2), I'm bad at explaining so look there https://developer.mozilla.org/en-US/docs/Web/CSS/:is
but basically you can do

:is(#status, #account) .scroller .colordefault :is(> div, > div > div) {...}

also, I'm pretty sure that having a lot of selectors can impact performance, you don't need to target every single one in the tree, doing .crazyvar_666 .wrapper727 even though there's something between those 2 works as well

and please don't ask me why i have a trillion edits on this comment 💔

[KingGamingYT]

Really good advice, thanks!

About the "selecting all selectors in the tree" thing, I tried to apply the effects to them individually using devtools to see which ones it was but it didn't work properly unless I applied it to all of them 💔

Also don't worry about the edit thing I've done the exact same thing in this very thread

Edit: I tried :is() first because it seemed to be the most straightforward and while I took a fair stab at it, it doesn't seem to work :(

[milbits]

removing > div.. whatever lmao seems to fix it for me

:is(#status, #account) > .scrollerBase_c49869.none_c49869.scroller_d90b3d .colorDefault_d90b3d.labelContainer_d90b3d.item_d90b3d {
font-size: 14px;
min-height: 0px;
max-height: 28px;
}

[KingGamingYT]

removing > div.. whatever lmao seems to fix it for me

:is(#status, #account) > .scrollerBase_c49869.none_c49869.scroller_d90b3d .colorDefault_d90b3d.labelContainer_d90b3d.item_d90b3d {
font-size: 14px;
min-height: 0px;
max-height: 28px;
}

cuts out the need to specify the repetitive divs entirely, quite nice
edit, noticed this implementation screws up the switch account menu, I think I need to find an applicable selector and then put it under a :not() element to fix that

[KingGamingYT]

fixed it (i love pseudo selectors within pseudo selectors)

[milbits]

#cat:not(.meow:has([aria-label="woof"]):not(:is(.brainrot,.rotbrain):has(.skibiditoilet)))

[KingGamingYT]

fixed the weird left padding in the accounts menu (it still exists in the status changer menu, but I don't care as much lol)

[milbits]

i went on my alt and they moved the discover page to the bottom (and made it monochrome, fuck that black and white design trend) 💀

[KingGamingYT]

went on my alt and they moved the discover page to the bottom (and made it monochrome, fuck that black and white design trend) 💀

Oh I got this yesterday, they made it fucking STICKY
I spent like 20 minutes trying to fix it to the bottom again and ended up giving up and just hiding it

never used the button anyway
arguably a more useless change than anything done to discord in the past two months because who do you know that actually frequently visits server discovery who didn't make their account 2 days afo

[milbits]

well quests lie there now (not that i play 99% of the games)

[KingGamingYT]

that's awful

[KingGamingYT]

ohhh THIS must be the experiment which does it

update: nope guess not, they're separate

[KingGamingYT]

[milbits]

I HJATE THIS THING

made it sorta look good but im too lazy to make it fit better rn

[KingGamingYT]

IT WORKS


theres still some bugs to work out (the partial clipping mentioned in the other issue, no blurple background, long statuses overflowing the menu (shown below), the two buttons still play their transition animation despite always being visible, and the fact that the custom status button is now above the regular status selector rather than below it, but it's a hell of a lot better than before and I'll come back to it tomorrow

(this has been by far one of the most frustrating things to work on I feel your pain)

[KingGamingYT]

i may be fucking stupid

[KingGamingYT]

my account lost the experiment that's odd

doesn't matter but still

[KingGamingYT]

I fixed the clipping when hovering over the bottom buttons :D

for some insane reason that I don't want to figure out I had to set the z-index on the add status button to FOUR

[KingGamingYT]

progress

[KingGamingYT]

it ain't perfect but eh it's something

[milbits]

you need super lounging music to make it perfect

[KingGamingYT]

it would help if changing the dimensions of the hover background were easier, currently just to make it look like that its a hacky combination of width and block-size

[milbits]

cant you just add a margin to the button and move the text a bit to the left (or something)

[KingGamingYT]

i'm pretty sure when I initially tried to do that it made positioning the text itself a pain because the "add status" text and the actual text of the status act differently but are affected in the same way

[milbits]

nice

[KingGamingYT]

I tried it out and maaaaaaaybe if I'm super bored one day but this feels so grueling to accomplish at the moment I'm leaving it as is

[KingGamingYT]

i'm gonna lose my mind

they removed all the icons what IS this

[KingGamingYT]

we're so back I hate it here

[milbits]

i hate theming that thing
also if you played on future or past im afraid i must block you

[KingGamingYT]

i hate theming that thing

also if you played on future or past im afraid i must block you

my fellow present player

[milbits]

just a 10x? bro i got 3 100x

[KingGamingYT]

I only got 10xes I never encountered a 100 or 333x 💀

[milbits]

i wish I got a 333x

[KingGamingYT]

A friend of mine on past got like 4 😭

[milbits]

HOW

[KingGamingYT]

we're so back I hate it here

oh yeah I didn't even mention how discord broke the menu for those who don't have the enhanced status experiment yet (me) and the expander to select your status (online, offline, idle, dnd) is just gone

so I had to force the experiment on

[milbits]

discord 🥰🥰❤️