User popout background images are no longer working

[quincynyan]

I've set

--small-user-popout-background-image: url('https://i.imgur.com/v1ODdsv.gif');
--small-user-popout-background-transparency: #00000099;
--small-user-popout-background-image-position: center;
--big-user-popout-background-image: url('https://i.imgur.com/BXr6I0G.gif');
--big-user-popout-background-transparency: #00000099;
--big-user-popout-background-image-position: center;

in :root but they're not showing up in discord.

It looks like the theme uses .userPopout-2j1gM4 and .root-8LYsGj which are not in the latest Discord version anymore.

[WubzyGD]

to my knowledge, the popouts are deprecated for the theme because of discord's user theming. the popout bg feature was around long before you could set your own themes and banners and such. i don't know what puck intends to do moving forward but i think he's just leaving it.

div .userPopoutOuter_d67f56 .userProfileInnerThemedNonPremium_b64fb4 {
  background-image: var(--small-user-popout-background-image);
  background-position: var(--small-user-popout-background-image-position);
  background-size: cover;
}

div .userPopoutOuter_d67f56 .userProfileInnerThemedNonPremium_b64fb4 .userPopoutOverlayBackground__3e7e6 {
  background: var(--small-user-popout-background-transparency);
}

div .userProfileModalOuter__90b4a .userProfileInnerThemedNonPremium_b64fb4 {
  background-image: var(--big-user-popout-background-image);
  background-position: var(--big-user-popout-background-image-position);
  background-size: cover;
}

div .userProfileModalOuter__90b4a .userProfileInnerThemedNonPremium_b64fb4 .userProfileModalOverlayBackground_a5b043 {
 background: var(--big-user-popout-background-transparency);
}

add that to the bottom of your CSS file. it will add popout backgrounds ONLY to popouts of users without theming. doing the themed ones requires a fair bit of headway that i'm not feeling geared up to go through.

[quincynyan]

Sorry I'm a week late OwO. It looks like the latest update changed the class names and the code you provided is not working.

But yes, I just want to theme non-nitro users, because the grey color is really out of place with my pink background. (Separate issue: when replying somebody, the reply tab, and also the "jump to present message" tab are still grey and unstyled)

[puckzxz]

Sorry I'm a week late OwO. It looks like the latest update changed the class names and the code you provided is not working.

But yes, I just want to theme non-nitro users, because the grey color is really out of place with my pink background. (Separate issue: when replying somebody, the reply tab, and also the "jump to present message" tab are still grey and unstyled)

Try this

div .userPopoutOuter_c69a7b .userProfileInnerThemedNonPremium_c69a7b {
  background-image: var(--small-user-popout-background-image);
  background-position: var(--small-user-popout-background-image-position);
  background-size: cover;
}

div .userPopoutOuter_c69a7b .userProfileInnerThemedNonPremium_c69a7b .userPopoutOverlayBackground_c69a7b {
  background: var(--small-user-popout-background-transparency);
}

div .userProfileModalOuter_c69a7b .userProfileInnerThemedNonPremium_c69a7b {
  background-image: var(--big-user-popout-background-image);
  background-position: var(--big-user-popout-background-image-position);
  background-size: cover;
}

div .userProfileModalOuter_c69a7b .userProfileInnerThemedNonPremium_c69a7b .userProfileModalOverlayBackground_c69a7b {
 background: var(--big-user-popout-background-transparency);
}

[quincynyan]

Nope, not working. It looks like they removed the NonPremium class, so that all the classes are the same now, whether themed or not?

[WubzyGD]

I will update them at some point in the next few hours

…

On Tue, Jun 25, 2024, 8:05 AM Quincy Nyan ***@***.***> wrote: Sorry I'm a week late OwO. It looks like the latest update changed the class names and the code you provided is not working — Reply to this email directly, view it on GitHub <#221 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APBS37FNS56L6ABPBGM3PDTZJF2K5AVCNFSM6AAAAABJNSYA5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBZGA2TGOBZGE> . You are receiving this because you commented.Message ID: ***@***.***>

[quincynyan]

Noticed this in the class names, might help:

Edit: For the big popout,

We're trying to select the inner second div right?

[quincynyan]

This fixed it

div .userProfileOuterUnthemed_c69a7b .userPopoutInner_c69a7b {
  background-image: var(--small-user-popout-background-image);
  background-position: var(--small-user-popout-background-image-position);
  background-size: cover;
}

div .userProfileOuterUnthemed_c69a7b .userPopoutInner_c69a7b .body_b07019 {
  background: var(--small-user-popout-background-transparency);
}

div .userProfileOuterUnthemed_c69a7b .userProfileModalInner_c69a7b {
  background-image: var(--big-user-popout-background-image);
  background-position: var(--big-user-popout-background-image-position);
  background-size: cover;
}

div .userProfileOuterUnthemed_c69a7b .userProfileModalInner_c69a7b .fullSizeOverlayBackground_c69a7b {
 background: var(--big-user-popout-background-transparency);
}

Is puck interested in allowing this in a PR?

[quincynyan]

Nevermind, why does discord keep changing their code?

[WubzyGD]

They hate happiness, of course. Some of it is due to redesigns. They just resized the popouts and changed their layouts. Sometimes when they update certain elements, the hashing after the class names changes since they use react and that is a thing that react does.

…

On Mon, Jul 1, 2024, 5:38 AM Quincy Nyan ***@***.***> wrote: Nevermind, why does discord keep changing their code? image.png (view on web) <https://github.com/puckzxz/NotAnotherAnimeTheme/assets/65074780/3772e722-b4e9-41ad-b2f5-fee101f3e3cb> — Reply to this email directly, view it on GitHub <#221 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APBS37E3ZL54ZCGKPYZF4OTZKE5T3AVCNFSM6AAAAABJNSYA5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJZHEYTKNRWG4> . You are receiving this because you commented.Message ID: ***@***.***>