🎨-theme-development

[calm rain]

well I couldn't get it to work so idk

I'm more focused on this rn tbh

[crimson skiff]

what in the scuffed ass css formatting is that

[echo frost]

looks like how nvhhr formats their css

or at least used to?

oh

it's my nvhhr

[pure cairn]

It's not too bad

[echo frost]

idk how I typed this instead of "it's made by nvhhr"

somehow ade b didn't get typed ig

[clear siren]

[chilly knoll]

bump

[pure cairn]

no, I don't think there is

[chilly knoll]

sad

[calm rain]

how do I use the same font for all text?

[pure cairn]

#🎨-css-snippets message

[wet crow]

any css thing that can remove this popup

[pure cairn]

enable f8break plugin -> ctrl shift i -> click anywhere on the discord window without having that popup go away -> press f8 -> enable element picker

[wet crow]

i dont get it

[grizzled moss]

Does anyone have a CSS snippet that inserts my profile (PFP) there? i know there was a theme // css but i cant remember

[subtle sedge]

disable showhiddenchannels or enable 2fa

or find the class name of this prompt with inspect element

[wet crow]

i disabled show hidden channels it didnt go away

[wet crow]

what prompt

[echo frost]

the image you sent

[wet crow]

yes

[echo frost]

that's the prompt they're talking about

[austere cloak]

Hey anyone can help me hiding the bluring black effect on profile popup plz :
cf pics :
I have this already idk if this can helps u finding:

foreignObject[mask^="url(#svg-mask-avatar-"] {
  mask: none;
  img {
    border-radius: var(--radius-round);
  }
}

[echo frost]

foreignObject[mask^="url(#svg-mask-avatar-"] {
  mask: none;
  img {
    border-radius: var(--radius-round);
  }
  +rect {
    display: none;
  }
}

[austere cloak]

Not working

[echo frost]

oh

i only checked on mobile

[austere cloak]

Allg ood 😉

Work for mobile yes

[echo frost]

wait it is working on offline

whos profile is that?

[austere cloak]

Hm an offline friend

[echo frost]

can you show an example of someone in this server so i can see it too?

oh online people on pc have it for me

[austere cloak]

For another one is working well looks like depends of profile background color

[echo frost]

foreignObject[mask^="url(#svg-mask-avatar-"] {
  mask: none;
  img {
    border-radius: var(--radius-round);
  }
  +[fill=black][style="opacity: 0.45;"] {
    display: none;
  }
}

[austere cloak]

Its mostly for offline ithink

[echo frost]

it was just circular ones

[austere cloak]

I replace or addit?

[echo frost]

replace

[echo frost]

replace this

[austere cloak]

Tysm perfect

[astral ginkgo]

How do I have this apply only for one server

svg[class^="ownerIcon"] {
  color: #dba92b;
}

[astral ginkgo]

Nevermind, got it !!

I feel so proud of myself :3

:root {
  &:has([href^="/channels/serveridhere"]) svg[class^="ownerIcon"] { 
    color: #dba92b; 
  }
}

Learned by reading this: https://discord.com/channels/1015060230222131221/1470515757577273579

Specifically this part!

.content__5e434 {
    /* Servers/Channel                                    (server id first + channel id after to target a channel) */
    /* Duplicate this part per server.                       v ID(s) HERE                                                  v URL HERE               TINT HERE IF YOU WANT IT v       Blur (May Cause Lag) V*/
    &:has(li.containerDefault_c69b6d [href^="/channels/1145096753301946500"]) div.chat_f75fb0 { background: url("https://m.patchokki.art/m/7i9.gif"); &::before {background: #00000086; /*backdrop-filter: blur(5px);*/}}
    
}

[astral ginkgo]

How did that ONE line slow down my discord performance? 😔

[plain kelp]

Well the line has :has on it

Why are you surprised?

[astral ginkgo]

I am not familiar with CSS, really, I only know basic syntax and stuff.

[astral ginkgo]

Anyway I can reduce the performance tank? Lol

[grand surge]

any css to remove server banner btw

[half crystal]

.animatedContainer_f37cb1,
.headerEllipseBackdrop_f37cb1,
.headerEllipseForeground_f37cb1,
.headerGlass_f37cb1,
.animatedBannerHoverLayer_f37cb1,
div[style="height: 84px;"][aria-hidden="true"] {
    display: none;
}

.headerContent_f37cb1,
.name_f37cb1 {
    color: var(--text-strong) !important;
    filter: none !important;
}

.header_f37cb1 {
    border-bottom: 1px solid var(--border-subtle)!important;
}
.bannerVisible_f37cb1 > .header_f37cb1 {
    padding-top: calc(var(--space-xs) + 1px);
}

[grand surge]

YES

FINALLY A WORKING ONE,THX

[astral ginkgo]

What could I do about this, please?

[pure cairn]

Holy lag machine

[astral ginkgo]

😔

[pure cairn]

:root:has() is crazy

[astral ginkgo]

OH

😭

[astral ginkgo]

giggling my tooshy off

[pure cairn]

Gonna hop on pc in a bit for a less laggy version

[astral ginkgo]

When will you be on PC so I can try and fix it then send it to you before then?

[pure cairn]

As I said, in a bit

[astral ginkgo]

Ok

I'm sorry I don't think I'll have it in time for you

Trying to do it right now by changing root to .nameAndDecorators__91a9d, then just having it search for the name of the server owner, then when you want to use it you can set it to the nickname of the server owner in the server you want to use it in.

I won't have it right away though if you just wait a bit more you'll definelty be able to use it

Looks like you're already on PC anyways, my apologies.

[pure cairn]

.member_c8ffbb>.childContainer__91a9d>.memberInner__5d473:has(>.avatar__91a9d>.wrapper__44b0c>.mask__44b0c>foreignObject>.avatarStack__44b0c>.avatar__44b0c[src^="https://cdn.discordapp.com/guilds/GUILDID/users/"])>.content__91a9d>.nameAndDecorators__91a9d>.ownerIcon__5d473 {
    color: #dba92b;
}```

[astral ginkgo]

What huh

OH

[astral ginkgo]

Oh my thank you

[pure cairn]

this still uses :has(), but it's way more specific

[astral ginkgo]

Figured there was no way around it.

Around using :has, that is

[astral ginkgo]

Really, thanks

[pure cairn]

[astral ginkgo]

Assumes that guild owner has nitro and styled per server profile picture in said server

If they don't have nitro use this one

.member_c8ffbb>.childContainer__91a9d>.memberInner__5d473:has(>.avatar__91a9d>.wrapper__44b0c>.mask__44b0c>foreignObject>.avatarStack__44b0c>.avatar__44b0c[src^="https://cdn.discordapp.com/avatars/USERIDGOESHERE"])>.content__91a9d>.nameAndDecorators__91a9d>.ownerIcon__5d473 {
    color: #dba92b;
}

[pure cairn]

oh I didn't even check for that

[astral ginkgo]

No worries dude you're a GOAT

You see erm earlier I thought you were asking me to make it for you before you got onto your PC, lol.

Hence why I asked when you'd be on

[pure cairn]

I guess you could just use this then

.member_c8ffbb>.childContainer__91a9d>.memberInner__5d473:has(>.avatar__91a9d>.wrapper__44b0c>.mask__44b0c>foreignObject>.avatarStack__44b0c>.avatar__44b0c[src*="/USERID/"])>.content__91a9d>.nameAndDecorators__91a9d>.ownerIcon__5d473 {
    color: #dba92b;
}```

which is universal for both nitro and non nitro users

[pure cairn]

fair

[astral ginkgo]

it's so good

aesthetic judgements cannot be good, bad, nor reasoned. as long as one likes them, yk.

✅✅✅

woah how's that look so good (also there's no way you're using windows i refuse)

[pure cairn]

btw, any reason you'd only like to change the icon color for one specific server?

I can't really think of a use case

[astral ginkgo]

I am curious of your guesses

[astral ginkgo]

Just to match the role color which is very, very close to the crown gold when not using any color themes.

It's so close I thought the role was color picked from the crown a few months ago, actually, haha

[crimson skiff]

yes, im using windows, hence my nickname
https://github.com/NSPC911/dotfiles

that's a very old screenshot though, i stopped using translucency

[echo frost]

how did you blur it?

[crimson skiff]

micaforeveryone

[echo frost]

is that a windhawk thing

[crimson skiff]

though it stopped working when i switched to a different laptop, i switched to a windhawk thing

[crimson skiff]

micaforeveryone isnt a windhawk thing

https://github.com/MicaForEveryone/MicaForEveryone

[echo frost]

oh

cool

[crimson skiff]

though now, i use https://windhawk.net/mods/translucent-windows

[clear siren]

dwmblurglass better

[crimson skiff]

dont care

maybe i should try translucency again

the main issue with translucency is that certain websites, even with zeninternet extension, have some solid colors, so i have to use my userscript and target those to blur them

[clear siren]

I use css (stylus) to make just a few websites transparent

[crimson skiff]

i have a custom tampermonkey script to inject css on certain sites, also including shadow doms

which lets you do some funny stuff like this

[crimson skiff]

anyone wants this?

[echo frost]

wtf

that's so obnoxious

[crimson skiff]

thats the point

[echo frost]

mines better

.message__5126c {
  animation: messageAnim 1s ease forwards;
}
@keyframes messageAnim {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

oh it animates twice for messages i send

test asd

[pure cairn]

😭

Windows moviemaker aah transition

[echo frost]

wow that looks so good when someone else sends a message

[echo frost]

tip: don't change the selector to *

[pure cairn]

Who would've guessed

[echo frost]

am i crazy or does this actually look kinda good

.message__5126c {
  animation: messageAnim 1s ease forwards;
}
@keyframes messageAnim {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.1) translateY(-1000px);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1) translateY(0px);
  }
}

[pure cairn]

Can't test it rn

Will check it out later

[echo frost]

it's so beautiful

only slightly ironicly

it definitely didn't take me 3 mins to remember the word is ironic

[pure cairn]

You mean ironically

[echo frost]

yeah

it took me 3 mins to remember the word

you expect me to remember the spelling?

[pure cairn]

Nah, English is difficult

[echo frost]

(i have no idea why it took me so long to remember the word and not remember the spelling)

i'm usually pretty good at spelling

[crimson skiff]

what the

[pure cairn]

you have my congrats, you made something so obnoxious my discord crashed while loading a thread

[crimson skiff]

though there is an issue that if you send a message, the animation happens twice

because the message is still in the sending state

ok i like this animation for some reason

but it might be better if it floats from the bottom to be less obnoxious imo, may tweak it further

.scrollerInner__36d07 > * {
  animation: slideright 0.5s cubic-bezier(0,1,1,1) forwards;
}

@keyframes slideright {
  from { transform: translateX(-50vh); opacity: 0; }
  to { transform: translateX(0); opacity: 1 }
}
```not that bad imo

[crimson skiff]

crazy

[valid rover]

/* Fix Inbox overlapping with search */

}
[aria-label="DevTools"]{
  display: none;
}

[class^="searchBar_"]{
    max-width: 220px;
    margin-right: 85px;
}
[aria-label="Inbox"]{
  right: -7px;
}

im using the above snippet to made the search bar not overlap with inbox and stuff, but it makes this issue in the dm lists "find or start a conversation" button, how do fix this?

[echo frost]

thanks

[echo frost]

nah that's too reasonable

[half crystal]

this is going to simultaneously be my smartest and dumbest idea yet

[echo frost]

wtf why is there a hole emoji and backslashes

[half crystal]

because that's valid css syntax

[echo frost]

what makes it smart

[half crystal]

this can baby-type easily remove any nonessential element in the app without having to
a) dig for classes
b) break on reroll

[pure cairn]

Whar

[echo frost]

why does it need hole and backslashes to do that

[half crystal]

easier organization

[clear siren]

I've never thought of using emoji in vars

[stark oracle]

https://github.com/Nyloseth/RobCo-Pip-Boy-Terminal-Theme-Vencord

https://i.ibb.co/FkscF5hH/Fallout-Pip-Discord.png

[broken tendon]

truly incredible

[stark oracle]

lol XD

[crimson skiff]

how is that genuinely useable, but to each their own

[plain kelp]

/r/atbge

[pallid terrace]

hii is there anything like this for own pov only? like i dont wanna see my own icon and text status

[errant zenith]

how do i apply blur to a background image?

[half crystal]

on the image - filter: blur(10px);
on layers above the image - backdrop-filter: blur(10px);

[errant zenith]

thanks

[echo frost]

wow 1.5 years ago
maybe I'll look at it tomorrow
I'm going to bed rn

[pure cairn]

.panels__5e434>.container__37e49>.accountPopoutButtonWrapper__37e49 {
    &>.wrapper__44b0c>.mask__44b0c {
        &>foreignObject {
            mask: none;
        }
        &>g {
            display: none;
        }
    }
    &>.nameTag__37e49 {
        &>.panelTitleContainer__37e49 {
            margin: unset;
        }
        
        &>.panelSubtextContainer__37e49 {
            display: none;
        }
    }
}```

[pallid terrace]

hahaha yeaa i also didn't notice the date

[pallid terrace]

I'll try it later

[echo frost]

use this if you want it to show your username
use krammeth's if you want it to hide your username (the obsidianninja11 in my case, everbilena for you)

.panels__5e434>.container__37e49>.accountPopoutButtonWrapper__37e49 {
  &>.wrapper__44b0c>.mask__44b0c {
    &>foreignObject {
      mask: none;
    }
    &>g {
      display: none;
    }
  }
  &>.nameTag__37e49 {
    &>.panelTitleContainer__37e49 {
      margin: unset;
    }

    .hoverRoll__0263c {
      >.hovered__0263c {
        opacity: 1 !important;
        transform: translateZ(0) !important;
      }
      >.default__0263c {
        opacity: 0 !important;
      }
    }
  }
}

[errant zenith]

what was that one snippet for image background?

[echo frost]

you'll probably have to be more specific

[chilly knoll]

@errant zenith be more specific when

[errant zenith]

i dont know what else to say lol it just made ui elements transparent and put an image as the background

[errant zenith]

for that id need to be sober first

[echo frost]

oh ok

[errant zenith]

i think it was like basicbackgroundfix or something i might be wrong

[echo frost]

purpleprune has it #🎨-css-snippets message

[errant zenith]

yeah ik im using it rn but its giving me funky visual errors

thats why i asked for the other one

like this

its when hovering over servers

[echo frost]

if you're thinking of a specific one, you might be thinking of this, but it's archived https://github.com/fowlis/SimpleBackground

[errant zenith]

the actual server name is a bit higher, and the blur appears under it

[errant zenith]

yeah wasnt there a new one though?

i swear ive seen it here

[echo frost]

like posted within the past couple months?
what exactly do you mean by new

[errant zenith]

yeah

like withing the past few months

[echo frost]

not that i remember besides purpleprune, but not sure

[errant zenith]

i used to still use it like a month ago but i formatted my disk and lost it lol

i think i found it

https://github.com/nvhhr/discordcss/blob/main/snippets/actuallybasicbackground.theme.css

yeah its this

[quasi mountain]

hey so I am trying to work on themes for the betterdiscord plugin but however there is an issue. I have NO clue on how to customize a theme nor do I know how to edit a theme. I found vencord and betterdiscord on a reddit post but they did not provide any proper information on HOW they edit it. As you can see in the last image... there's nothing there. did I maybe install vencord wrong? or am I dumb? very new to vencord and kinda got hooked on the wole frutiger thing. any ways I could edit or custimze it? I even searched on betterdiscord themes and only found the ocean theme but not the the one he "probebly" made.

[clear siren]

wow it still works?

lol I thought it was broken

9 months since last update

[errant zenith]

well it works for me

[clear siren]

yeah I just applied it too

I've had basically no css for a while

[echo frost]

Do you have that theme working with its current background image?
In settings under vencord, go to themes, and press open themes file
the file will be there

[clear siren]

been meaning to rewrite that and once made some progress on it but then got disctracted

[quasi mountain]

I have had the ocean theme but currently using Skeosstheme. and I have it enabled but I have no clue how to change the background image.

did all the things by selecting the theme file. but no idea how to change the image

[echo frost]

do you see the theme in Themes?

if so, press Open themes folder

[quasi mountain]

no unfortunely I couldn't find any.

[quasi mountain]

already done that too. still none of them I can edit

[echo frost]

press Open Themes Folder

[echo frost]

so you do see the themes

press open themes folder, then open and edit the file

[quasi mountain]

ok so clicked on themes, open the themes file, then clicked on the file and notepad came up.

[echo frost]

yes

[quasi mountain]

k so I copied the url and paste it. so it should change

[echo frost]

make sure to save it

if it's still not working, check in themes again
You may have to allow it access to the url

[pure cairn]

I can PR you a version with the class names if you need

[clear siren]

still haven't decided if I want to go with classes or keep doing attributes

attribute selectors proved their resilience again with 9 months old css still working lol

[quasi mountain]

ok so I did that but nothing has changed. it still looks the same

[echo frost]

send a screenshot of this again (without hovering over edit so I can see what's there)

[quasi mountain]

there

here's the full

[echo frost]

oh do this

[quasi mountain]

it still didn't work. am I missing something?

[pure cairn]

Yeah they're resilient but I noticed quite the difference in performance between them sadly

[echo frost]

you did not do what it says

replace SkeuoCordBase with SkeuoCord_BGImport

so put "https://marda33.github.io/SkeuoCord/updates/SkeuoCord_BGImport.css" inside the import

[quasi mountain]

I have been staring at the thing for an hour. how d I exactly do that? I'm a visual learner.

[echo frost]

copy and paste that into the @import

[echo frost]

this is how you're supposed to do it

it's very simple

[quasi mountain]

there. done. so now will it work?

[echo frost]

it should

[quasi mountain]

so I just put in the other image address with this. and it should change?

wait before or after the .bbs")?

[echo frost]

what .bbs

.css?

[quasi mountain]

sorry typo

yes .css

[echo frost]

it will look like this

[quasi mountain]

with a custom link?

[echo frost]

just replace that with this

i'm tired of explaining extremely basic things 10 times

[echo frost]

the imgur link should not be in the import

[quasi mountain]

huh??? but that's the whole reason why I am asking. to change the background image of the theme.

I am just following your steps because this guy in the reddit post did it in a whim

and I am just confused why it's not like- changing the image. because rn it looks like this instead of a diffrent image.

[quasi mountain]

AH I got it!

thanks!

[rotund kelp]

Does anyone have/know how to have a custom server folder icon? I know that there is a snippet somewhere that changes the svg and i can fs settle for that but i don't know how to add my own svg to it (css noob)

[wintry cape]

You can't add your own svg, but you can either add a background to the svg or change the path so it becomes a different icon.

/* Settings icon (Ignore the color in image) */
.folderIcon__48112 path {
    d: path("M10.56 1.1c-.46.05-.7.53-.64.98.18 1.16-.19 2.2-.98 2.53-.8.33-1.79-.15-2.49-1.1-.27-.36-.78-.52-1.14-.24-.77.59-1.45 1.27-2.04 2.04-.28.36-.12.87.24 1.14.96.7 1.43 1.7 1.1 2.49-.33.8-1.37 1.16-2.53.98-.45-.07-.93.18-.99.64a11.1 11.1 0 0 0 0 2.88c.06.46.54.7.99.64 1.16-.18 2.2.19 2.53.98.33.8-.14 1.79-1.1 2.49-.36.27-.52.78-.24 1.14.59.77 1.27 1.45 2.04 2.04.36.28.87.12 1.14-.24.7-.95 1.7-1.43 2.49-1.1.8.33 1.16 1.37.98 2.53-.07.45.18.93.64.99a11.1 11.1 0 0 0 2.88 0c.46-.06.7-.54.64-.99-.18-1.16.19-2.2.98-2.53.8-.33 1.79.14 2.49 1.1.27.36.78.52 1.14.24.77-.59 1.45-1.27 2.04-2.04.28-.36.12-.87-.24-1.14-.96-.7-1.43-1.7-1.1-2.49.33-.8 1.37-1.16 2.53-.98.45.07.93-.18.99-.64a11.1 11.1 0 0 0 0-2.88c-.06-.46-.54-.7-.99-.64-1.16.18-2.2-.19-2.53-.98-.33-.8.14-1.79 1.1-2.49.36-.27.52-.78.24-1.14a11.07 11.07 0 0 0-2.04-2.04c-.36-.28-.87-.12-1.14.24-.7.96-1.7 1.43-2.49 1.1-.8-.33-1.16-1.37-.98-2.53.07-.45-.18-.93-.64-.99a11.1 11.1 0 0 0-2.88 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z")
}

Or with svg:

/* Replace the url('') with your own image url */
.folderIcon__48112 > svg {
    /* Checkmark icon */
    background: url('https://i.imgur.com/cxM7FGz.png') center/cover no-repeat;
    > path { display: none; }
}

[rotund kelp]

Tysm!! the bg one was exactly what i was looking for :)

[echo frost]

well you can add a pseudoelement with an svg content
which is useful in some cases, but i don't think it is in this one

[full rover]

I remember this theme except it was on Stoat (formerly known as Revolt)

[grand surge]

sorry to disturb y'all but is there any custom css to remove all profile decorations?

[steep drum]

the one i sent still works for me

.avatarDecorationContainer__44b0c {
  display: none;
}

.avatarDecoration_c19a55 {
  display: none;
}```

[grand surge]

for only 2 decorations

doesn't work for all

[steep drum]

with & without

[grand surge]

oh ya now works

i forgot to restart

[steep drum]

it shouldnt need to restart

weird

[grand surge]

is there nay css to remove the green thingy too?

like for example nin0 has it

[steep drum]

what green thing

status indicators?

[grand surge]

no

banner type

idk how to describe it better

[pure cairn]

Oh I had a css around for that

The nameplates

[grand surge]

yess

nameplates

[pure cairn]

No nvm, I can't get a clean version without being on pc

I'll send you a snippet later when I get back home

[steep drum]

.videoContainer__4bbc6 {
  display: none;
}

.container__4bbc6 {
  display: none;
}```

works for me

if want to keep color, remove second part

[grand surge]

i don't want anything lmao

Yes worked

now everyone is equal

thx

[steep drum]

i should proabably start using messagetags and stuff the Very Popular "snippet to remove x pls" snippets in there

[pure cairn]

We should honestly have a forum-styled channel like the one for 3rd party plugins

It's easier to find stuff compared to the regular format

[steep drum]

basically #🎨-css-snippets (display: none; edition?)

or wym

[grand surge]

yes

[half crystal]

we used to i believe but it was scrapped for some reason, its been in archive as a hidden channel forever

[grand surge]

why do I still have this

[half crystal]

why do you think im making a monosnippet to do removal of any element lmao

[pure cairn]

I mean #1256395889354997771 but with css snippets instead of plugins to have an easier user experience to find things

Because rn people have to scroll up to find stuff unless they know which keyword to look for

[steep drum]

hearing this for the very first time

[grand surge]

the things which I am looking for are 1-3 years old

[steep drum]

all of these were forums

[grand surge]

how do I remove this thingy now

[pure cairn]

I didn't even know of their existence

[steep drum]

fake vencordian

[pure cairn]

I don't use the hiddenchannels plugin

Or showhiddenthings

Whachamacallit

[pure cairn]

You can clearly see when I joined on my profile

¯_(ツ)_/¯

[pure cairn]

If you mean the profile decorations, it's yet another thing

[pure cairn]

And why were they archived?

[half crystal]

ask vee ig

[grand surge]

any snippet for removing profile effects?

for example this

[pure cairn]

^

[late lichen]

theres

.profileEffects__01370 {
    display: none;
}```

[late lichen]

css test

list item
bold
inline code
italic
italic bold

[tiny wing]

Can anyone help me find this code for the lock sign I would like to change the colour of it and I can't seem to find the code tia

[grand surge]

  background-image: none !important;
  background-color: #000000 !important;
}
.animatedContainer_f37cb1,
.headerEllipseBackdrop_f37cb1,
.headerEllipseForeground_f37cb1,
.headerGlass_f37cb1,
.animatedBannerHoverLayer_f37cb1,
div[style="height: 84px;"][aria-hidden="true"] {
    display: none;
}

.headerContent_f37cb1,
.name_f37cb1 {
    color: var(--text-strong) !important;
    filter: none !important;
}

.header_f37cb1 {
    border-bottom: 1px solid var(--border-subtle)!important;
}
.bannerVisible_f37cb1 > .header_f37cb1 {
    padding-top: calc(var(--space-xs) + 1px);
}
.avatarDecorationContainer__44b0c {
  display: none;
}

.avatarDecoration_c19a55 {
  display: none;
}
.videoContainer__4bbc6 {
  display: none;
}

.container__4bbc6 {
  display: none;
}
.mask__68edb {
    display: none;
}

.container_ab8609 {
    top: unset !important;
    bottom: -15px !important;
}
.profileEffects__01370 {
  display: none;
}```

this is the css I am using

[echo frost]

.banner__68edb {
  background-image: none !important;
  background-color: #000000 !important;
}
.animatedContainer_f37cb1,
.headerEllipseBackdrop_f37cb1,
.headerEllipseForeground_f37cb1,
.headerGlass_f37cb1,
.animatedBannerHoverLayer_f37cb1,
div[style="height: 84px;"][aria-hidden="true"] {
    display: none;
}

.headerContent_f37cb1,
.name_f37cb1 {
    color: var(--text-strong) !important;
    filter: none !important;
}

.header_f37cb1 {
    border-bottom: 1px solid var(--border-subtle)!important;
}
.bannerVisible_f37cb1 > .header_f37cb1 {
    padding-top: calc(var(--space-xs) + 1px);
}
.avatarDecorationContainer__44b0c,
.avatarDecoration_c19a55,
.videoContainer__4bbc6,
.container__4bbc6,
.mask__68edb,
.profileEffects__01370 {
  display: none;
}
.container_ab8609 {
    top: unset !important;
    bottom: -15px !important;
}
.avatar__1fed1 {
  top: 2px !important;
}

[grand surge]

lemme test

[grand surge]

fixed thx

[echo frost]

oh is this from her presentation? https://lyra.horse/slides/2025/2025-09-committing-css-crimes-for-fun-and-profit.html

[half crystal]

yes

[echo frost]

saw this and then went and saw some more of her stuff that i hadn't seen
https://lyra.horse/x86css/

[muted rivet]

please ping me if you respond

[echo frost]

There's a snippet that makes them bigger, but it broke, and i'm not sure what the progress is on fixing it https://discord.com/channels/1015060230222131221/1354502862390038528

[echo frost]

.

[smoky belfry]

bruh discord WTF why didn't you just add those into the dropdown...

[echo frost]

how do you have that without nitro?

[echo frost]

what are people's thoughts on @function and if() ?

@function --transparent(--color <color>, --alpha <number>) returns <color> {
  result: oklch(from var(--color) l c h / var(--alpha));
}

#message {
  background: --transparent(red, 0.1);
}

I don't really see how if() is much different than @container queries

like obviously it's inline, but otherwise, it seems pretty much the same?

[brazen quartz]

if() is useless much like :heading and light-dark()

Mixins or extends would be much more useful

[echo frost]

light-dark() is kind of cool

and if definitely isn't useless

[echo frost]

but i don't see any use cases that can't be done with @container/@media/@supports
if is just a bit more compact ig

[echo frost]

how is :heading useless?
also it's not in any browser

it's a quicker way of doing :is(h1,h2,h3,h4,h5,h6) which seems fairly useful

[pure cairn]

The first one looks fun

[pine needle]

is the css suppose to work like that or any better?
-# css not mine i tweak it from rainbow thread by catppucin

[steep otter]

ig you're good

[smoky belfry]

I have nitro thanks to orbs

[echo frost]

ah

hopefully fakenitro wil be able to enable favorites

[half crystal]

The block is client-side rn (mobile can still access favs just fine)

[echo frost]

yeah I kinda thought so
I hope it stays that way

[echo frost]

it's not showing on mobile for me anymore

[frigid compass]

in a theme can i detect if the discord window loses focus?

oh yeah there's a class called "app-focused" on root

[crimson skiff]

genuinely pmo

[crimson skiff]

uhh, why did you update discord client

i still see it fine on revenge, though it is probably quite old as a build

yeah im on 317.15 though the current stable is 319.14

i still miss tabs v2...

[echo frost]

uh I think it updates automatically on mobile

[crimson skiff]

no it doesnt

just turn it off

[echo frost]

it does right now

ok turned it off in play store

[crimson skiff]

use something like aurora store and roll back the updates

obviously you need to uninstall though

[echo frost]

I don't care enough to do that

[sand lava]

I'm looking for 2 CSS snippets which can do the following:

1. Remove the Gift, Sticker and the Apps thingy from the chatbar
2. Making the replies/pings look way more visible. I had CSS for it but I cannot find it anywhere.

[wintry cape]

/* Hide all buttons except: "Open GIF picker", "Add Emoji" & "Send Message" if you use that button */
.buttons__74017 > div:not(
    .buttonContainer__74017:nth-of-type(2),
    .buttonContainer__74017:nth-of-type(4),
    .container_aa63ab) {
        display: none
}

Add .vc-chatbar-button in the :not() if you use translate and/or preview message do +1/+2 in the :nth-of-type()'s

[sand lava]

Thank you https://cdn.discordapp.com/emojis/910317626713051156.webp?size=48&name=Love&lossless=true

Got any CSS for the reply/ping color as well per chance?

[wintry cape]

I don't use css for that sorry

[echo frost]

that's a pretty bad way of doing it imo

[wintry cape]

You want to use :has()?

[echo frost]

well even not using :not would be better

but you can do some stuff to hide it without nth-type or has

[wintry cape]

True, but typing .buttons > buttoncontainer everytime is also a thing

[echo frost]

?

[sand lava]

hey, it works that's all that matters xD

[wintry cape]

Wait

[echo frost]

@echo frost

[sand lava]

its just a bit too dark for my taste

it was way more brigther before

which i miss

[echo frost]

wtf

it's not supposed to look like that what

[sand lava]

🤷‍♂️

[echo frost]

try disabling your css and see if it's still like that

[sand lava]

well it's prob the theme i use for it lol

thats making it darker

[wintry cape]

.buttons__74017 > .app-launcher-entrypoint,
.buttons__74017 > [aria-label="Send a gift"],
.buttons__74017 [aria-label="Open sticker picker"] {
    display: none
}

This does the same thing, but the sticker picker leaves a weird spacing

[echo frost]

edit these variables to change it. but if it's caused by your existing css, you should removec the part of your css that's causing it

:root {
  --message-mentioned-background-default: color-mix(in oklab,hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount,0%));
  --message-mentioned-background-hover: color-mix(in oklab,hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount,0%));
}

these are the default values

[wintry cape]

How would you hide the sticker picker obsidian

[echo frost]

i'm looking

[sand lava]

It's the theme I'm using. I just import that whole thing through the CSS there

[echo frost]

what theme are you using?

[sand lava]

NewerOldCord

[echo frost]

can you send it?

[sand lava]

Want the github page for it?

https://bron99.github.io/Discord_2024/

[echo frost]

.buttons__74017>:is([aria-label="Send a gift"], .app-launcher-entrypoint) {
  display: none;
}
.expression-picker-chat-input-button {
  display: contents;
  >[aria-label="Open sticker picker"] {
    display: none;
  }
}

this should hide the buttons

if your language isn't english, you'll need to modify the aria labels

[sand lava]

yeah i have Discord in English luckily haha

[echo frost]

oh ok so this changes the yellow variables, which is why the mention is different

[sand lava]

yeah the hightlight color when you hover over messages is a bit on the bright side as well, someone made some custom CSS in that server but I cannot find it anymore unfortunately

[echo frost]

this one?

what color are you wanting mention messages?

[sand lava]

yeh

As long as it's brigther than now it should be fine

it was more euhm

orange

[wintry cape]

Why it hides gif picker

[sand lava]

like the old pings before Discord fucked up everything haha

[echo frost]

:root {
  --message-mentioned-background-default: color-mix(in oklab,hsl(var(--opacity-yellow-8-hsl)/0.15) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.15) var(--custom-theme-base-color-amount,0%));
  --message-mentioned-background-hover: color-mix(in oklab,hsl(var(--opacity-yellow-4-hsl)/0.07) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.07) var(--custom-theme-base-color-amount,0%));
  --message-background-hover: color-mix(in oklab,hsl(var(--opacity-8-hsl)/0.06) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.06) var(--custom-theme-base-color-amount,0%));
}

ok i made the mentions brighter and normal bg less bright

mess with the opacities as much as you want, or completely replace it if you want

this is the default for reference

:root {
  --message-mentioned-background-default: color-mix(in oklab,hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount,0%));
  --message-mentioned-background-hover: color-mix(in oklab,hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount,0%));
  --message-background-hover: color-mix(in oklab,hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%,hsl(var(--custom-theme-base-color-hsl,0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount,0%))
}```

[sand lava]

Oh that looks way better

[echo frost]

oh i saw gift and misread it as gif probably

[sand lava]

only thing I wish to change is if I hover over the pinged message that it doesn't go transparant

[echo frost]

remove this to show gif picker

[echo frost]

?

[sand lava]

when I hover over it it becomes a bit transparent again, if it's possible I would like to disable that specific thing so it keeps as it was before

as like the 2nd image

[echo frost]

you want hover to not change?

change the --message-mentioned-background-hover variable

and if you want it the exact same as normal mentioned, you can use var(----message-mentioned-background-hover-default)

[sand lava]

I'm way too noobish to do this which part do I exactly change?

[echo frost]

replace this with the var thing i sent

[sand lava]

that broke it more lol

that makes it so it uses the background I use

[sour glacier]

is there a way to only select yourself in the members list?

[wintry cape]

You can select aria-label with your name in the avatar [aria-label="name, status"], but depends what you want to do with it
Or the userid in the avatar src [src*="userid"]

[sour glacier]

i wanted to select my own server name to change the font and stuff but was struggling on a specific way to do it

[echo frost]

?

you did it wrong
if you do it wrong, it'll be invalid and be transparent

[hazy tinsel]

server profiles ?

unless ur doing a font outside of display namestyles

it's actually clear as day here

if u know what ur doing

[sour glacier]

oh theres data text for your name i might be blind

i stare at discord with inspect element a little too much and go insane

oh wait i realise you mean messsages i mean like. selecting myself on the member list

[hazy tinsel]

there's probably a better identifier but from ur unique display there i doubt anyone will have a similar server name

span[data-text="🐇 * june"] {
    font-family: "Trebuchet MS", sans-serif;
}```

they only provide message-id pretty sure in that class which is not accessible anywhere near that css obj

[hazy tinsel]

ah

[sour glacier]

its ok i can cope with just having messages highlighted its mainly the inconsistency was bothering me

selecting people with emojis in the name is less people i guess so im just. doing that 😔

[hazy tinsel]

.content__91a9d:has(img[src*="1067801074586632202"]) span[class^="name_"] {
    font-family: "Trebuchet MS", sans-serif;
}
``` this wont work long term but it works i know has, is improper usage but it works ![shrug](https://cdn.discordapp.com/emojis/1410773326036733992.webp?size=128 "shrug")

content class identifier feel free to adjust it

[sour glacier]

📝 unfortunately selects everyone but close enough

[hazy tinsel]

huh what

it dindt do it for me let me double check

[sour glacier]

it is for me 🤔

dream plugin is adding data attributes of username to memberlist so its less of a pain in the ass to customise

[hexed imp]

What the actual F, Discord?

[hazy tinsel]

yeha works fine for me

the src itself is an identifier which contains ur userid

maybe because of the content class? maybe its not static

[sour glacier]

oh it works here but not cross server because ofthe content class i think

grah

[hazy tinsel]

most likely and then the structure will always contain ur id

if you cut it down to ^=

content__

it'll identify everyone's display

[sour glacier]

oh it doesnt even mark it on here

yeah ill just select like the emoji or something so at least it identifies me if i have an emoji in my name but also not like. everyone

tysm for your help though, discords css hurts my head after a while

[echo frost]

keep in mind that :has() can cause a lot of lag

[echo frost]

what
it should be .avatar:has(...)+.content span...?

[hazy tinsel]

yes

i don't have enough prior experience to know proper usage lol

[echo frost]

that's working for you?

[hazy tinsel]

uh yeah it did in my server i was testing

supposedly it doesn't work for other servers though according to that guy

[hazy tinsel]

what if ur targeting a specific element with that like not the entirety of div but rather a specific class does it have the same effect

[echo frost]

how tf
are you sure?
you have a completely different dom if so

[echo frost]

more efficient selectors will make it more efficient yes

[echo frost]

does this work for you in this server?
it changes fffffff's font

.avatar__91a9d:has(img[src^="https://cdn.discordapp.com/avatars/942009296630214686/"])+.content__91a9d span.name__5d473 {
  font-family: var(--font-code);
}

[hazy tinsel]

doesnt work

probably my fault partially

[echo frost]

?

do you know why your dom is different?

[hazy tinsel]

probably my chrome devtools lol

its different

which is affecting the dom i think

[echo frost]

?

[hazy tinsel]

dont want to mention it by name but i think it's because of this

[echo frost]

can you send the html of this or the whole member list?
i'm curious what your html is like

[hazy tinsel]

sure

[echo frost]

i'm on equibop. and it seems the same as discord web

[hazy tinsel]

here

[echo frost]

your css won't work on this, but mine will
i'm not sure what's happening

[hazy tinsel]

me neither lol

[echo frost]

you're sure this css isn't working on ffffff?

.avatar__91a9d:has(img[src^="https://cdn.discordapp.com/avatars/942009296630214686/"])+.content__91a9d span.name__5d473 {
  font-family: "Trebuchet MS", sans-serif;
  background: lime !important;
}

[hazy tinsel]

that works

[echo frost]

oh
the font was being overridden

[echo frost]

this should work

[src^="https://cdn.discordapp.com/avatars/1067801074586632202/"]+.username_c19a55,
[src^="https://cdn.discordapp.com/avatars/1067801074586632202/"]+.header_c19a55 .username_c19a55,
.avatar__91a9d:has(img[src^="https://cdn.discordapp.com/avatars/1067801074586632202/"])+.content__91a9d span.name__5d473 {
  font-family: "Trebuchet MS", sans-serif;
}

it might not if you have a server pfp, but otherwise it should

the :has() is necessary for the member list, and will probably cause lag

[late lichen]

why not theme attributes? oh, it doesnt work on member list

[sour glacier]

TYSM!!

[half crystal]

https://fixvx.com/i/status/2032159957680894199
Time to wait 7 billion years for discord to use 147

Una 🇺🇦 (@Una)

contrast-color() is landing in Chrome 147, making it Baseline Newly Available in all modern browsers.

This feature takes any color value and returns either black or white—whichever provides the highest contrast against the input color.

i.e. color: contrast-color(purple) returns white ⬇️

▶ Play video

vxTwitter / fixvx · Mar 12, 2026, 6:21 PM

[echo frost]

that's huge

if it's pure white and pure black, you can probably choose whichever colors you want with some calc stuff?

wait actually you should be able to just use if

but might also be possible with calc stuffc

whoa wtf it's in firefox and safari before chromium???

[subtle sedge]

yeah

so weird

[subtle sedge]

so good

[brazen quartz]

Happens sometimes, nesting was in Firefox before chrome, iirc

[pure cairn]

[agile ice]

anyone know why this css to hide the gift icon in the text bar stopped working in DMs recently?

[aria-label="Send a gift"], 
[aria-label="Apps"] { display: none !important; }```

[wintry cape]

Try this from obsidian

The first part

@agile ice

[onyx mesa]

the label for the gift button in DMs is "Give a gift"

so you need to add [aria-label="Give a gift"]

[half crystal]

good job class updater, go get a gold star

[pure cairn]

it stuttered

[smoky belfry]

just use this it always work no matter the language and how they name it

[class^=channelTextArea] > [class^=scrollableContainer] > [class^=inner] > [class^=buttons] > [class^=button__] { display: none; }

[late lichen]

has it already happened that someone i18n'd the arial label to their language and the thing wasnt working so someone instantly blamed it on the label, even tho the label was fine?

[hazy tinsel]

div[aria-label="Give a Gift"] { display: none }```
![sunglas](https://cdn.discordapp.com/emojis/1091008077173641286.webp?size=128 "sunglas")

[late lichen]

unreliable, aria-labels are language based

[hazy tinsel]

too bad

[echo frost]

they're pretty reliable

despite being language based

[echo frost]

why not just do this

.buttons__74017>.button__74017 {
  display: none;
}

[smoky belfry]

Too much risk of matching something wrong

[echo frost]

yeah yours does
this one doesn't

[smoky belfry]

Well i'm using fr*nch as my language so all your english stuff do not work

[smoky belfry]

CSS specificity

[echo frost]

??

[smoky belfry]

There's a reason why i'm being overly specific

[echo frost]

??

high specificity is worse

[smoky belfry]

It's not

[echo frost]

the great thing about using actual class names is it will only match buttons for this feature

[smoky belfry]

Highest specificity prevail

[echo frost]

then why don't you repeat the selectorsw multiople times

[smoky belfry]

And it's worse for speed but when using > always not really by much

[echo frost]

This has higher specificity

[class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea][class^=channelTextArea] > [class^=scrollableContainer] > [class^=inner] > [class^=buttons] > [class^=button__] { display: none; }

[smoky belfry]

Thing is what if discord happen to have generic class

[echo frost]

then both of ours could potentially break

[smoky belfry]

Because this is ugly as fuck and so stupid

[echo frost]

i agree

but specificity has nothing to do with overmatching

[smoky belfry]

Also by having something that match the dom you can easily compare dom and CSS

[echo frost]

(idk if overmatching is the correct term. i made it up)

having textArea would be a good idea i guess

[smoky belfry]

It has to do overmatching is a way to make specificity higher to have less risk of not matching the right thing and to also go over discord without using !important which is so risky of inducing hard to debug issues
And because discord has ugly ass overspecific CSS because they don't use CSS properly and they have rules with high specificity that fucking set display and they have ton of rules cascading CSS and it's so bad i'd have nightmares

[echo frost]

specificity in css means this

[smoky belfry]

Yes

[echo frost]

what i mean by overmatching is matching things you don't mean for it to match

[smoky belfry]

Do you know how specificity works ?

Each class add points

[echo frost]

yes

[smoky belfry]

I need more points to go over discord

[echo frost]

you don't in this case though

sometimes, yes

[smoky belfry]

If a discord rule has 030, i need 040

[echo frost]

no you need 030

because your rules are added after

[smoky belfry]

Also this is bad, because no parenting operator makes it costly

You'd rather have >

[echo frost]

it doesn't

[smoky belfry]

It does

[echo frost]

not with classnames

and not in this case

[smoky belfry]

Sure but classnames are bad

[echo frost]

they're the easiest method of updating selectors

[smoky belfry]

Nope

[echo frost]

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

[smoky belfry]

I nearly never have to update my shit while i see you guys using class updater so often

[echo frost]

and much more efficient and easier to debug

[echo frost]

so often is like a couple times a year

[smoky belfry]

Using a minimal DOM match is way better than asking users to debug and updates classes

Anyway

I find my way to be simpler and better

[echo frost]

this only has a 0,1,0 so you only need a 0,1,0 to override it

[echo frost]

it might be fine on a powerful computer, but for me on a laptop, attribute selectors make discord unusable

[smoky belfry]

Pretty sure it used to have some other bullshit rules, good that they cleaned

[smoky belfry]

I can ensure you it's fine

[echo frost]

not on my laptop especially while running other things

maybe on your computer

[smoky belfry]

I do use multiple computers including bad laptops

[echo frost]

but i prefer working with full class namdes

[smoky belfry]

And it can handle it

[echo frost]

much easier to debug

i guess the attribute selectors with ^= aren't a huge problem
but when you need to use *= they're much worse
and if you use them with :has() they're so much worse

but also this is what happens if i change all my .class_123 to [class^=class]
obviously i didn't design them to be for attribute selectors, but it overselects so much because it doesn't have the hash to limit it to a certain part of discord

-# (it didn't hide my servers, that was me with sharex)

[echo frost]

ok apparently the correct term is over-selecting
-# which is what i usually say. idk why i said overmatching here. i think this is the first time i've ever said overmatch lol

[smoky belfry]

that's why i don't use *=
also that's what you always use :has(> if you ever have to and never :has(

[echo frost]

yeah that is most of the problem, but using class names will also help a little

[smoky belfry]

indeed, you can't select middle classes, only starter ones
and you tend to need to match a little more of the structure to be more specific

[echo frost]

1. i know. that isn't relevant to my message. that will just cause some of my selectors to not select anything if the class isn't at the start. and that's another reason i don't like attribute selectors
2. yes that was my point. needing to match more of the structure can lead to over-selection and/or lag because complex selectors are more laggy

[smoky belfry]

also actually since discord never use [class^=] it's way easier to spot custom CSS over normal one

[smoky belfry]

is it tho, try and compare classes vs my method and see the perf diff

Nicer Quest Display

Remove bullshit which take too long to load and make it just nicer to use
-# at some point i wanted to do smth like color based on status with CSS but forgor

[class^=page] > [class^=container] > [class^=scroller] {
    > [class^=wrapper], > [class^=container] { display: none; }
    > [class^=contentSection] > [class^=content] {
        max-width: unset;
        > [class^=content] > [class^=container] {
            max-width: unset;
            > [class^=container] > [class^=container]:has(> [class^=heroAssetWrapper]) { display: none; }
        }
    }
}

[echo frost]

?

[echo frost]

your rules will be <style>
discord's will be a css file

[smoky belfry]

meh

[smoky belfry]

way more noticeable

also yes i heavily use nesting during CSS development

[echo frost]

well that's because you use a loty of nesting

[smoky belfry]

and i compact it once it's good

[echo frost]

not really related to the attribute selectors

[smoky belfry]

the whole style of massively nested and [class^=] makes it very clear

and both the nesting and the attribute selection contribute

[onyx mesa]

[smoky belfry]

Yes i do my CSS DOM style and then i have scripts to process it

Don't judge without trying

[pure cairn]

Heh

I did that, but with classnames

[carmine mauve]

Can someone help me with the user rounded look? i want to get rid of the empty space around the edges and make it like the 2nd pic, i sadly dont have the code anymore for the 2nd pic that's why im asking for help 🙏

[echo frost]

#1354331484831354952 message

[hexed imp]

Does anyone have a snippet to hide the channel list/show on hover? I think I'm just having trouble with the search cos I know I've seen one. I have the hide-server-list snippet. It works beautifully. #1461385316886777978 message

I got a second monitor and it's portrait mode for work, and I'd like to move Discord over to it but the channel list takes up SO MUCH space and I don't need it unless I'm actively looking. Thankfully Discord allows us to close the user list natively, cos that made it so my chat window was like 100px wide lmao.

[echo frost]

probably this https://discord.com/channels/1015060230222131221/1354606015819022416

There's also this, which you could get working with some modification https://discord.com/channels/1015060230222131221/1331160458974990337

[hexed imp]

This actually works right out the gate, And it works with the server hide snippet without interfering with either one.

It isn't perfect (for some reason despite being listed as 0px collapsed, it's still showing some width), but it's just a matter of tweaking or figuring out what other snippet I have that's interfering. Thank you!!

[hexed imp]

Aaaah, found a bug with forum display cos Discord kinda considers the forum post list another kind of channel list, so the channel collapse is affecting it.

[carmine mauve]

https://tenor.com/view/kevin-hart-crying-sad-devastated-gif-13568507018359825966

goated

[agile ice]

anyone know how to hide the Game Servers button?

[echo frost]

#channels [id^=game-server-]+.basicChannelRowLink__2ea32 {
  display: none;
}

[agile ice]

works great ty!

[echo frost]

it will leave like 2px of padding, but it's barely noticeable

and i'm not sure if it's doable to fix

[leaden hinge]

Could rewrite it to use clip-path instead of width, is less taxing on the render performance and would let you set 0px width as well. There's other options too, I had written my own implementation at one point, too.

[leaden hinge]

Width causes layout reflow calcs even if neighboring elements don't have any layout shift. Clip-path trims the interactive and visual regions of rendered elements. Meaning that the element still takes "the same space" as it did before and causes no reflow. Inline elements will leave an empty box but with floating sidebars, they just vanish like they would with opacity only smoothly animated with a slide on/out animation.

Adjusting width with an animation is slideshow material. Especially if you have like a drop-shadow or a large element next to a vertical container that has lots of children.

[echo frost]

and how is that relevant to display: none; ing something in the vertical channels list?

there's no mention of width

or are you not talking to me

[leaden hinge]

Sorry was referencing this

[brazen narwhal]

does anyone know if theres a secontion in the quickcss code that can change the transparency of the list of users on the right of the screen so that it doesnt stick out so much

[onyx mesa]

it looks like you have a background color set for the user sections, probably can just add opacity to that background

[wintry cape]

/* Changes member background-color */
.member_c8ffbb {
    background-color: #1111113f;
}

[brazen narwhal]

thank you

[echo frost]

wow this works surpisingly well

main.chatContent_f75fb0 {
  resize: horizontal;
  overflow: hidden;

  &[style^=width] {
    max-width: 100%;
    flex-shrink: 0;
  }
}

apart from it getting reset when switching channels

[crimson skiff]

do you even plan on using it? i personally just have my members list just show the icons, and that is more than enough space, and im not at all interested in knowing their names

[echo frost]

probably

i don't have my memberlist like that

the resize icon is maybe a bit annoying

i could use @container to only show it when using devtools or something though

[echo frost]

oh ::-webkit-resizer exists

[crimson skiff]

cap.so is so slow

[echo frost]

yeah i don't really like that

[crimson skiff]

sure, your choice

is it the animation, the radial status, or ...?

[echo frost]

all of it ig?

I like my discord to look mostly normal

just small tweaks

[crimson skiff]

ic

[crimson skiff]

fair

im in my nordic era rn

[echo frost]

huh

is that a color scheme

by nordic do you mean nord?

[crimson skiff]

yes

[late lichen]

since when did we get that power?

element resize on css??

i mean, dragging resize

oh, it existed for a while

[echo frost]

i've tried to do this before i think, but i didn't realize that the element has to have a specific overflow set

well not a specific one

just not show or clip iirc

[errant zenith]

i love the taskbar and the bar on top

would you mind sharing how you did that 😭

[crimson skiff]

https://github.com/NSPC911/dotfiles

bar at top is yasb, taskbar is a bunch of windhawk mods

[brazen narwhal]

is it like this cause it aint work

[wintry cape]

You want the background of the members to change right?
Could be that something is overriding it

Can you share your theme/quickcss here?

[errant zenith]

thanks :3

[brazen narwhal]

yeah

[brazen narwhal]

sure

[wintry cape]

Try placing the member part outside the :root {}

That should fix it

[brazen narwhal]

what part

[wintry cape]

This

[brazen narwhal]

isnt the member part already oustide the rooot

[wintry cape]

You placed it in the middle of the root

[brazen narwhal]

isnt the only thing inside the root the background color

[wintry cape]

The root is only for variables starting with --

[brazen narwhal]

wdym

can you give me an example mb

[wintry cape]

Use this

[brazen narwhal]

thank you

[wintry cape]

A variable is like the --message-hover-buttons-background: rgba();

Starts with --

[brazen narwhal]

OHHHH

THAN YOU

[wintry cape]

Your welcome

[wintry cape]

If you want to add more css then place it below this, unless it is a variable then place it in the root

[brazen narwhal]

okie dokie

[echo frost]

putting it in :root will work
it's the same as :root .member_... {...}
and :root is just html but more specificity

[crimson skiff]

is it because :root is considered a pseudo selector?

[plain kelp]

No it's the same for any other selector

Browsers have supported nesting for what, a year or two?

[wintry cape]

Okay

[echo frost]

I even tested myself and the css they sent with it inside :root works

still better to put it outside and not in the middle of a bunch of variables for readability and stuff but

[exotic kiln]

how to restore old ui

[wintry cape]

This

[late lichen]

elaborate

[exotic kiln]

revert that horrible march 2025 and get the old icons from 2023

[echo frost]

You can try this https://milbits.github.io/oldcord/

[exotic kiln]

not the 2020 i just said 2023

[late lichen]

did the gift aria label hider break for yall or is it just on pt-br? anyway, if it did, heres a new selector .buttons__74017 > .button__24af7.button__74017 (made with uBO)

[wintry cape]

It's Give a Gift now instead of Send a gift

[thin hare]

:/

Zzz

[bitter gale]

not sure if this is the right channel but I am trying to modify the rose pine theme and facing an issue. There's a box thingy behind the place where the server name is, does anyone know how I can fix that?

more visible here

[onyx mesa]

would need the css to look into it properly

[bitter gale]

should I send the whole css here or dm u?

[exotic kiln]

?

I am still looking for themes

[onyx mesa]

you can dm me instead

and i will look into it

[bitter gale]

alright!

[late lichen]

this icon set?(i know theres more)

[exotic kiln]

yes and the pre march 2025ui

[echo frost]

I think it's give a gift in dms and send a gift in normal channels?

[wintry cape]

I think

I didn't check in dev toold tho

Tools

[robust totem]

nah in standard channels it's gifting your friends awesome chat perks with Nitro

[echo frost]

maybe it's opposite of this

[robust totem]

really makes me want to click it, amazing upsell discord

[echo frost]

for me, it's this (in dms)

[robust totem]

ohh the aria label

why is that different 😭

[wintry cape]

Why all different lol

Nvm that is dms

Dms is for me the same

[echo frost]

gift in this channel is this for me (the display:contents is from a plugin changing the dom for some reason)

[wintry cape]

Just this for me in dms, same as the server

[late lichen]

i dont trust aria labels, just sayin

[echo frost]

yeah they're not ideal

[crimson skiff]

who is aria and why is her name everywhere in html

[clear siren]

accessible rich internet application

[stiff sapphire]

a really interesting acronym

[echo frost]

it's a type of music

[oak plover]

isn't that like the minecraft song

[echo frost]

oh yeah it is that too

but i learned about it in my music appreciation class, then forgot it and just looked it up again
it's a singer accompanied by a simple melody or something

[pure cairn]

Music appreciation class

[echo frost]

yeah

fits for one of the required gers (general education reqs)

i think i had to take that or art appreciation

and music better

[late lichen]

huh

[echo frost]

for my bachelor's degree

[dusty basin]

.modeSelected__2ea32 .link__2ea32 .name__2ea32{color: pink;}

can anyone help me with this

it just doesnt work

[steep drum]

1 whats the purpose of it
2 put ``` at the start and end of the code

[dusty basin]

ill screenshot my full issue

then i got given that code

[dusty basin]

just likw '' the code ''

that didnt work

[dusty basin]

nevermind chatgpt worked

[late lichen]

wdym no?? i just pasted that on qcss

[dusty basin]

mine didnt work..

[late lichen]

you are checking the wrong channels, you should check #🎨-theme-development on the channels

or the one you are in

[dusty basin]

...

oh

okay

[dusty basin]

still doesnt work, i have no idea

[late lichen]

uhh, you seem to have a theme on, have you tried turning it off to check?

[wintry cape]

Can you send your theme/quickcss here

[dusty basin]

send yhe full thing?

[wintry cape]

Yes

[dusty basin]

give me like 15 minutes just watching the football

[wintry cape]

Okay, no problem

[dusty basin]

ill dm u it

[wintry cape]

You can send it here aswell

[thick palm]

for anyone that may need this information, vencord does not likey local css themes that are symlinked !
nvm still cant hot reload local themes :<

[tranquil whale]

This chillax

[brazen quartz]

Works for me, maybe wrong path?

[thick palm]

it was all correct but it just didnt want to hot reload it for some reason

i made the sass transpiler just output it to the themes folder and it works as usual 🤷

[brazen quartz]

Oh hot reload, I copy pasted it into devtools whenever I edited something

[thick palm]

to be fair to you, i forgot to put that in the original message lol

[mild crane]

If anyone wants the new "activity" section above the member list gone completely, add this to your QuickCSS section

    display: none !important;
}

[class*="container_"].openOnHover__0f2e8.usesCardRows__0f2e8 {
    display: none !important;
}```

They really just keep adding dumb shit that bloats the view of everything else huh

[cloud sigil]

I have these that I kinda've just been slowly but surely keeping updated

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

Or you could use this

/* Hide Activity Header & Cards */
h3[class*="membersGroup_"]:has(> span[class*="headerContainer_"]),
[class*="container_"][class*="openOnHover_"][class*="usesCardRows_"] {
    display: none !important;
}

[tranquil whale]

Everyone prepare yourselves for the worlds greatest discord theme to re enter the world

https://github.com/Ascellayn/TSN_Misono

[clear siren]

[tranquil whale]

what

[clear siren]

such a big announcement for an upcoming theme lol

[tranquil whale]

not mine

its just a very complex theme

expect it to be known

as this time it officially supports vencord

and well

its modular css

so complex backend

fun fact your ip address can be stolen via css

[clear siren]

yop

[echo frost]

You can do more than that
https://adragos.ro/fontleak/
https://portswigger.net/research/blind-css-exfiltration

[steady folio]

I miss this old compact profile in discord and how to revert to this old compact profile

[pure cairn]

https://tenor.com/view/sleep-gif-17838646818300389894

[echo frost]

what is this?
pronouns? and something else?

[robust totem]

status maybe

[echo frost]

oh yeah

[robust totem]

I like the status bubbles way more tbh

[echo frost]

i forgot status used to be there lmap

[steady folio]

Just ignore I just wanna old compact profile discord

[echo frost]

ok well getting that isn't easy

[echo frost]

I got a little bit

.user-profile-popout {
  .mask__68edb {
    anchor-name: --profile-tag-anchor;
  }
  /* .container_ab8609 {
    position: fixed;
    width: 100%;
    left: calc(anchor(--profile-status-anchor start));
    top: calc(anchor(--profile-status-anchor end) + 68px);
    .outer_ab8609 {
      &, >.inner_ab8609 {
        box-shadow: unset;
        border: none;
        background: none;
      }
      &::before, &::after {
        display: none;
      }
    }
  } */
  .header__5be3e  {
    anchor-name: --profile-status-anchor;
  }
  .container__63ed3 {
    border-bottom: 2px solid var(--user-profile-overlay-background);
    padding-bottom: 32px;
    .tags__63ed3 {
  
      /* overflow: visible; */
      /* flex-direction: column;
      align-items: flex-start; */
      >.clickableUsername__63ed3 {
        width: 100%;
      }
  
      >.dotSpacer__63ed3 {
        display: none;
      }
  
      >.container__8061a {
        background: var(--user-profile-overlay-background);
        padding: 4px;
        border-radius: 4px;
        position: fixed;
        right: calc(anchor(--profile-tag-anchor end) + 8px);
        top: calc(anchor(--profile-tag-anchor end) + 8px);
      }
    }
  }
  .descriptionClamp_f5f93a {
    max-height: unset;
    -webkit-line-clamp: unset;
    +.viewFullBio_f5f93a {
      display: none;
    }
    &::before {
      content: "About me";
      text-transform: uppercase;
      font-size: 14px;
      color: var(--header-secondary);
      font-weight: 800;
      line-height: 32px;
    }
  }
}

There isn't really a way to put the status in the right spot

[steady folio]

thx, bugged but i'm happy

[echo frost]

this should be slightly more usable

.user-profile-popout {
  .mask__68edb {
    anchor-name: --profile-tag-anchor;
  }
  .container_ab8609 {
    top: 48px;
    .outer_ab8609 {
      &::before, &::after {
        display: none;
      }
    }
  }
  .header__5be3e  {
    anchor-name: --profile-status-anchor;
  }
  .container__63ed3 {
    border-bottom: 2px solid var(--user-profile-overlay-background);
    padding-bottom: 16px;
    .tags__63ed3 {
      >.clickableUsername__63ed3 {
        width: 100%;
      }
  
      >.dotSpacer__63ed3 {
        display: none;
      }
  
      >.container__8061a {
        background: var(--user-profile-overlay-background);
        padding: 4px;
        border-radius: 4px;
        position: fixed;
        right: calc(anchor(--profile-tag-anchor end) + 8px);
        top: calc(anchor(--profile-tag-anchor end) + 8px);
      }
    }
  }
  .descriptionClamp_f5f93a {
    max-height: unset;
    -webkit-line-clamp: unset;
    +.viewFullBio_f5f93a {
      display: none;
    }
    &::before {
      content: "About me";
      text-transform: uppercase;
      font-size: 14px;
      color: var(--header-secondary);
      font-weight: 800;
      line-height: 32px;
    }
  }
}

it puts the status on the banner

why are you censoring they?
and procrastination
and pride

also is that an old ss that you're censoring?

but yeah i realized where they went

but it's not doable to put status there

[steady folio]

in my country its prohibited show

[pure cairn]

https://tenor.com/view/mods-cut-him-down-tear-him-apart-splay-the-gore-gif-16211356125689318290

[tranquil whale]

why it blured it obvi a replugged dev

[echo frost]

#🎨-theme-development message

not my image

and how do you know it's replugged?

[tranquil whale]

i know dev

and well the fork

is the replugged dev icon

[echo frost]

oh

i have a couple mutual servers with them, but none discord related

[tranquil whale]

How

[echo frost]

minecraft stuff

[late lichen]

this good or nah? normal | hover (the controls do come back when you hover them)

[echo frost]

i personally don'y really like that

[austere cloak]

/* Collapse Clan Tags */
.chipletContainerInner__10651 > .text__10651 > .tagText__10651 {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  will-change: max-width, margin;
  transition: max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chipletContainerInner__10651:hover > .text__10651 > .tagText__10651 {
  max-width: 20ch;
  margin-right: .3ch;
  transition-delay: 0.08s;
}
.chipletContainerInner__10651 > .text__10651 > img.badge__10651 {
  margin-right: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chipletContainerInner__10651:hover > span > img.badge__10651 {
  transform: rotateZ(360deg);
  margin-right: .6ch;
  transition-delay: 0.08s;
}
.chipletContainerInner__10651 {
  position: relative;
  display: inline-block;
  background-color: var(--background-mod-subtle);
  padding: 0 2px;
  margin-left: 5px;
}
.chipletContainerInner__10651:hover ~ .tagText__10651 {
  display: block;
  clear: both;
  margin-top: .5ch;
}
Anyone can help me fixing this plz```

 btw i have this issue on replying any idea ? :

[wintry cape]

Discord forced line-height 2px

[humble jay]

.scroller_c1e9c4:has(.wrapper_f563df) {
  padding: 0px 0px 0px 0px;
  scrollbar-width: none;
}
[class^="scroller_"][class*="thin_"][class*="scrollerBase_"]:has([class*="wrapper_"]) {
  padding: 0px 0px 0px 0px;
  scrollbar-width: none;
}

is there an actual relevant performance difference bwteen these two

somoene said to do that

to avoid braeking when discord rehashes things

[echo frost]

both of those will be super bad

:has() is very bad for performance

and *= is quite bad for performance

and it being in :has() is even worse

and ^= is kind of bad for performance

[humble jay]

lmao

[echo frost]

it's better to use full class names and avoid :has()
it's super easy to update classes when discord rehashes with the class updaterin #theme-support

[humble jay]

yea i figurd cuz last time i saw it was just some simple regex thing

[humble jay]

so just keep it like this

[echo frost]

uh yes?

don't have the :has()

[humble jay]

idk lol

the has was cuz it was getting other stuff

[echo frost]

where's the .scroller with the has

[humble jay]

above

[echo frost]

what is it meant to be selecting?

[humble jay]

<div class="scroller_c1e9c4 thin_d125d2 scrollerBase_d125d2" dir="ltr" style="overflow: hidden scroll; padding-right: 0px;">
  <div role="group" class="vc-better-quick-react vc-better-quick-react-compact wrapper_f563df" style="--vc-better-quick-react-columns: 6;">

its this

for the context menu

[echo frost]

#message>.scroller_c1e9c4

what about the :not(:has())?

[humble jay]

is # for id

[echo frost]

yes

[humble jay]

the not has is cuz if u dont have the plugin for more react buttons

[echo frost]

huh
what does the css actually do?

[humble jay]

cuz this is kinda horrid

[echo frost]

so :has() is for what?

[echo frost]

and :not(:has()) is for this?

oh the opposite

why do you even need it different?

both of them you're doing 0 padding

[humble jay]

cuz last night i remember it would be diff if i turned off the plugin

mightve been tired idk

[humble jay]

im just gna try and use this now

[echo frost]

i'm still confused about the wrapper
if it's to detect the quickreact, why not use :has(>.vc-better-quick-react)

and even with quickreact, it still has wrapper?

so i'm verty confued

[humble jay]

oh> means 1 down ok

erm

[humble jay]

ngl i dont remember i was kinda spending forevr making it work how i needed

the one down does seem better than has tho

obv

oh the

.wrapper_f563df:not(.vc-better-quick-react) this?

[echo frost]

if you just need to select the quickreact place of right click menu, then use this

[echo frost]

i've been talking about the .scroller
because that's what has the :has()

:not() is fine

from your screenshot, if you just move the .vc one below, it's also not necessary, but

[humble jay]

hm that might be a dupe

i thought i removed all the useless ones

oh

its for

the popout menu

thats why

had to findthat

[echo frost]

that's the :not(:has())?

[humble jay]

yez now i know why ok i can try and fix that without the has

yea

yea i comment this and it goes padded

[brittle juniper]

uh

[echo frost]

ok so do #message>.scroller_c1e9c4 for the main one
and .submenu_c1e9c4>.scroller_c1e9c4 for the popout one

[brittle juniper]

how to remove the read receipt from whatsapp

[humble jay]

crazy skin

[echo frost]

you can use ctrl+shift+i, then click inspect element (top left) then click that

[humble jay]

wait where is submenu from, thats not in my html

but it works ig

[echo frost]

it's for the popout/submenu one

[humble jay]

oh i didnt take

snippet with it popped

out

gg

lole

[echo frost]

?

[humble jay]

yea

i was looking at html

but i copied it without the popou tmenu

so i was missing that

submenu_c1e9c4

[echo frost]

use f8break to look at the dom with things that disappear

vp f8break

[humble jay]

yea i use that, sometimes its annoying to get it to work tho like u gotta seelect somewhere

but idk where

[echo frost]

you just have to open devtools, then click on discord

then it'll work

if you're focused on devtools, it won't

[humble jay]

i see

yea thats always annoyed me lol

its like clicking here on yt

[echo frost]

huh

i have no idea what that is

[humble jay]

if u click there on yt itll clear this blue selectoin shit

without pausing

[echo frost]

you can just click anywhere on the bar

or actually maybe that's what you mean

[echo frost]

(or outside of it if you're not in fullscreen)

but that box only shows up if you use tab

[humble jay]

yea its for fullscreen

just seems like it randomly happens like u press ur keybinds and they dont go

[wanton orbit]

First attempt at making a theme
It's only the message bar thus far, but I'm planning on doing way more changes

[pure cairn]

https://tenor.com/view/long-cat-lol-longcat-extend-gif-17597031

how that feels

[austere cloak]

I just add this into the current one ? (its for clan tag?)