🎨-theme-development

[warm bough]

try https://syndishanx.github.io/Website/Update_Classes.html

[mild temple]

is there a way to make it automatically adjust to the pfps?

[narrow hinge]

Idk, you just have to tweak it until it looks right

[mild temple]

i mean, it looks fine with any number under 10

above it gets out of aligment again

[pure cairn]

That doesn't look like a good selector

I've seen multiple things with something similar to that

Are you sure it's unique enough?

[narrow hinge]

Where is that button even at? lol

[pure cairn]

No idea tbh, I just turned off my computer

Might be in vcs or something

[winged veldt]

Pretty sure it's "Start An Activity" in the user panel whilst in a VC, but aria-describedby changes every time the elements disappear/reappear after leaving/rejoining VC

[narrow hinge]

Ah

[winged veldt]

I wish there was a reliable way to get rid of those buttons though honestly, can't do that without getting rid of everything in there unless there's another specifier for those buttons

[warm bough]

I don't know if you still care, but I found an old CSS snippet that seems to do the trick (updated for the current classes ofc)

/*discord loading page*/
.container_e40c16.fixClipping_c7e9c6  {
  background: 0 0;
  backdrop-filter: blur(5px);
}```

(I found this while trying to look for a fixed version)

[warm bough]

you could use the aria-label but that's a messy and not that good fix

can be a temporary bandaid solution though

[narrow hinge]

[class$=-panels] [class*=-fullWidth]:has([d^=" M-0.9409999847412109,-6.26800012588501 C-0.42100000381469727"]) {
    display: none;
}

That removes that activity button

[warm bough]

is that hiding it by its SVG content?

[narrow hinge]

No, that hides the button, using the SVG as a Selector

[warm bough]

smart

[winged veldt]

Ooooo, that's pretty neat, thank you! only just learned that's a thing

[narrow hinge]

I use that same method for removing the buttons I don't like from the Chat Bar

[warm bough]

that method should work to hide basically any button them

[narrow hinge]

If it has a Distinct SVG, yeah

[barren jewel]

bruhh they redid the class reroll

[winged veldt]

Hmhm, I use another theme called disblock origin (albeit I modified it to work with the new classnames) for that stuff

[warm bough]

nice name

[barren jewel]

i hate it, why is there borders on everything, why is there a giant hover affect on every message

[winged veldt]

Yeah, same classes that were added yesterday and reverted shortly after, exactly the same ones

[winged veldt]

you can use this theme updater over here, worked in my case

[barren jewel]

i did

only fixed a few things

[winged veldt]

Hm, how does the rest of your theme look like?

[warm bough]

it also didn't work when I copy pasted my whole theme in

[winged veldt]

If you use any imports those are most likely broken too, unless the developers updated it

[warm bough]

I just copy pasted individual parts

[barren jewel]

main ones i had for the stupid borders

[warm bough]

try just copy pasting in the class name

channelTextArea is one it doesn't get, my fix for that was to use [class$="channelTextArea"] (I fixed this manually by inspect elementing the channel text area

hmm interesting, does it just not work for the _ ending ones?

[winged veldt]

no that doesn't work I don't think, it has to be the exact class (.panels__5e434) otherwise it won't work

[barren jewel]

i removed the_ and replaced the ^ with * and they work now

extremely weird

[warm bough]

yeah that seems to be a change across the board

[winged veldt]

the * is a wildcard, it'll look for anything containing that string

oops

the * icon

[warm bough]

yeah you can use $ to make it only ending with the string

[winged veldt]

Using ^ means you're looking for a class that Starts with, but since discord changed the order that's unreliable

[winged veldt]

Only works when one class is present otherwise it breaks

[warm bough]

https://www.w3schools.com/cssref/css_selectors.php

[smoky belfry]

honestly i think that * is the way unless you use proper classes and the updater

[warm bough]

hmm wdym?

[barren jewel]

now i gotta get rid of the hover background and the reacts

[warm bough]

let me know if you figure out the hover background removal

[winged veldt]

If the element has two classes, say "19291-panels 19291-sidebar" and you use $= to look for panels it won't work

[smoky belfry]

use * or hashes

[winged veldt]

I'm not the best explaining but you probably get what I mean I hope 🥹

[warm bough]

you're fine, thanks

[smoky belfry]

* won't be that bad unless it match a lot

[smoky belfry]

you changing the message actions ? if so, i have a working patch alr

[warm bough]

#🎨-css-snippets message seems to have what we're looking for

[winged veldt]

oh yeah I like that theme, modern frills is very nice

[warm bough]

okay not the hover background, but the hover reactions works for me

[smoky belfry]

[class*=buttonContainer] > [class*=buttons] {
    > [class*=buttonsInner] {
        border: unset;
        padding: unset;
        box-shadow: var(--shadow-low) !important;
        background-color: var(--background-base-low);
        border-radius: 4px;
        > [class*=separator] { display: none; }
        > span {
            > [class*=hoverBarButton] {
                padding: unset;
                height: 32px;
                width: 32px;
                border-radius: unset;
                &:hover > [class^=icon] { transform: unset; }
            }
            &:has(~ [class*=separator]) { display: none; }
            &:first-of-type ,[class*=separator] + & {
                > [class*=hoverBarButton] {
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
            }
            &:nth-last-of-type(2) > [class*=hoverBarButton] {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }
        }
    }
}

[barren jewel]

ty

now for the hover background

[smoky belfry]

what do you mean the hover background ?

[winged veldt]

As in, when your mouse is on top of a message, the background changes

[warm bough]

how the messages get lighter when you hover?

[smoky belfry]

you mean the message highlight on hover ?

[barren jewel]

this

[smoky belfry]

that alr existed in old discord

[barren jewel]

yeah ik, but i always hated it

[smoky belfry]

it's very easy to patch out

[barren jewel]

just need to figure out the new class name for it

[smoky belfry]

likely just a display none on the ::hover

use F8 Break to easily find it

[warm bough]

could you also not just change the colour itself

[winged veldt]

._5126c0cd07f243a0-message:hover {
    background: none !important;
}``` this works

[smoky belfry]

simply do

._5126c0cd07f243a0-message:hover { display: none }

[winged veldt]

or that too @_@ I'm still an amateur so I don't know which one works best lol

[barren jewel]

ty yeah i was digging for it before you sent that lol

[barren jewel]

this will just make the message vanish entirely on hover

[smoky belfry]

yeah sorry

[warm bough]

this is so trippy I love it

[barren jewel]

discord is somewhat usable again

now just need to wait for the compact top bar and amoledcord to be updated

[winged veldt]

Could just grab them locally for the time being

That's what I did for a small theme I've been using that hasn't had an update in a whole year

[barren jewel]

nvm we ball, the experimental branch is still working from the re-roll yesterday https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/experimental/desktop.css

[smoky belfry]

also please do not spam !important, this is a very bad practice

[narrow hinge]

That only works if it's the last/only class, there can be any number, but if it's in the middle it won't work

[winged veldt]

mhm, I wish there was another way of selecting classes in the middle other than wildcards, since those can be very unpredictable

[narrow hinge]

Yeah

[winged veldt]

Tried making a theme snippet that modifies the emoji picker use wildcards and it just looked like a mess

[narrow hinge]

Just make it more specific using parent class selectors, or just actual classes

Using too many of those wildcard selectors will cause lag

[barren jewel]

wtf is this discord

[winged veldt]

Yeah that too, which is why I gave up on that whole idea >_>

[winged veldt]

💔

[barren jewel]

having copy message id readily there was incredibly nice

[warm bough]

wtf did they do to translate 💔

[smoky belfry]

this is the proper way to do it without using !important

:root { --message-background-hover: none; }

actually no there's better

[warm bough]

that replaces the colour?

[smoky belfry]

no

it empty the variable

which mean that var then fail to resolve

and it neutralize the rule

[bleak mica]

rather curious question, do we have any idea why the css class names would have changed to begin with? have any open source components involved updated 'recently'?

[smoky belfry]

and since you can assign the variable in :root, it's essentially costless

[winged veldt]

ah I see, that's a much more convenient way of doing it that way it doesn't depend on a class/hash, good to know

[smoky belfry]

because likely framework they use did changes or smth

[bleak mica]

i find it hard to believe that the old style was problematic somehow so it makes me think that the change wasn't intentionally done

[warm bough]

very interesting stuff

[smoky belfry]

they likely use a framework or smth which did that change

it's not the kind of stuff they do for funsies

it's just technical changes that make sense for some reason

[warm bough]

the idea of them intentionally doing it to fuck with us is kinda funny though

[smoky belfry]

they don't choose classnames anyway, they gen them and use what's used to gen them

[winged veldt]

Yeah something updated for sure, I'm not 100% sure of this information but someone told me it was a component named "rspack"? I read on it but I'm too lazy to comprehend it

shrug

[bleak mica]

well its react so i expect theyre probably just like doing import "<component>.css" or something

[burnt sky]

got my theme back to its "orginal" state

[narrow hinge]

Why is it buried in a Submenu for you?

[winged veldt]

Yeah I wanted to ask that too, it could be a experiment?

[narrow hinge]

Maybe

[oak plover]

Mana context menu

[barren jewel]

true let me chect experiments

dev://experiment/2025-11-mana-context-menu

setting myself to not eligible still shows it

dev://experiment/2025-11-message-context-menu

its this one

[winged veldt]

I see, you have variant 2 it looks like

That's annoying though if I have to be honest, why hide it behind additional menus

[narrow hinge]

Probably because most people don't use it

Putting Copy Text there as well is a yikes

[winged veldt]

I suppose that's fair enough, least that could be done is a proper setting somewhere but we know that's asking too much 💔

[narrow hinge]

Yeah, you've crossed the line with that suggestion

[atomic plank]

Been fixing my theme (thanks discord) but my round server icons are gone, any tips?:

/* round server icons */
[class*="closedFolderIconWrapper_"] > [class*="guildIcon_"],
[data-list-item-id*="guildsnav_"] > [class*="icon_"] {
    border-radius: 50% !important;
}

That's what I've been using forever (after putting it into a class updater so the names should be right)

[burnt sky]

this here is annoying in the chat, a slight gradient cant figure out how to remove it

i opened a reply to make it more noticeable

usually shows up at the very bottom of chat

[hazy frigate]

last time i'll ask but it'd come in handy if someone gave me something for this

[smoky belfry]

remove the underscores

[atomic plank]

Thanks

[burnt sky]

found it

._36d072eab2b2e737-chatTypingGradientNotAtBottom{
    background: unset;
}
._36d072eab2b2e737-chatGradientBase{
    display: none;
}```

[mystic burrow]

did you end up releasing this somewhere?

[chilly knoll]

i should use solar for the vc icons too, how did I forget that

[gilded radish]

[class*="closedFolderIconWrapper"] > [class*="guildIcon"],
[data-list-item-id*="guildsnav"] > [class*="icon"] {
    border-radius: 50% !important;
}```

someone here was using this to make the icons rounded again. it works for me too, but I don't know how to make them bigger to be honest. any advice/place to start?

[narrow hinge]

Making them bigger introduces quite a few problems that you'd have to figure out/fix

[sage tusk]

I took this from oldcord

html.visual-refresh { .cc5dd25190031396-wrapper, ._6e9f8dce4cc18de3-childWrapper, ._6e9f8dce4cc18de3-icon { width: 50px !important; height: 50px !important; } .cc5dd25190031396-wrapper > .cc5dd25190031396-svg { inset: auto; contain: none; } .cc5dd25190031396-wrapper > .cc5dd25190031396-svg foreignObject { mask: none; overflow: visible; x: -4; y: -4; } .cc5dd25190031396-wrapper ._6e9f8dce4cc18de3-wrapper { width: 48px; height: 48px; border-radius: 25px; overflow: hidden; transition: border-radius 0.2s ease; } ._6e9f8dce4cc18de3-wrapper._6e9f8dce4cc18de3-selected { border-radius: 15px !important; } ._5bc7ed9d4097f6b5-circleIconButton { width: 48px; height: 48px; border-radius: 25px; } }

[narrow hinge]

Use Triple Backticks for Multiline lol

It looks way better

[gilded radish]

almost works

folder icons are offset tho

[sage tusk]

this is a plugin but yeah there's issues with it

[burnt sky]

what mine looks like

[gilded radish]

depends on theme

[crimson skiff]

well its in my repo, but not in #🎨-css-snippets

[mystic burrow]

what's the name of it in there?

[jovial arrow]

settings now does. this

[crimson skiff]

https://nspc911.github.io/themes/vencord/MidnightIslandChatStatus.theme.css

[mystic burrow]

ty!

[burnt sky]

so much removed that was either a nice to have, dead content because of old stuff that use to be in it, or stuff that just doesn't work even with a class updater :)

[narrow hinge]

Most classes should have updated

[burnt sky]

either way im sastisfied i managed to kepp the orginal look of my theme
other than the chatbar which i cant get its css working

oh yeah irc snippet doesn't work even with class updater

so gotta deal with big profile pictures in chat

[wanton stirrup]

thanks for some reason update broke this and I had to put it in again

[narrow hinge]

Send the snippet

[burnt sky]

/* Semi-Compact-IRC */
[class*="cozy_"] {
    --chat-avatar-size: 1.2em;
    --custom-message-avatar-size: 1em;
    --custom-message-margin-left-content-cozy: var(
        --custom-message-margin-horizontal
    );

    [class^="header_"] {
        margin-left: calc(
            var(--custom-message-avatar-size) + var(--space-xs)
        );
    }

    [class^="repliedMessage_"] {
        margin-left: calc(
            var(--custom-message-avatar-size) +
                var(--custom-message-margin-horizontal)
        );
    }

    &[class*="hasThread_"]:after {
        left: calc(
            var(--custom-message-margin-horizontal) - var(--space-xs) - 1px
        );
        width: var(--space-xs);
        border-top: 2px solid var(--spine-default);
        border-top-left-radius: 8px;
        top: calc(
            var(--custom-message-spacing-vertical-container-cozy) +
                var(--custom-message-avatar-size) / 2
        ) !important;
    }

    &[class*="hasThread_"][class*="hasReply_"]:after {
        top: calc(
            var(--custom-message-spacing-vertical-container-cozy) +
                var(--custom-message-avatar-size) / 2 +
                var(--custom-message-reply-message-preview-line-height) +
                4px
        ) !important;
    }

    [class*="timestamp_"][class*="alt_"] {
        width: 100%;
    }
}

[narrow hinge]

/* Semi-Compact-IRC */
[class*="-cozy"] {
  --chat-avatar-size: 1.2em;
  --custom-message-avatar-size: 1em;
  --custom-message-margin-left-content-cozy: var(
    --custom-message-margin-horizontal
  );

  [class*="-header"] {
    margin-left: calc(
      var(--custom-message-avatar-size) + var(--space-xs)
    );
  }

  [class^="-repliedMessage"] {
    margin-left: calc(
      var(--custom-message-avatar-size) +
        var(--custom-message-margin-horizontal)
    );
  }

  &[class*="-hasThread"]:after {
    left: calc(
      var(--custom-message-margin-horizontal) - var(--space-xs) - 1px
    );
    width: var(--space-xs);
    border-top: 2px solid var(--spine-default);
    border-top-left-radius: 8px;
    top: calc(
      var(--custom-message-spacing-vertical-container-cozy) +
        var(--custom-message-avatar-size) / 2
    ) !important;
  }

  &[class*="-hasThread"][class*="-hasReply"]:after {
    top: calc(
      var(--custom-message-spacing-vertical-container-cozy) +
        var(--custom-message-avatar-size) / 2 +
        var(--custom-message-reply-message-preview-line-height) +
        4px
    ) !important;
  }

  [class*="-timestamp"][class*="-alt"] {
    width: 100%;
  }
}

[burnt sky]

almost there just the profile pcitures gotta be tiny

oh nvm its the decorations on profiles

@narrow hinge thank you bud :)

[narrow hinge]

:root {
  --custom-message-avatar-decoration-size: 1.2em;
}

[pine needle]

._29444ba32c7fbeab-addButtonIcon {
  display: none;
}
.c69b6db0641110f6-actionIcon {
  display: none;
}

can i just use this to hide these buttons?

[wide rain]

can anyone help me with this please?

just for some reference, this is what is on my css and I am also using the guildbar revert theme:

[class*=gradientBackground_] {display:none}
[class="container__7aaec bottom__7aaec"] {display:none}
.visual-refresh section._5e434347c823b592-panels {
  margin-left: 65px;
  margin-right: 0%;
  width: calc(102% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  .actionButtons_e131a9 button {
    padding: 100;
  }
}
nav.guilds__5e434  {
  margin-bottom: 0 !important;
}
.title_edbb22 {
  display: none;
}
/* Hides Store and Shop button */
[href="/store"], 
[href='/shop']
{
  display: none;
}
.wrapper_ebee1d {
  display: none;
}
#audio-device-context-deafen {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_302___nitro"]) {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_302___shop"]) {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_11591___shop"]) {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_11591___nitro"]) {
  display: none !important;
}
/* Hide the "Shop" link in private channels */
li[data-list-item-id="private-channels-uid_13128___shop"],
li:has(a[href="/shop"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
li:has(a[data-list-item-id="private-channels-uid_13128___nitro"]) {
    display: none !important;
}
.containerPadding__7aaec {
  display: none;
}
/* Hide the element with the class 'edbb22df99c39831-title' */
.edbb22df99c39831-title {
  display: none;
}
/* Hide the element but keep its space occupied */
.c69b6db0641110f6-voiceChannelHighlightGlow {
  visibility: hidden;
}
/* Completely hide the voiceChannelHighlightBorder element */
.c69b6db0641110f6-voiceChannelHighlightBorder {
  display: none !important;
}
.visual-refresh section.panels__5e434 {
  margin-left: 65px;
  margin-right: 0%;
  width: calc(102% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  .actionButtons_e131a9 button {
    padding: 100;
  }
}
.pulseGradient__11664 {
  display: none;
}
[href="/store"],
[href='/shop'],
[href='/quest-home'] {
    display: none;
}
._553bf02027ac2419-wrapper {
  display: none !important;
}
.cc5dd25190031396-lowerBadge {
  top: 32px;
  left: 32px;
}```

[narrow hinge]

For anyone who sees this:

Any selector that starts with
[class^= (Start of the Class List) will almost certainly not work, you'll have to update those to either
[class*= (Wildcard, Can be anywhere in the Class List)
or
[class$= (End of the Class List, If it is anywhere in the middle, this won't work)

Examples: _51fd70792ee2e563-appMount
[class^=appMount_] >> [class$=-appMount]
[class*=appMount_] >> [class*=-appMount]

Any underscores after the classes in those will also need to be removed, if you need more specificity you can use the dash before the class

Ex. _51fd70792ee2e563-appMount >> [class$=-appMount]

Do note that using too many Wildcard Selectors will impact Performance, most use-cases would be better served using normal classes

[formal kayak]

If it's not caused by guildbar revert theme, this should probably fix it.

.ef3116c2da186559-wrapper{
    margin-bottom: unset;
}

[half crystal]

We should probably make some sort of script for this

[plain kelp]

Oh, did they change their mangling scheme to hash first?

[formal kayak]

Find

\[class\^=(.*)_\]

Replace

[class*=-$1]

[plain kelp]

Lovely

I'm sure there's a well thought out reason for this

[half crystal]

_ only when it starts with a number

[onyx mesa]

i just had to update all the vars and now they break absolutely everything

[mystic lichen]

is there a known rhyme or reason to the hash, like what algorithm it is

[onyx mesa]

thank god for https://syndishanx.github.io/Website/Update_Classes.html, saved so much hassle

[mystic lichen]

oh it seems like the first 6 chars are the same as the hash from the old classes
i.e .menu_c1e9c4 -> .c1e9c47c23f12ca3-menu, that c1e9c4 is the same. interesting

[plain kelp]

The old hashes were the same within each css module, is that still the case?

[mystic lichen]

yes

[pure cairn]

Thankfully, yes

[static ruin]

TY so much

[zinc flume]

hello

does anyone know how to move the server list downwards

to cover this empty space

[plain kelp]

Guess something has a margin-bottom

[rose crane]

they pushed an update to the settings. It is not fullscreen anymore and in order to change your Avatar / decoration you need to click on profiles which is on the top left of that new menu...

[rose crane]

THANK YOU

[zinc flume]

yeah bro thats exactly what this app needs

not removing the pedos from the platform

we need more visual updates

[rose crane]

Support and devs are just incompetent! Changing class names and "implementing" features no one wants instead of fixing REAL Problems...

Same with all the "new Features" like the VC Timer and other stuff...

outright Stalking Tools

[zinc flume]

they get paid to make the app worse

i could do their job too

[rose crane]

I just wait for the day when those appear in the server log...

[rose crane]

Yes... sadly

[rose crane]

Not only you. Basically ALL the Devs here make a WAY BETTER JOB than Discord Devs atm

[fair cipher]

.visual-refresh nav:has([data-list-id="guildsnav"]) {
  margin-bottom: unset;
}

i use this

[zinc flume]

i dont even know how css works but i could rename random class names too

sounds like a fun time + you get paid

[zinc flume]

yea that works

thanks

[rose crane]

as for Discord, I am really glad that @onyx mesa posted this link here: https://syndishanx.github.io/Website/Update_Classes.html

just input CSS and it renames everything needed...

[zinc flume]

yeah i use it every time discord breaks all my quickcss codes

its actually a life saver

[rose crane]

after uploading my CSS it updated and now it works just fine again

[fair cipher]

i guess it's too late since i changed/fixed all of mine manually

for how long has this been a thing? i see the repo has stuff from like a week and months ago yet i only had this issue now

[brazen quartz]

is this sarcasm

[zinc flume]

yes

[supple sparrow]

Hello, since few days i have issue having my quickcss being applied, i use Vencord installer and usually clicking install or Reinstall / Repair works but today it doesn't. Everything vencord related appears in the settings so i don't really know what to do

[full pebble]

i hate discord i hate discordi hate discord

i could prob optimize it someday

but i dont care enough

[warm bough]

this website should be pinned or maybe in the channel topic nvm it's in #theme-support

[warm bough]

the profiles page is unacceptable now 😭

I don't even know where to... edit my profile, because of how much visual bloat there is

[brazen quartz]

there's this https://codeberg.org/ridge/Discord-AdBlock but it doesn't get updated as fast

[supple sparrow]

so idk, it's very weird, i used a previous back up and it worked fine, but the updated one that worked previous days ago don't work. So the discord team either update things frequently to mess with the quickCss or there is something I miss there...

[warm bough]

use the update classes website, it might help

[unborn steppe]

May I ask if anyone has the css/userstyle that fix the profile menu overlapping with the servers?

[smoky belfry]

yes

it's somewhere in there 🙂

look at the [class*=panels] part

also look at the [class*=wrapper] inside of [class*=sidebar] so that the server list go to the bottom

[unborn steppe]

I put the whole thing in userstyle and refresh the page, the profile menu is still overlapping

[smoky belfry]

it needs to be in quickCss

[unborn steppe]

I forgot, but how do I add the quickcss in Vencord

[unborn steppe]

I got new settings today....

[smoky belfry]

click edit QuickCSS

[unborn steppe]

oh damn, it said quickcss is not supported on userscript, but I can use it on Stylus

which I just tried but it doesn't work

[smoky belfry]

also setting those to 0 disable the new settings modal for now, this won't last forever, but at that point, there will likely be a good replacement with CSS
dev://experiment/2025-09-user-settings-redesign-1
dev://experiment/2025-09-user-settings-redesign-2a
dev://experiment/2025-12-user-settings-redesign-3

[smoky belfry]

no idea about that, i use the desktop version of discord

[unborn steppe]

I'm using browser

[smoky belfry]

you can look at that and extract what you need

or rather, look in the CSS file at that place

[unborn steppe]

where can I find these?

[smoky belfry]

enable the experiments plugin and look at this chat again

[brazen quartz]

holy nesting

[unborn steppe]

set them all to variant 0 right?

[smoky belfry]

yep

[unborn steppe]

here

okay looks like the old menu modal is back

[smoky belfry]

i've explained it, but yeah, this is how i dev the raw CSS, i make it match the DOM
and once it's done and i freeze it, i extract / fold it

tho here it's alr partially processed, but since discord broke stuff, not fully

[unborn steppe]

is this correct sir?

[smoky belfry]

semantically, no, you need to correctly open and close the blocks and fix the selectors
also you need to only keep what's actually needed to do what you want to do

[mighty mural]

Hello everyone, very noob question as my "revert" theme was just an attempt to go to the april 2025 default discord theme. I've already used the awesome tool to change all class names, but since for the server icons I use the *= they weren't changed and that section of the theme doesn't change the look meaning the icons are now offcentered and not circle like anymore. Just to be clear I've basically copied the icon revert from somewhere else so I was hoping someone else had an updated working snippet to "re reset" them.

[unborn steppe]

sorry, I am pretty clueless about this, can you write a userstyle to fix the overlapping profile menu?

I can only use Discord browser version, and sadly Vencord userscript doesn't support adding quickcss

[mighty mural]

Snippet that I was currently using to "revert" the icons https://hastebin.ianhon.com/98cd

[mint trout]

hey, sorry for the ping, does this still work? remains as vanilla discord bg even if i replace the link

[pure cairn]

I don't think it was updated yet

[unborn steppe]

I just need a theme to fix the overlapping profile menu

[onyx mesa]

what that mean

[unborn steppe]

here

it should be like this

[rose crane]

They uploaded class names... https://syndishanx.github.io/Website/Update_Classes.html

Insert your CSS here and after the update copy / download it and insert it to quick CSS

[wide rain]

you absolute legend, you actually fixed it

[mighty mural]

The icons look so small with the non reverted one 😭

Who actually approves these changes is diabolical.

[wide rain]

I feel like I somewhat succeeded in making my discord actually look presentable

[onyx mesa]

holy shit dev tools have been unusable since the update

[pure cairn]

They already were

[onyx mesa]

i literally had no issues with them until yesterday

[unborn steppe]

I still can't find a userstyle to fix the overlapping profile menu

[onyx mesa]

i got this

[unborn steppe]

yes this is what I'm talking about

can I have it please 🙏

[onyx mesa]

._37e49614b9f110a9-container {
    height: 52px !important;
    [aria-label="Mute"],[aria-label="Deafen"] {
        border-radius: 8px;
    }
    [aria-label="Input Options"] {
        display: none;
    }
    [aria-label="Output Options"] {
        display: none;
    }
}
._5e434347c823b592-panels > ._37e49614b9f110a9-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
._629e4c86564a4ee7-scroller {
    padding-bottom: 0 !important;
    margin-bottom: 16px;
}
.visual-refresh section._5e434347c823b592-panels {
    border: 0;
    margin-left: 72px;
    margin-bottom: 0px;
    width: calc(100% - var(--space-xs)*2 - 72px) !important;
    overflow: hidden;
    .e131a99484292a19-actionButtons button {
    padding: 0;
    }
}

you can probs delete some of the code, was styling it for my own theme

[unborn steppe]

okay this one works now, though mine is a little bit off, is this normal?

on the left side of the server list there's a weird empty space that hid the server icon, you have to manually scroll down to view the rest

[onyx mesa]

you can edit these two values to fit it properly

[unborn steppe]

I think I know the issue, it's the blank space on the left

[onyx mesa]

I am using the server list revert snippet

.ef3116c2da186559-wrapper {
    position: absolute;
    top: -35px;
    height: calc(100vh - -34px);
}

can try adding this, might fix it

[smoky belfry]

[class*=sidebar] > [class*=wrapper] {
    margin-bottom: unset;
    mask: unset;
    > [class*="tree"] > [class*="itemsContainer"] > [class*=stack] {
        padding: 8px 0px;
    }
    &::after
    {
        display: none;
    }
}

this is what you want

[unborn steppe]

it works now, thanks!

thank you everyone for your help

[smoky belfry]

actually slight editing

you also want that after

otherwise it'll look wrong

[unborn steppe]

sorry but I forgot to ask this one as well, but you guys have the css to hide this bar?

[onyx mesa]

@import url('https://raw.githubusercontent.com/moonself/Vencord-Repos/refs/heads/main/Compact%20Title%20Bar');

[minor panther]

does anyone have a fix to make the discovery button rounded

[onyx mesa]

The code is not mine but i am pretty sure it's no longer maintained by the original author

just keeping it updated

[onyx mesa]

[class*="-circleIconButton"] { border-radius: 50% !important; }

[minor panther]

ty

[smoky belfry]

here's the finished snippet

[class*=sidebar] {
    > [class*=wrapper] {
        margin-bottom: unset;
        mask: unset;
        > [class*="tree"] > [class*="itemsContainer"] > [class*=stack] { padding: 8px 0px; }
    }
    > [class*=panels] {
        left: calc(var(--custom-guild-list-width) + 8px);
        width: calc(100% - var(--custom-guild-list-width) - 16px);
        > [class*=container] {
            margin: unset;
            padding: unset;
            align-items: unset;
            flex-direction: column-reverse;
            gap: 4px;
            height: unset;
            > [class*=avatarWrapper] {
                margin: 4px 8px 8px;
                padding: 4px;
                border-radius: 8px;
                > [class*=wrapper] > [class*=mask] > foreignObject > [class*=avatarStack] > [class*=avatar] { content: var(--avatar-url-128); }
            }
            > [class*=buttons] {
                margin-top: 8px;
                gap: unset;
                justify-content: space-evenly;
                > [class*=micButtonParent] > [class*=button] {
                    border-radius: var(--radius-sm);
                    &:not(:first-of-type) { display: none; }
                }
            }
        }
    }
    &::after { display: none; }
}

[unborn steppe]

I copied all the code in the raw link, looks like it has stopped working today

[narrow hinge]

Looks like it should work to me, the classes were updated

[tribal seal]

is there any way to make the server icons rounded again? and also to make the typing indicator be under the textbox again

[unborn steppe]

the previous one works better for me, this one still has the weird empty space

[mighty mural]

Welp mine needed some manual work as using the *= basically forces the usage of unconventional names that obviously aren't in the "changed" classes.

But I think I brought it back

[unborn steppe]

you guys have the css to hide the compact title bar here?

https://raw.githubusercontent.com/moonself/Vencord-Repos/refs/heads/main/Compact Title Bar

this one doesn't work for me

[tribal seal]

how did you do this?

[mighty mural]

Black magic BADCLUE

I copied here and here around in september.

I don't remember where / from.

Made even more changes after this update.

Here.

[tribal seal]

i have this gigantic theme i cobbled together from bits and pieces of code that broke only TODAY otherwise worked perfectly

broke EVERYTHING

[mighty mural]

Same boat.
https://hastebin.ianhon.com/c20f

This is the part of theme that manages the server list.

I just finished replacing the class names.

I have a repo directly for the theme where I try to fix any issues that arise.

[tribal seal]

my god you saved my life with this

thank you so much

now i just need to figure out how to fix the typing indicator

[mighty mural]

https://github.com/Constrat/revert-discord
Here if you find more interesting stuff to copy.

Like yours, it's a cobbled up version of what I did not like post april 2025 updates.

[tribal seal]

ill check it out

[mighty mural]

There are still "some issues" but they are very likely won't fix.

As I hate CSS. I just made this out of necessity.

[tribal seal]

on the other hand, i love css but hate doing it for discord lol

[mighty mural]

xD

[smoky belfry]

you didn't scroll up and down after pasting the snippet did you 🙂

[mighty radish]

anyone know to get rid of this stupid gradient?

[burnt sky]

i havea better version than that one and is less prone to issues with button alignments etc..

[mighty radish]

revenge user spotted

[smoky belfry]

it's part of the snippet i posted

it's the ::after

[mighty radish]

thanks

[mighty radish]

just needed to know which classes changed

appreciate it

[unborn steppe]

I copied the latest snippet from you and it still has the empty space

so I changed it back to your previous snippet

[smoky belfry]

screenshot it

[minor panther]

sorry for the ping but how did you get the revert user area css to work? i tried everything i could in #1361443579905445898 but nothing worked

[unborn steppe]

this one is using this snippet

[mighty radish]

awesome sauce

@smoky belfry you're a legend

the way you coded this css

and not using the class name

[smoky belfry]

i literally just made my own

[mighty radish]

well you do use it

just differently

its a really smart way

[minor panther]

oh

can you send it lol

[smoky belfry]

likely combined with other stuff right ?

[smoky belfry]

right here for that one : #🎨-theme-development message

[unborn steppe]

this one is with the finished snippet, as you can see, the weird empty space is back

[smoky belfry]

i have a feeling that one of your snippets is unsetting a variable...

[minor panther]

it worked ty

[smoky belfry]

can you copy paste all your custom CSS and also your online themes ?

[mighty radish]

i have this LMAO

[smoky belfry]

if another snippet is doing shenanigans with border and padding or top bottom then it'd break the one i sent

[unborn steppe]

I just checked, no other snippet as far as I can tell

[minor panther]

@smoky belfry btw sorry for another question but do yk of a snippet that would show my username in this box above my status but below my display name

[unborn steppe]

[class*=sidebar] > [class*=wrapper] {
margin-bottom: unset;
mask: unset;
[class*="tree"] > [class*="itemsContainer"] > [class*=stack] {
padding: 8px 0px;
}
&::after
{
display: none;
}
}

this one works perfectly for me

[smoky belfry]

it shouldn't, it doesn't do things properly alone

[smoky belfry]

yes and no
you can do it very easily
but i won't do it

[unborn steppe]

strange, it works for me somehow

[smoky belfry]

if you look right there, you'll see someone which alter my old snippet to do that #1271232889081565317 message

[minor panther]

ah ok

[marble monolith]

are there ways to change the size of avatars in chat? I wanna make mine 32px

[onyx mesa]

please do share in dm's whenever you can

[brazen quartz]

  --actual-avatar-size: 32px;

  --custom-message-avatar-size: var(--actual-avatar-size) !important;
  --chat-avatar-size: var(--actual-avatar-size) !important;
}```

[marble monolith]

hmmmm

[viral jasper]

So, does anybody have a working snippet for the chatbar?
mine broke and the blur looks terrible as ever

[half crystal]

Define what you mean by snippet

What does it do

[viral jasper]

well, i had a css snippet that would align the chatbar to the user panel and also would gave me the option to change its color

[half crystal]

It's already aligned to the panel

Color I think is --chat-background-default

[viral jasper]

well, i had all this:

.b8880176888cc928-typingDots,
div[class^="channelTextArea_"] {
  backdrop-filter: blur(0px); /* Configure blur amount here */
  background: #904 !important;
> * {background: 1 0 !important;}
}
form[class*="f75fb00fb7356cbe-formWithLoadedChatInput"] /* Eat message area's space */
{ margin-top: -24px !important;}
div[class^="messagesWrapper__"] > div[class*="bottomBar__"] {bottom: 13px;} /* Fix new messages bar*/
.b8880176888cc928-typingDots, /* The special treatment */
div[class^="messagesWrapper__"] > div[class*="bottomBar__"], /* New messages bar */
div[class^="channelTextArea_"] { /* actual text area */
  backdrop-filter: blur(0px); /* Configure blur amount here */
  background: #904 !important;
}
div[class^="channelTextArea_"] > *:not(._13533e3c5791980f-autocomplete) {background: 0 0 !important;} /* Text area's internals */
ol[class^="scrollerInner__"][data-list-id="chat-messages"]::after { /* Add spacer for the bottom*/
  display: block;
  content: "";
  position: relative;
  height: 130px;
}

And this too:

     --rscb-chat-box-padding: 3px; /* default is 8px for alignment */
}```

and now it's all broken

[burnt sky]

@onyx mesa sent it

[copper locust]

hey gamers, guy #1857743902 trying to get theme repairs.

all it's supposed to do is shrink the embed image/video sizes to how they were way back before discord added the mosaic stuff. basically the size as if they were sent via a link.

anyone have any ideas on how to get it working again?

it's supposed to get rid of the auto center and the actual grid based formatting as well but that part of it is still working, so

[eager pagoda]

@edgy sentinel I grabbed your thing to hide nameplates

/* Hide nameplates */
[class*="nameplated"]>[class*="container"],
[class*="dm"] [class*="fadeIn"] {
    display: none;
}

however, the first user in my DM list always has nameplates (if the user has enabled one). in all other places it works as intended. have you managed to fix it yet? thx for your attention

(I have ThemeAttributes enabled, not sure if it interferes)

[copper locust]

i'm sure the solution to this is probably like literally four lines (it usually is) but idk this stuff

[tough pike]

anyone got a css snippet that removes the topbar?

[lofty yew]

i found a chunk of code that removes it but also does something else

[edgy sentinel]

skill issue

[tough pike]

what else does it do?

[lofty yew]

stuff like that

[edgy sentinel]

add !important

[lofty yew]

i'm pretty sure it's just this

https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/experimental/desktop.css

[tough pike]

just trim it out and send me the code that removes the title bar

[lofty yew]

i still haven't figured out

what part of it does that

'cause im in a call with someone

so a bit later

[copper locust]

fixed it

[tough pike]

send me all of it and ill trim it out myself

[lofty yew]

.

[tough pike]

also, yall got a proper css snipper that squares everything?

shit broke

[lofty yew]

squares?

[tough pike]

like, removes rounded corners

[lofty yew]

oh i dunno

[pure cairn]

*{
  border-radius: 0 !important
}```

[lofty yew]

i'm struggling to figure this out

they're not centered for some reason

nvm i figured it out

happens when i attempt to increase the icon size

now the question is how do i increase their size without ruining it

[smoky belfry]

You replace them by higher res variants

[tidal vapor]

omfg literally all my css broke this is actually so annoying

just uploaded my css into this and it fixed mostly everything

now its just

this shit

hoverable server list fyi

position is absolute so i dont even know whats up

[minor panther]

does anyone have a working css snippet to make oneko appear on the message bar? so far the ones i've found don't work, even after updating them with the link in #theme-support

[tidal heron]

wait collapsible server list u might be cooking

[late lichen]

i thnk i got something

[tidal vapor]

can you send the css chunk responsible for like

the layer/container formatting

[late lichen]

would be this

._5e434347c823b592-sidebarList {
    grid-row-start: start;
}

._5e434347c823b592-guilds {
    background: transparent;
    border: none; /* just to be sure */
    z-index: 1;
}

.ef3116c2da186559-itemsContainer::-webkit-scrollbar {
  display: none !important;
}

.ef3116c2da186559-itemsContainer {
  position: absolute;
  padding-top: 20px;
  z-index: 100;
  top: 50%;
  height: auto;
  max-height: 80%;
  overflow-y: auto;
  transform: translate(-99.9%, -50%) !important;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transition: all 0.35s ease;
  border-radius: 25px;
  mask: none;
}

.ef3116c2da186559-itemsContainer div {
  transform: scale(0%);
}

.ef3116c2da186559-itemsContainer:hover {
  transform: translate(0%, -50%) !important;
}

.ef3116c2da186559-itemsContainer:hover div {
  transform: scale(100%);
}

[tidal vapor]

alright, thank you :)

[late lichen]

wait, hold on

[tidal vapor]

containers fml

yeah same issue

thank you discord for breaking absolute

[late lichen]

thats not right, the buttons where the sidebar would be dont work

[tidal vapor]

weird, they do for me

[shrewd crag]

Anyone know how to fix the placement of the red dot 1? I ran the theme through the converter thing, and that fixed everything except this. the issue only affects DMs, the red dot is in the correct place for server pings

[tidal vapor]

consider sending your css

[late lichen]

this would actually be it, position absolute does work, you are just selecting the wrong thing

._5e434347c823b592-guilds::-webkit-scrollbar {
  display: none !important;
}

._5e434347c823b592-guilds {
  position: absolute;
  padding-top: 20px;
  z-index: 100;
  top: 50%;
  height: auto;
  max-height: 80%;
  overflow-y: auto;
  transform: translate(-99.9%, -50%) !important;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transition: all 0.35s ease;
  border-radius: 25px;
  mask: none;
}

._5e434347c823b592-guilds:hover {
  transform: translate(0%, -50%) !important;
}

[tidal vapor]

that works!!

thanks :)

did they update the ease animation? it feels way smoother now for some reason

[shrewd crag]

I'm not sure how to do that, it's long enough that it doesn't want to send

[shrewd crag]

I don't have that option :/

[tidal vapor]

you gotta write the message first

write anything could be a single letter then the option should show

[shrewd crag]

ah, thank you!

[tidal vapor]

do you know the container for the top header btw

inspect element refuses to select it

shit driving my soul mad

[late lichen]

.c38106a3f0c3ca76-bar ?
the elements on the right can be selected

[smoky belfry]

simply target the icon or the elements on thr right

[late lichen]

these

[tidal vapor]

got rid of the buttons

[tidal vapor]

the bar is still there

steamrotting

[smoky belfry]

you can now look in the DOM to find what to neuter

[tidal vapor]

dom?

[smoky belfry]

https://developer.mozilla.org/docs/Glossary/DOM

[wide rain]

Guys if you want to make your client look presentable, I can post what theme I use alongside my css code that I put in quickcss

[class*=gradientBackground_] {display:none}
[class="container__7aaec bottom__7aaec"] {display:none}
.visual-refresh section._5e434347c823b592-panels {
  margin-left: 69px;
  margin-right: 0%;
  width: calc(102% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  .actionButtons_e131a9 button {
    padding: 100;
  }
}
nav.guilds__5e434  {
  margin-bottom: 0 !important;
}
.title_edbb22 {
  display: none;
}
/* Hides Store and Shop button */
[href="/store"], 
[href='/shop']
{
  display: none;
}
.wrapper_ebee1d {
  display: none;
}
#audio-device-context-deafen {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_302___nitro"]) {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_302___shop"]) {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_11591___shop"]) {
  display: none !important;
}
li:has(a[data-list-item-id="private-channels-uid_11591___nitro"]) {
  display: none !important;
}
/* Hide the "Shop" link in private channels */
li[data-list-item-id="private-channels-uid_13128___shop"],
li:has(a[href="/shop"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
li:has(a[data-list-item-id="private-channels-uid_13128___nitro"]) {
    display: none !important;
}
.containerPadding__7aaec {
  display: none;
}
/* Hide the element with the class 'edbb22df99c39831-title' */
.edbb22df99c39831-title {
  display: none;
}
/* Hide the element but keep its space occupied */
.c69b6db0641110f6-voiceChannelHighlightGlow {
  visibility: hidden;
}
/* Completely hide the voiceChannelHighlightBorder element */
.c69b6db0641110f6-voiceChannelHighlightBorder {
  display: none !important;
}
.visual-refresh section.panels__5e434 {
  margin-left: 65px;
  margin-right: 0%;
  width: calc(102% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  .actionButtons_e131a9 button {
    padding: 100;
  }
}
.pulseGradient__11664 {
  display: none;
}
[href="/store"],
[href='/shop'],
[href='/quest-home'] {
    display: none;
}
._553bf02027ac2419-wrapper {
  display: none !important;
}
.cc5dd25190031396-lowerBadge {
  top: 32px;
  left: 32px;
}
.ef3116c2da186559-wrapper{
    margin-bottom: unset;
}
._7aaec78b97ff00f7-bar {
  display: none;
}```

this is the theme as well

someone try it and let me know

[pure cairn]

you don't need all these display: none;, you can use multiple selectors with commas and display: none; all of them with a single property

[wide rain]

yeah I was DIYing a lot of the code cuz im completely new to this

[eager pagoda]

that didn't fix it, your code has skill issues D:

[sullen hound]

how do i change the flippin chatbar height

everything i've done has either pushed it down or shrunk it with a scrollbar

[last kestrel]

I am so sick of Discord changing variable names and breaking the custom CSS.

[iron smelt]

Welcome to Discord modding

[full rover]

yea its annoying but it's nice most devs will fix it within the next 1-2 days

[full rover]

here ya go :p
#🎨-css-snippets message

(for people using message previews plugin, sorry xD)

[crimson skiff]

make sure to not do this please

[burnt sky]

what classes would i have to edit to move the search bar to the right and move the toolbox next to thefriends icon

[sullen hound]

i extracted the part of the .css explicitly about the compact-input-box and it doesnt seem to do anything besides move the text input up ever so slightly

now that im thinking about it.. it may be because i have the round discord theme on..

nope, does the same thing regardless

[brazen quartz]

  order: 1;
}```

is this thing out for everyone ?

[echo frost]

don't use attribute selectors if you're using the whole class name

[echo frost]

dev://experiment/2025-07_search_filters_redesign

[brazen quartz]

sucks

[echo frost]

what do you not like about it?
I personally like it

[brazen quartz]

im waiting until it's not an experiment to include it in my themes

all the new changes recently are very welcome, though

[echo frost]

oh

I think it's default enabled now

but you can just tell them to enable it

[lofty yew]

loading thing when swapping servers/channels and that server selection scroll on the sticker panel are default color, anybody knows how to play with those?

[tawdry jetty]

Hey so i got this css snippet thats supposed to change the APP tags (originally to BOT but i changed the 'text')
but it doesn't work for me?

.botTagRegular_fc4b4a {
  &[data-tag^="app"] .botText_daff56 {
    visibility: hidden;
    &::before {
      visibility: visible;
      position: absolute;
      white-space: nowrap
    }
  }
  &[data-tag="app"] .botText__82f07 {    
    &::before { 
      content: 'ADD'
    }
  }
  &[data-tag="app • mod"] .botText_daff56 {    
    &::before { 
      content: 'ADD • Mod'
    }
  }
  &[data-tag="app • admin"] .botText_daff56 {    
    &::before { 
      content: 'ADD • Admin'
    }
  }
}
.notAppAsidePanel__95814:has([aria-label="Verified App"]:hover) .layer__6b5c3.disabledPointerEvents__214b3 .tooltip__7b090.tooltipTop_e50d2d.tooltipPrimary__51b23.tooltipDisablePointerEvents__2978d .tooltipContent_adb6d5 {
  visibility: hidden;
  &::before {
    content:'Verified ADD';
    position:absolute;
    visibility: visible;
    width:100%;
    left:0;
    text-align:center
  }
}
.applicationInstallButtonText__90897 {
  visibility: hidden;
  &::before {
    content:'Add ADD';
    position:absolute;
    visibility:visible
  }
}```

[brazen quartz]

https://syndishanx.github.io/Website/Update_Classes.html

[onyx mesa]

[pure cairn]

[tawdry jetty]

still not working after i tried that :[

._82f0793afa59e5dc-botTagRegular {
  &[data-tag^="app"] ._82f0793afa59e5dc-botText {
    visibility: hidden;
    &::before {
      visibility: visible;
      position: absolute;
      white-space: nowrap
    }
  }
  &[data-tag="app"] ._82f0793afa59e5dc-botText {    
    &::before { 
      content: 'ADD'
    }
  }
  &[data-tag="app • mod"] ._82f0793afa59e5dc-botText {    
    &::before { 
      content: 'ADD • Mod'
    }
  }
  &[data-tag="app • admin"] ._82f0793afa59e5dc-botText {    
    &::before { 
      content: 'ADD • Admin'
    }
  }
}
.a3002d7de5be5280-notAppAsidePanel:has([aria-label="Verified App"]:hover) ._59d0d7075b521375-layer._59d0d7075b521375-disabledPointerEvents .c36707910f687430-tooltip.c36707910f687430-tooltipTop.c36707910f687430-tooltipPrimary.c36707910f687430-tooltipDisablePointerEvents .c36707910f687430-tooltipContent {
  visibility: hidden;
  &::before {
    content:'Verified ADD';
    position:absolute;
    visibility: visible;
    width:100%;
    left:0;
    text-align:center
  }
}
.applicationInstallButtonText_cd1424 {
  visibility: hidden;
  &::before {
    content:'Add ADD';
    position:absolute;
    visibility:visible
  }
}```

this is the code the updater gave me

[formal kayak]

What plugin are you using?
It doesn't show up for me.

[tawdry jetty]

wdym plugin

its a css snippet

[formal kayak]

The attribute specified by the attribute selector does not exist.

Probably the CSS for changing the APP icon, right?

[onyx mesa]

you need the Theme Attributes plugin

[formal kayak]

Enabled

[vivid flame]

line 37 looks like its using an outdated class that you need to get yourself since the updater didn't get it ".applicationInstallButtonText_cd1424"

[tawdry jetty]

how do i get it? i've never done CSS with discord b4

[vivid flame]

use devtools (ctrl shift i) i think and look for something close to that in the app launcher button or w/e that snippet does

[tawdry jetty]

oh its supposed to be for the fuckinnnn APP tag

removing it though because idk about the install app screen
still not working...

[limpid mirage]

great, thanks discord
I specifically used a bunch of [class^="classname_"] selectors so I didn't have to update everything every time, and now I have to go through and update everything manually

[formal kayak]

If you're using VSCode or QuickCSS, it should work.
Find

\[class\^="(.*)_"\]

Replace

[class*="-$1"]

[class^="classname_"] → [class*="-classname"]

[limpid mirage]

ooh, saves me a bit of time, I was just getting around to typing that

[crimson skiff]

i stopped using attribute selectors today, most of my css broke. im going to have to trust the css updater now

[brazen quartz]

it works unless the classes get renamed, in which case it's an easy fix anyway

[pure cairn]

Worst case is if the element tree gets changed

[limpid mirage]

I ended up with this

Find:
\[(.*?)[*^]="?(.*?)_*?"?\]
Replace:
[$1*="-$2"]

it worked on a decent amount of things

yeah, a couple things I have to go back and change, like a couple data-list-item-id*=

[full pebble]

how can i keep hover popup in place to inspect classes?

context menu add reaction and use app pop ups to be exact

[clear siren]

f8break

[full pebble]

i dont have break key on my keyboard

[clear siren]

no, enable that plugin

[full pebble]

oh

[clear siren]

then have devtools open, interact with discord as you wish, hit f8 and it will freeze

[full pebble]

thanks

[clear siren]

some popups (mainly tooltips) can be tricky to inspect still because if they have pointer-events:none the click from inspector will also go through so you might need to manually find them in the domtree

[burnt lake]

Is there a new fastening for these elements?

• dm pinned,readl all, _6e9f8dce4cc18de3-wrapper

eh how??

[pine needle]

anyone free, how can i move the translate icon...
thank you..

[minor panther]

idk if this can be called a theme question or smth but is there an experiment that automatically enabled this to show up next to server names? if so which one is it

if the experiment has been deleted, is there css to get rid of the invite button

[pine needle]

 .f37cb1984c371ee5-inviteButton,
 ._2d0abf0638bcaa3f-avatarPopover {
  display: none;
 }

i guess.

[minor panther]

ty

[eager pagoda]

@edgy sentinel took it upon my self and fixed the damn nameplated CSS
arigato for the base

/* Hide nameplates */
[class*="container"][class*="fadeIn"],
[class*="childContainer"][class*="nameplated"]>[class*="container"],
[class*="channel"][class*="dm"][class*="container"]>[class*="interactive"]>[class*="container"]:has([class*="videoContainer"]>[src*="https://cdn.discordapp.com/assets/collectibles/nameplates/"]) {
    display: none;
}

works for both DMs and member list

bonus: hide clan tags too

/* Hide clan (guild) tags */
[class*="chipletContainerInner"]:has([src*="/clan-badges/"]) {
    display: none;
}

not sure if using too many selectors is a bad idea

I added more to be sure it doesn't target the wrong thing

[hexed imp]

I'm trying to hide these two chevrons after the mic and headset, but my CSS skills are severely lacking.

This is what I used to have and it doesn't work anymore. I can't figure out what to change to make it apply to current values.

    border-radius: var(--radius-sm) !important;
    ~ button { display: none; } } }```

[smoky fog]

#🎨-css-snippets message

[hexed imp]

Thank you! I even searched but apparently none of the keywords I used picked it up lol

[full pebble]

Most likely flex direction reverse row

Or row idk how it's placed there

[formal kayak]

#message-vc-trans > .c1e9c47c23f12ca3-iconContainer{
    order:0;
    margin-left: 0;
    margin-right: 8px;
}
#message-vc-trans > .c1e9c47c23f12ca3-label{
    order:1;
}

or

change dev://experiment/2025-11-message-context-menu

[pine needle]

thank you!
didnot know the experiment exists.

[rancid latch]

how would one put a user's role color as input into this css @import url("https://raw.githubusercontent.com/ThatDudePyro/My-Custom-CSS-Collection/refs/heads/main/EmbedBorder.css");

:root {
--wh-border-width: 4px;
--wh-border-radious: 8px;
--wh-background-opacity: 25%;
--wh-default-background: hsl(
from var(--background-surface-high) h s l / 100%
);
--wh-always-show-suppress-embed-button: 0;
}

[tidal heron]

anyone got a currently working hide titlebar import

[wind geyser]

@tidal heron ^

[nimble sun]

Anyone have any idea how to fix this size mismatch? It only seems to happen on this specific DM, presumably because it's the only group chat I'm in, but I can't get anything to change.

[tidal heron]

appears to only work as an online theme as far as i can tell which is odd

[steep drum]

did you disable custom css by any chance?

in vencord's settings

[tidal heron]

im not using any quick css

[steep drum]

you gotta put that in quickcss

[tidal heron]

im using a theme file thats just full of snippets

[tidal heron]

ignore me

[wanton stirrup]

this doesn't work anymore

[wind geyser]

works for me with @import url('https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/main/desktop.css');

[errant monolith]

sorry i dont use this custom css anymore. may want to ask someone who can help you.

[narrow hinge]

/* Remove annoying gaps between buttons (vc, text inputs, etc) */
div[class*="-buttons"] {
  gap: 0!important;
}

[wanton stirrup]

Thanks! It works!

[narrow hinge]

I'd recommend using the pages link instead of a raw github link
https://g0d0fninjas.github.io/visual-refresh-compact-title-bar/desktop.css
or for Vesktop/Browsers
https://g0d0fninjas.github.io/visual-refresh-compact-title-bar/browser.css

[steep drum]

why? what if the owner kills the page sometime later?

or just because of how simple the link becomes?

[pure cairn]

Iirc pages imports can be used by BD users too

Or at least that's what I remember from what Blade told me

[narrow hinge]

Idk, I feel like I remember raw links not working sometimes, but maybe that's no longer an issue

Either way is does look better imo lol

[tidal heron]

im not gonna reply what fixed it and what didnt

[crisp sluice]

I have a question I need answered and I honestly have nowhere else to ask that I know of right now, but I recently noticed that voice channels in some servers are still the 'old' look of them, while some have this new look that looks like the symbol for krisp?? I just really need to know why some look one way and some look the other way.

Images for context??

Also wondering if there is a way to turn the new ones back into the old ones.

[iron smelt]

There is an experiment for it

[crisp sluice]

Whats the experiment??

Because I am having trouble finding it if it is one.

[iron smelt]

2025-12_voice_channel_hoisting

[pine needle]

this hover is nice.. can we get for all icons?

[tawdry jetty]

could someone take another look at this? it still doesnt work.

[pure cairn]

It's not centered

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

[languid copper]

[gritty yarrow]

Hello, i was wondering if someone have a CSS script that grant the ability to change the server icon locally with an url image i already tried this script for instance:

[data-list-item-id="guildsnav___842219447716151306"] .icon__6e9f8 {
content: url("") !important;
width: 40px !important;
height: 40px !important;
object-fit: contain !important;
}

But for some reason it stopped working maybe after an discord update. Thanks

[echo frost]

use the class updater in #theme-support

[gritty yarrow]

thank you for the fast response !

[tiny wing]

Can anyone help me update this code please...

/**──────────║ Favorites ║ Remove "#" From Channel List ║──────────*/
    [class^="iconContainerWithGuildIcon"] {
        >svg:not([class^=icon]) {
            transform: translateY(2px);

            >* {
                mask: unset;
            }
        }

        >[class^=icon] {
            display: none;
        }
    }

[crimson skiff]

/**──────────║ Favorites ║ Remove "#" From Channel List ║──────────*/
._2ea32c412048f708-iconContainerWithGuildIcon {
    > svg:not([class^=icon]) {
        transform: translateY(2px);
        > * {
            mask: unset;
        }
    }
    > [class^=icon] {
        display: none;
    }
}
```next time, with this code, chuck it into the class updater

[grand surge]

does anyone know how to remove the activity cards on top of the memberlist, the css i was using got patched

[tidal heron]

@import url('https://abbie.github.io/discord-css/import.css');  /* Configurable Debloater */

/* Configurable Debloater */
:root {
    --\\--compact-title-bar: false;
    --\\--compact-input-box: false;
    --\\--compact-channel-categories: false;
    --\\--compact-server-list: false;

    --\\--hide-nameplates: false;
    --\\--hide-guild-tags: false;
    --\\--hide-profile-effects: false;
    --\\--hide-avatar-decorations: false;
    --\\--hide-gradient-glow-usernames: false;
    --\\--hide-server-boost-goal: false;
    --\\--hide-server-activity: true;
    --\\--hide-user-activity: false;
    --\\--hide-context-menu-quick-reactions: true;
    --\\--hide-hover-quick-reactions: true;
    --\\--hide-image-edit-button: true;
    --\\--hide-gif-button: false;
    --\\--hide-sticker-button: false;
    --\\--hide-emoji-button: false;
    --\\--hide-apps-button: true;
    --\\--hide-gift-button: true;
    --\\--hide-help-button: true;
    --\\--hide-shop-button: false;
    --\\--hide-nitro-button: true;
    --\\--hide-nitro-upsells: true;
    --\\--hide-vencord-desktop-platform-indicator: true;
    --\\--hide-active-now: true;
    --\\--hide-cluttery-badges: false;
    /* ^ hides quest, hypesquad, active dev, and discriminator badges */

    --\\--darker-scrollbar: true;
    --\\--darker-hovered-message: true;
    --\\--prevent-sidebar-resizing: false;
    --\\--fix-minor-icon-misalignments: true;
}```

im using that

[grand surge]

thanks

[narrow hinge]

#🏥-vencord-support-🏥 message

[marble monolith]

I would like to change the text on this button to say "Friends List", any tips on how to do that?

[pure cairn]

._972a0d22c8afa7f0-link[data-list-item-id$="___friends"] > ._972a0d22c8afa7f0-avatarWithText > ._20a53846fe2e8513-content > ._20a53846fe2e8513-nameAndDecorators > ._20a53846fe2e8513-leftName > ._20a53846fe2e8513-name::after {
  content: " List";
}```

[marble monolith]

I see

yup that works!

[echo frost]

don't you need to update the attribute selectors?

[onyx mesa]

why did the label for this user panel button just disappeared?

[brazen quartz]

happened multiple times, it's gonna be back

[molten vector]

https://www.youtube.com/watch?v=AqgNSwmhSro

[pure cairn]

https://tenor.com/view/mods-fill-his-stocking-with-coal-mods-christmas-lowtiergod-ltg-gif-12645377823045477295

[burnt lake]

Is there a new fastening for these elements?

• dm pinned,readl all, _6e9f8dce4cc18de3-wrapper

[tidal heron]

dont suppose anyone has a snippet that hides the navigation arrows?

[halcyon crypt]

These?

I do, here
#1360578191017640087 message

[echo frost]

or turn off the experiment dev://experiment/2025-08_back_forward

[crude jackal]

  .f37cb1984c371ee5-inviteButton {
opacity: 0;
  

    transform: translate(0%, -10%) !important;
  transition: all 0.9s ease;
  backdrop-filter: blur(3px);
 }

  .f37cb1984c371ee5-inviteButton:hover {
 opacity: 1;
 
 transform: translate(-1%, 5%) !important;
 }

[tidal heron]

if i’ve accidentally enabled this i’ll kms have to check later tho

[echo frost]

it was probably enabled by default for you

[tidal heron]

yea seems to be on by default for me

changed it to not eligible now

[grand surge]

https://github.com/Vendicated/Vencord/blob/main/src/plugins/themeAttributes/index.ts

can we get a themeAttr for the settings modal?

div[class="_8a031a135bfcb9ba-container e4491282b6a5364a-modal theme-dark theme-darker images-dark"]

this guy?

nothig appears easily selectable

[brazen quartz]

.e4491282b6a5364a-modal

or you can [class*="-modal"]:has([data-list-id="settings-sidebar"]) but why

[golden ibex]

Any way to remove this button from the profile while playing a game?

[wind geyser]

._39ec2e3dfb4fd2f2-actions { display: none; } works for me

[burnt sky]

can someone help me get rid of this hover effect on the emoji picker when hovering where it changes the icon each time

trying to keep it looking like this

[hexed imp]

[class$="-voiceChannelHighlightContainer"] { display:none; }```I'm trying to hide this section. I have managed to hide the Show All button and the actual voice channel listings, but I can't figure out how to hide the ACTIVE NOW header. It doesn't seem to have its own class selector?

[pine needle]

._04eede68d145ae81-spriteContainer {
    position: relative;
}
._04eede68d145ae81-spriteContainer > ._04eede68d145ae81-sprite {
    display: none;
}
._04eede68d145ae81-spriteContainer::before { /* emoji chat bar */
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    mask: url("YOUR LINK") no-repeat center;
    -webkit-mask: url(" YOUR LINK ") no-repeat center;
    background-color: var(--text-5);
}

before this im using this.. now it delete the emojis XD
-# found the snipper here do claim credits

[echo frost]

use --custom-emoji-sprite-row and --custom-emoji-sprite-col

So something like this to keep it on the default one

.expression-picker-chat-input-button ._04eede68d145ae81-spriteContainer {
  --custom-emoji-sprite-row: 2 !important;
  --custom-emoji-sprite-col: 10 !important;
}

or you could replace the background image of colored and mask image of greyscale if you want a custom image

[burnt sky]

its the weird random emojis im trying to get rid of that fills its self inside of the icon i made

[echo frost]

what

how did you do it

[spring pewter]

Wtf

This is peak

[burnt sky]

tos this in your quickcss

when ever you hover over the icon it picks a random default emoji to ifll it with

thats what im trying to get rid of

[spring pewter]

But why

It looks silly

[echo frost]

ok then do what i originaly said

[burnt sky]

after the discord update i lost the orginal css i was using to make it the way i wanted, even scrolled through old commits and couldn't find it

[echo frost]

.

[burnt sky]

dpesm

[echo frost]

?

[burnt sky]

doesn't seem like it does anything

bruh

[echo frost]

it does

it keeps it from changing

unless you have different class names for some reason

[burnt sky]

i have it in there and still fills the icon

[echo frost]

aren't you asking for it to not change emojis?

what are you asking for

[burnt sky]

i want it to stay static as the cat icon

[echo frost]

ok

[echo frost]

so what's wrong with that

you don't want it to be yellow?

[burnt sky]

hover over your chat emote a couple times and watch how it changes

thats what im trying to get rid of

[echo frost]

that's what the css i sent does

it will only be the smile

[burnt sky]

i don't want it to be anything just the svg i made the icon into

no hover affects on it

[echo frost]

not even the ones all the buttons have?

[echo frost]

do it like this

[burnt sky]

when i hover over it. it puts the smile in it i don't want it to do that what so ever

[echo frost]

do it like this

[burnt sky]

yeah i have it added

[echo frost]

then you did it wrong

[echo frost]

you didn't do what i said

ig it might just be easier to display: none them

[burnt sky]

i tried finding the class for them but couldn't

[echo frost]

._04eede68d145ae81-spriteColored, ._04eede68d145ae81-spriteGreyscale {
  display: none;
}

it's these two

[burnt sky]

that just gets rid of it entirely

[echo frost]

you also need your css

oh wait

oh

add a background color to your css

[pure cairn]

Peak

[echo frost]

yeah what they didn't want actually is pretty cool

[pine needle]

anyone can help to fix this snippets. (it doesnt work anymore)
-# found this somewhere in this server before.. credit to: biboohater14

/* RAINBOW THREAD */
[class^="content_"] {
> li[class^="container_"] {
> ul[role="group"] {
> div[class^="spineBorder"] {
        --step: calc(var(--channels-name-line-height) + 10px);
        background: var(--thread-muted, repeating-linear-gradient(
          #824e62 calc(var(--step) * 0),
          #824e62 calc(var(--step) * 1),
          #866251 calc(var(--step) * 1),
          #866251 calc(var(--step) * 2),
          #857a65 calc(var(--step) * 2),
          #857a65 calc(var(--step) * 3),
          #5c7a5e calc(var(--step) * 3),
          #5c7a5e calc(var(--step) * 4),
          #4d638b calc(var(--step) * 4),
          #4d638b calc(var(--step) * 5),
          #6e5c89 calc(var(--step) * 5),
          #6e5c89 calc(var(--step) * 6)
        ));
      }

> li:nth-of-type(6n + 1),
> li:nth-of-type(6n + 2),
> li:nth-of-type(6n + 3),
> li:nth-of-type(6n + 4),
> li:nth-of-type(6n + 5),
> li:nth-of-type(6n + 6) {
        --interactive-hover: var(--thread-core, #f38ba8);
        --interactive-active: var(--thread-core, #f38ba8);
      }

> li:nth-of-type(6n + 1) {
        --channels-default: var(--thread-default, rgba(243, 139, 168, 0.7));
        --text-primary: var(--thread-core, #f38ba8);
        --interactive-muted: var(--thread-muted, #824e62);
      }

> li:nth-of-type(6n + 2) {
        --channels-default: var(--thread-default, rgba(250, 179, 135, 0.7));
        --text-primary: var(--thread-core, #fab387);
        --interactive-muted: var(--thread-muted, #866251);
      }

> li:nth-of-type(6n + 3) {
        --channels-default: var(--thread-default, rgba(249, 226, 175, 0.7));
        --text-primary: var(--thread-core, #f9e2af);
        --interactive-muted: var(--thread-muted, #857a65);
      }

> li:nth-of-type(6n + 4) {
        --channels-default: var(--thread-default, rgba(166, 227, 161, 0.7));
        --text-primary: var(--thread-core, #a6e3a1);
        --interactive-muted: var(--thread-muted, #5c7a5e);
      }

> li:nth-of-type(6n + 5) {
        --channels-default: var(--thread-default, rgba(137, 180, 250, 0.7));
        --text-primary: var(--thread-core, #89b4fa);
        --interactive-muted: var(--thread-muted, #4d638b);
      }

> li:nth-of-type(6n + 6) {
        --channels-default: var(--thread-default, rgba(203, 166, 247, 0.7));
        --text-primary: var(--thread-core, #cba6f7);
        --interactive-muted: var(--thread-muted, #6e5c89);
      }

      li:only-of-type {
        --channels-default: var(--thread-default, rgba(245, 194, 231, 0.7));
        --text-primary: var(--thread-core, #f5c2e7);
        --interactive-muted: var(--thread-muted, #836a81);
      }
    }
  }
```

it suppose to look like this (image)
thank you. ❤️

[languid copper]

oo i liek dat

[delicate umbra]

#🎨-css-snippets message
so i tried to put this into https://syndishanx.github.io/Website/Update_Classes.html, and it kinda worked but at the same time it didnt.

.d125d22cdfd32cfe-content {
    height: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-y: hidden !important;
}```
 i did this which somewhat fixed it but from here i dont know what to do, can anyone help me?
i actually can't scroll to other channels in the list of channels for no reason, and i dunno how to fix this thing
id love some help on this

[golden ibex]

Thanks!

[crimson skiff]

i see the appeal.

[pine needle]

wohoooo thank you so muchh!

[crimson skiff]

np, i switched to classes, so if this breaks again, you can chuck this into the class updater and it should work

[pine needle]

i appreciate it very much!

[onyx mesa]

holy shit the dev tools on the app are unusable

might actually have to switch to browser for css

[crimson skiff]

[tidal heron]

anyone using radial status by any chance?

u ever get a fix for this?

[burnt knot]

i think so lemme get my laptop

    width: 25px;
    height: 25px;
}```

this seemed to work but might break other stuff for all i know

in quick css or editing the theme itself

@tidal heron

[tidal heron]

ill give it a check when im home thanks

[crimson skiff]

yeah i do use it, but i dont get this issue #🎨-theme-development message

maybe because im using a custom one, but idk

[crimson skiff]

pet viggy

[smoky fog]

ok that's cute. now i need.

[languid copper]

Beautiful

[spring pewter]

@normal lintel

[onyx mesa]

when will this be fixed

[half crystal]

When they fix it and that is the best answer you are gonna get

[tidal heron]

alright i purposely didnt answer u quickly coz i was waiting for this to happen again

have u ever had this issue?

and have u ever had an issue in ur dm list with the typing animation being very misaligned

[crimson skiff]

yeah typing animation is really fucking misaligned

[crimson skiff]

but aside from that, nope

[tidal heron]

i wonder if this is to do with #1403158857706115085

[humble jay]

u get one big kiss

[tranquil whale]

im challenging my self by trying a new theme every day any recomendations

[formal kayak]

I'm customizing midnight-discord. Which one is better?

--folder-icon-color-hover: var(--text-default);
@container root style(--colors: on) {
    --folder-icon-color-hover: var(--bg-4);
}

--folder-icon-color-hover: if(root style(--colors: on): var(--bg-4); else: var(--text-default););

To clearly distinguish multiple accounts when using them simultaneously, I've separated the midnight-discord themes
and changed the folder icons.
I'm trying to change the color that appears when hovering over folder icons in the midnight-discord colors settings.

[brazen quartz]

the latter syntax is so useless cuz they're the exact same thing, but i prefer the former

[crimson skiff]

i don't really have any recommendations, you make what you want to make

[tiny wing]

Anyone know the code for the top corners when there is a server banner? I've tried the dev tools but I just can't find the right class name tia....

[onyx mesa]

._5e434347c823b592-sidebarList

should be this one

[tiny wing]

I'm using midnigh theme if that helps but that didn't help even using important hmm

scrap that it works now after restarting the app... thank you very much

[formal kayak]

thank you!

[tidal vapor]

is there any way to get rid of this 'shadow' on the bottom of the memberlist

and maybe replace it with a mask?

here's the css

[brazen quartz]

move the padding from .c8ffbb79449f399c-membersWrap to .c8ffbb79449f399c-members

[tidal vapor]

Osage Core

worked

also any idea how to remove the activity tab from the memberlist

been trying containers for like a few days now here and there

[pure cairn]

I used to have a snippet but I don't think it works anymore

[echo frost]

just collapse it

iirc it needs has to fully hide it
but maybe I don't recall correctly or it changed

[pure cairn]

yeah it does

anyway, here's a quick snippet that sadly uses :has()

.c8ffbb79449f399c-members > .d125d22cdfd32cfe-content {
  >h3.c8ffbb79449f399c-membersGroup:has(+div:not([class])),
  >div:not([class]) {
    display: none;
  }
}```

[tidal heron]

i have something for that

when i go back to my pc ill send it

https://discord.com/channels/1015060230222131221/1373627680980861089

pretty sure it’s this

[inland igloo]

kde-breeze 🙂

It's basically an updated version of this:

#🎨-theme-development message

[errant jetty]

how do I change this color? the rest of my theme works, except this.

ive tried a bunch of selectors, with no effect.

similar thing is happening in the Dms tab with the "online"/"all" tabs.

[tranquil whale]

Anyone interested in a custom api system like lanyard

[chilly knoll]

durin

[full pebble]

i need help im losing my mind

stupid discord scrollbars

how do i remove the scrollbar that is unused

because it leaves this nasty margin

negative padding doesnt seem to work

[rapid holly]

[brazen quartz]

overflow: hidden/visible

[full pebble]

this shit makes no sense

[full pebble]

doesnt work

either

[brazen quartz]

!important ? it has inline overflow

[full pebble]

nope

i tried everything

i guess ill just hardcode margin to accomodate for that

[brazen quartz]

maybe it's your css because it will work

[full pebble]

div[aria-label$="ctions"]>div[dir="ltr"] {

    margin: -4px;
    height: fit-content;

    div[class*="-wrapper"] {
        padding: 2px;
    }

    div[role="separator"] {
        margin: 1px 8px;
    }

    div>div>div>div[class$="-layer"]>div[class*="submenuPaddingContainer"] {
        transform: translate(0, -5px);

        padding: 0 4px;

        div[class*="-submenu"] {

            div[class*="-scroller"] {
                padding: 4px;
            }
        }
    }
}

div[class*="-animatorRight"]>div[class$="-popout"] {

    padding: 0px 8px;

    div[class$="-title"] {
        padding: 6px 0 4px 0;

    }

    div[class$="-more"] {
        margin: 0 4px;
        padding: 4px 0 6px 0;
    }
}

div[aria-label="Stop Streaming"]>div[dir="ltr"],
div[aria-label="Camera"]>div[dir="ltr"] {

    padding: 4px;
    height: fit-content;

    div[role="separator"] {
        margin: 1px 8px;
    }

    div[class$="-clickTrapContainer"] {

        div[class$="-layer"]>div[class*="submenuPaddingContainer"] {

            transform: translate(0, -5px);

            padding: 0 4px;

            div[aria-activedescendant^="manage-streams"]>div[dir="ltr"] {
                padding: 4px;
            }
        }
    }

    div[aria-activedescendant^="video-device-context"] {
        margin: 0 0 0 4px;

        div[dir="ltr"] {
            padding: 4px;
            height: fit-content;
        }
    }

    div[id="manage-streams-change-windows"]>div>div>div>div>div[role="menu"] {

        transform: translate(0, -5px);

        div[dir="ltr"] {

            padding: 4px;
            height: fit-content;
        }
    }
}

div[aria-activedescendant^="textarea-context-suggestions"]>div>div>div>div>div>div[role="menu"] {

    transform: translate(0, -5px);
    padding: 0 4px;

    div[dir="ltr"] {

        padding: 4px;
        height: fit-content;
    }
}

i think ill just give up since i have more important shit to do

ill just update it as code for my compact context menus

not finished*

i know its scuffed

[jovial arrow]

new way to recolor these little brats? my old one broke with the update and i'm

all the toast thingies basically

[echo frost]

._3fde7e375925af75-toast

probably better to edit the variables though

--notice-background-critical: var(--red-new-85);
--notice-background-info: var(--blue-new-86);
--notice-background-positive: var(--green-new-87);
--notice-background-warning: var(--yellow-new-86);
--notice-text-critical: var(--red-new-9);
--notice-text-info: var(--blue-new-12);
--notice-text-positive: var(--green-new-14);
--notice-text-warning: var(--yellow-new-12);

[tidal heron]

i swear it gets more fucked by the day

[harsh harbor]

Discord moment

[half crystal]

latest css snippet

[pure cairn]

https://media.discordapp.net/attachments/665040925243736074/784899319823859743/that_was_fucking_stupid.gif

[tranquil whale]

can I get the css for this pls

[tranquil whale]

can I get the code for this pls

[pure cairn]

It's a gif

[wicked sparrow]

i've been trying to shrink the discord vc stream pop out chat for a while now i can't seem to find the right elements or properties to change to make that happen can someone help me?

example i have vc popped out chat and i wanna make the chat smaller than it already goes, can't seem to find the right things to edit

[jovial arrow]

lifesaver

[austere cloak]

I have this snippet tahts brokes my background mention for everyone here and selfmention

Anyone could help me fixing it ? :

[echo frost]

what is it meant to do?

it also breaks the hover color

@echo frost test

i think the variables just have new names

var(--message-mentioned-background-default)

change var(--background-mentioned) to that

and I think change var(--info-warning-foreground) to var(--icon-feedback-warning)

but after fixing it, it doesn't seem to actually do anything

if you want to change the mention colors, just change the variable

[echo frost]

^

[half crystal]

this isnt cursed

[half crystal]

sometimes my genius, it astounds even me

[crimson skiff]

soggy cat

[gray herald]

anyone know how to make it like this with quick css ?

this is the new one atm

[crimson skiff]

it has been made plenty of times

[smoky belfry]

i've shared it many times, use discord search feature

what your'e looking for is the user area or user panel

[austere cloak]

@austere cloak

[austere cloak]

Tysm seems to work butI have a weird color ''blur''
When its a role ping message but doesn't have the role doesn't look like the default one on here/everyone and selfmention
CF : PIC

Default one

[echo frost]

if you want the default one, why are you using a snippet

[tidal heron]

u said u had a custom radial status right?

[crimson skiff]

yes

[tidal heron]

can u send me it preferably as an import link if possible

wanna see if urs fixes all the stupid bugs i have

[crimson skiff]

are there any issues?

[tidal heron]

ive got a shit ton of misalignments pretty much

and when in vc you know the ring that shows around ur profile in the bottom left thats hidden behind the status

u can see like 1px of the ring

i say a ton of misalignments but its just when clicking on profiles the ring is misaligned sometimes and the typing indicator is also misaligned which ur already aware of

[minor panther]

does anyone have a snippet to auto-expand the bio in a user popout

[low mountain]

hii, what is ur custom font pls?

[echo frost]

not possible
it is possible

you mean this right?

[pure cairn]

I think it is possible

line-clamp: unset on the text and then you hide the "view full bio" element

I had a similar snippet a while ago

[formal kayak]

midnight-discord theme

[low mountain]

tysmm!

[echo frost]

oh wait it is
I thought it wasn't in the html for some reason

[pure cairn]

[minor panther]

yea

sorry for the late reply

if anyone has a working snippet that does it lmk

[echo frost]

.f5f93a5c4078d63c-descriptionClamp {
  -webkit-line-clamp: unset;
  max-height: unset;
}
.f5f93a5c4078d63c-viewFullBio {
  display: none;
}

this might make profiles with really long bios annoying

[minor panther]

ty

[formal kayak]

.f5f93a5c4078d63c-descriptionClamp {
    -webkit-line-clamp: unset;
    overflow: scroll;
    max-height: 110px;
}
.custom-user-profile-theme .f5f93a5c4078d63c-descriptionClamp {
    scrollbar-color: color-mix(in srgb,var(--profile-gradient-primary-color),var(--profile-gradient-secondary-color)) transparent;
}
.f5f93a5c4078d63c-viewFullBio {
    display: none;
}

[tranquil whale]

its my bday yay

[visual pilot]

you're in the theme dev channel but happy birthday

[gleaming cobalt]

happy birthday dude

[plain kelp]

So you're one day older than the Earth itself

[river pecan]

i wonder how will i fix this issue:

@font-face {
    font-family: hashtag;
    src: url('https://teeenoob.github.io/themes/fonts/hashtag.ttf');
}
* {
    font-family: "hashtag" !important;
}

[river pecan]

happy bday

[tranquil whale]

thanks

[crimson skiff]

@echo frost i think you made this snippet, but i cant find it, did you make the snippet where the text area buttons are invisible until you hover over the send button? do you have a link to it?

[echo frost]

#🎨-css-snippets message

[crimson skiff]

thanks

[crimson skiff]

finally updated some of my themes

[tranquil whale]

anyone know what this upadted to

[class*="panels_"]

[brazen quartz]

[class$="-panels"]

[flat pawn]

does anyone know how to remove these buttons?

[onyx mesa]

[aria-describedby="«r61f»"], 
[aria-describedby="«r61f»"] ~ span {
  display: none;
}

maybe

[half crystal]

okeko petting

[pure cairn]

Tell me it's stock behaviour

[half crystal]

ITS NNNNNNNOOOOOOTTTTTTTTTTT
however

#oneko {
    pointer-events: all !important;
    cursor: grab;

    &:active {
        cursor: grabbing;
        background-position: -96px -64px !important;
    }
}

[pure cairn]

Should pr it

feature: Oneko (make the cat pettable)

[half crystal]

problem is you cant click past the cat which some people may not like

[pure cairn]

petting the cat is more important

(make it a toggleable option)

togglable? toggleable?

[half crystal]

i dont know how to plugin rahhhhh

[echo frost]

those change
that won't work

[onyx mesa]

they do? they weren't changing for me

[echo frost]

even if you left the vc and rejoined it?

I haven't tested with those specific buttons, but the other aria described bys have changed

[languid copper]

100% do it

[pure cairn]

if only I knew how to code

[languid copper]

add it as css snippet

[pure cairn]

Then it would not have toggleable options

[tranquil whale]

i hate this all cool discord themes are gone

anyone got any theme recomendations

[hexed imp]

The class update seems to have broken this and running it through the updater tool didn't resolve it - and I don't understand CSS quite enough to pick through what is failing now. I'm trying to hide completed & expired quests. Anyone with better CSS knowledge than me? lol

[echo frost]

This does NOTwork.
I wouldn't recommend using it though. a false positive might be possible, and :has() is very bad in discord
it's much better than that snippet though (which is extremely bad in many ways)
~~```css
._60f82152ef4c5e63-questTile:has(

._956c67492d3b967a-container
._956c67492d3b967a-rewardDescriptionContainer
._956c67492d3b967a-assetWrapper
._956c67492d3b967a-progressWrapper
._956c67492d3b967a-confetti
) {
display: none !important;
}
._60f82152ef4c5e63-questTile:has(
._956c67492d3b967a-container
._960ef1e55e284ad3-container
._960ef1e55e284ad3-ctaItem
._960ef1e55e284ad3-button
button[disabled]
) {
display: none;
}
._60f82152ef4c5e63-questTile:has(
._956c67492d3b967a-container
._956c67492d3b967a-rewardDescriptionContainer
._956c67492d3b967a-assetWrapper
._956c67492d3b967a-progressWrapper
) {
display: flex !important;
}

the reason it's so long is to try to make :has() not as laggy

ok just realized my snippet hides ones that are completed that you still need to claim

I don't think that snippet you were using even worked before discord changed the classes

it hid:
quests with disabled buttons (which includes in progress quests, and possibly others that shouldn't be hidden)
and quests with two buttons (which inclues some completed quests, but not most, and could potentially be false positives)

This does work for hiding completed quests though

._60f82152ef4c5e63-questTile:has(
  >._956c67492d3b967a-container
  >._956c67492d3b967a-rewardDescriptionContainer
  >._956c67492d3b967a-assetWrapper
  >._956c67492d3b967a-progressWrapper
  >._956c67492d3b967a-confetti
) {
  display: none;
}

:has() causes pretty significant lag usually, but this surprisingly doesn't seem to be very laggy

[echo frost]

you should probably use this user plugin https://discord.com/channels/1015060230222131221/1404555062205874176

[hexed imp]

Thank you! That looks much better than any CSS snippet. I have never used a userplugin before so I'll look into how to do that.

[river pecan]

oh my god, 1st time checking the devtools (after update) and seeing this horror

how to adapt to it now?

[river pecan]

nvm

[half crystal]

Self-promo - https://betterdiscord.app/theme/Shine

[languid copper]

Self-promo - https://tnt4me.github.io/SleekCord

[half crystal]

fun fact - our themes were both added to the BD theme store at the same time

[languid copper]

cool

[mild temple]

anyone know what the vc chat icon is called?

[gleaming grove]

No clue if this is the best channel to ask about it
would anyone know how to change the profile picture size?
I had a edit css someone made for me a long time ago, but it stopped working at some point.

i find discord pfps too small

[humble jay]

in profile?

in chat?

[half crystal]

profile decor is a bit misaligned, but otherwise this works

:root {
    --custom-chat-avatar-size: 80;
}

._5126c0cd07f243a0-cozyMessage {
    --custom-message-margin-left-content-cozy: calc(16px + 16px + var(--custom-chat-avatar-size, 40) * 1px);

    &._5126c0cd07f243a0-groupStart {
        min-height: calc(var(--custom-chat-avatar-size, 40) * 1px) !important;
        display: flex;
        flex-direction: column;


        .c19a557985eb7793-avatar {
            transform-origin: left top;
            left: 16px;
            scale: calc(var(--custom-chat-avatar-size) / 40);
        }

        .c19a557985eb7793-avatarDecoration {
            transform-origin: left top;
            inset-inline-start: 12px;
            scale: calc(var(--custom-chat-avatar-size) / 40);
        }

        &.c19a557985eb7793-hasReply {
            min-height: calc(var(--custom-chat-avatar-size, 40) * 1px + 1.0625rem + 12px) !important;
        }
    }
}

[gleaming grove]

Exactly what i was looking for thank you!

[tranquil whale]

this is epic but maybe add support for lyrics plugin

[languid copper]

what plugin is that?

[tranquil whale]

its a custom one available on equicord under music player

[iron smelt]

If just a slightly modified version of #1281303278008799352 message

[languid copper]

ill check it out

[hexed imp]

Is there a way to reorder these? I'd love to put Friends > Servers > Activity > Board, but I don't understand how to set them to a different order: #.

Alternately, just not show Board or Activity, as tbqh I don't care about that at all. I did manage to hide the board (widgets-tab), but it doesn't hide the TAB, it just makes the games invisible and now I have a mostly-blank screen lol

[turbid aurora]

okay so I need to know if something is possible

can a theme replace a specific user's pfp with something else?

[echo frost]

yes

very easy

[echo frost]

This replaces your pfp with the image above your message

img[src^="https://cdn.discordapp.com/avatars/711897415749468201/"] {
  content: url(https://cdn.discordapp.com/attachments/1134844326933954622/1457506076042858689/XCQZrY71it.png?ex=695c3fcf&is=695aee4f&hm=f27d6a2aa3a432093fa29307df6687dfea710aacdc397a0bc64d2d100519d7d0&);
}

img[src^="https://cdn.discordapp.com/avatars/USER_ID_HERE/"] {
  content: url(IMAGE_URL_HERE);
}

[potent horizon]

is it possible to change the colors in the platformindicators plugin?

[viral jasper]

is there a way that somebody can fix this css snippet for the WhosWatching plugin for me?

[echo frost]

from the code, it looks like the h2 was changed to h3, so try that

if that doesn't work:
press ctrl+shift+i
press the inspect element button (in the top left of devtools)
then click on the text, and send a screenshot of discord and the devtools

i don't want to install that userplugin, so i don't have the html

[viral jasper]

alright

[echo frost]

Did it work?

I need to go do something, so if you need more help, I'd need to do it now

[viral jasper]

i'll probably reply later

[humble jay]

/* Dropdown scroller container */
._5fa2fb5c4d963128-selectDropdown .d125d22cdfd32cfe-auto.d125d22cdfd32cfe-scrollerBase {
    max-height: auto;
    height: 75vh !important;
    margin-left: -5px;
    margin-top: -10px;
    margin-bottom: -8px;
}
/* Content wrapper */
._5fa2fb5c4d963128-selectDropdown .d125d22cdfd32cfe-content {
    max-height: 75vh;
}
/* Dropdown scroll bar */
._5fa2fb5c4d963128-selectDropdown .d125d22cdfd32cfe-auto::-webkit-scrollbar {
    width: 10px;
}
._5fa2fb5c4d963128-selectDropdown .d125d22cdfd32cfe-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0px;
}
._5fa2fb5c4d963128-selectDropdown .d125d22cdfd32cfe-auto::-webkit-scrollbar-track {
    margin-top: 9px;
    margin-bottom: 8px;
}
/* Dropdown animation */
._5fa2fb5c4d963128-selectDropdown {
    transition: none !important;
    overflow: hidden;
}
/* Remove arrow flip animation */
._5fa2fb5c4d963128-chevronIcon {
    transition: none !important;
}
/* Each row */
._5fa2fb5c4d963128-selectDropdown ._2e223b71e11aa968-listBoxItem {
    height: 43px;
    margin-bottom: -10px !important;
    display: flex;
    align-items: center;
    /* transform: scale(0.88); */
    transform-origin: center;
}

it stops loading new entries here if i set height below 43px

can i force it to load all of the items somehow? cuz i hate when it loads as u scroll anyway

[echo frost]

i don't thjink there's any way to fix it with css

[viral jasper]

it works

[tranquil whale]

im in theme hell

anyone got a scss theme updater

need to update this

[crimson skiff]

i dont think that is valid scss...

[tranquil whale]

Idk

It worked before most recent update

Its by ascellayn

Its part of flashcord

[crimson skiff]

anyone can vban him?

[torpid glade]

How do I activate the mobile online option while using a computer? plugin

[half crystal]

1. #🏥-vencord-support-🏥
2. there is no offical plugin in vencord that can do this

[prisma lynx]

any way to revert the new look for Active Now on the friends tab? doesnt bother me much but it looks off

[pure cairn]

how does it look for you?

[echo frost]

probably this on the right

[late lichen]

what type of censoring even is that? replace every font character with "•"?

[crimson skiff]

* {
    -webkit-text-security: disc !important
}

[pure cairn]

Yeah I know what the active now tab is, I was asking for a screenshot of how the new look is

[lofty yew]

for some reason these don't work anymore, anybody knows why?

[pure cairn]

Most likely due to variable names change

[onyx mesa]

they are still changing var names for no reason

[tranquil whale]

im tryin to make a peak theme

[echo frost]

yeah
that's what i assume they mean by the new look

me censoring it mightve made it a bit less clear though

[pure cairn]

Yeah I don't really see any difference tbh

[echo frost]

maybe this is more clear?

i'm pretty sure this is sort of new

[pure cairn]

Oh I like that

It's been a while since I last saw that section tbh, I'm still using the Land and Learn treatment 1 experiment

[oak plover]

Land and learn is gone I think

[pure cairn]

[tranquil whale]

Right now css snippets suck

Nothing good in a while

Nor any new good themes and many are braking

https://sirio-network.com/Archive/SNWE-2023/flashcord/archive/alpha/media/FC-CBGR.gif

like flashcord

[lone scarab]

hi

how does anyone change the yellow ping bg color 💔

@lone scarab

PLZ im desperate

[echo frost]

:root {
  --message-mentioned-background-default: blue;
  --icon-feedback-warning: red;
}```

[lone scarab]

i love you

[echo frost]

ok

[humble jay]

after updating ur fix with https://syndishanx.github.io/Website/Update_Classes.html it worked for a while, but a days or two ago it broke the online indictors again, do u by chance still use/update this snippet?