🎨-theme-development

[bold jetty]

paste this in edit QuickCss

.typeWindows__5fa63>.wordmark__0d178 {
display: none;
}

was finding it

[grand surge]

That makes the entire discord and clearvision word thing dissapear

I want just the clearvision one

[bold jetty]

yep i'm using it rn

i will show before and after

before

after

[grand surge]

.

[grand surge]

.

Ik lol

[bold jetty]

oh

[grand surge]

Ye

[bold jetty]

hold on

[grand surge]

Found the bottom one

[bold jetty]

do u want just this?

[grand surge]

Ye

[bold jetty]

:root .typeWindows__5fa63 > .wordmark__0d178:after, .typeWindows__5fa63 > .wordmark__0d178:before {
display: none;
}

that one

[grand surge]

Use this

.theme-dark .container_ca50b9:before{
  display: none;
} 
``` to get rid of the thing that was at the bottom

[grand surge]

Alr thanks bro

[grand surge]

Doesnt work lol

[bold jetty]

remove everything from the quickcss then try

just leave one in there

[grand surge]

Alr

Doesnt work

[bold jetty]

hmm

idk why it's not

works for me

[grand surge]

Dam

[bold jetty]

i got help from these's guys so maybe ask them
#🎨-theme-development message #🎨-theme-development message

[grand surge]

The 2nd code snippet worked

Thanks bro

[bold jetty]

oh lol np

maybe i added something by accident

[grand surge]

Can someone re-explain how do i use the f8 plugin i seem to be using it wrong😂

[grand surge]

I want to change the color for more user tags, i tried this code but it doesnt word, but when checking the class its the correct one, any advices?

.botTagCozy_dd88d1 botTag__11e95 botTagRegular_c89c9a botTag__4211a rem__931aa{
 border-color: #84178e !important;
}```

[past bison]

This splash screen can be made transparent too! Except somehow there is a titlebar. Why is there a titlebar?

(Appdata\Roaming\vesktop\settings.json)

[slim pond]

That is actually very useful

Looks sick af

Can you also change the gif? (I could check it myself but I'm not from a pc rn, so yeh)

[devout elm]

shiggy is eternal

[pure cairn]

You have to use codeblocks, otherwise discord will interpret the __ as markdown and underline stuff

[echo frost]

like this
```
code here
```

code here

[pure cairn]

One ` works fine already (both at the beginning and the end)

[bleak gust]

Looks different

Also you can ```language with the triple backtick

[pure cairn]

I know, but the important thing is that it's not just plain text

[bleak gust]

and it works better for multi-line

true

[echo frost]

not really

but yeah better than nothing

[stone garden]

Can anyone tell me if there is a way in CSS to change the color of the bot tag based on the color of the highest role in the profile? If have so, I would like to ask for the CSS code line. Thank you.

[gilded cloak]

Not easy without js but I wouldn't be surprised if someone did

Would be super laggy

[deep bane]

make a selector for every hex code with :has()

[bleak gust]

ram exploder

[deep bane]

that's probably the only way to do it with pure css too lol

[fast cipher]

at that point just use JS

[stone garden]

yeah because in pure css there is no way to do that

[deep bane]

there is

[stone garden]

really? I have read the full documentation about css and there is almost no way to do that.

[deep bane]

#🎨-theme-development message

you should've said that there is no efficient way to do it in pure css

[stone garden]

hmm ok, let me try

[deep bane]

[tawny dagger]

anyone have a way to remove the "Powered by Nitro" thing on emojis

[deft niche]

Yes

Just find the class and hide it

[midnight wagon]

working on this for myself

[pure cairn]

blockquote, [class*="embedFull__"] {
  width: fit-content !important;
}
[class*="embedFull__"] {
  margin-left: 25px; /* set to 0 if embeds don't start from chat border */
  border-radius: 25px !important;
}```

idk, something funny I tried out today, looks pretty imho

examples using Couve as base theme

[midnight wagon]

thing

[manic chasm]

[class^="avatar_"] {
  scale: 160%;
  border-radius: 0%;

}```

i'm trying to make the profile pictures bigger, and while it works, it bugs out on the user menu in the corner, and the actual user profiles. while i can just remove pfp frames, the other stuff kinda sucks, does anyone know how to target specifically the avatars in chat?

id also like to move them down

the issues:

ugh new image style

i hate it

[vestal field]

the uneven margins really bother me
whats even the point

[edgy sentinel]

they were joking

its technically possible but you have to write a rule for each possible hex colour, which is 16 million rules

technically possible, realistically impossible

[grand surge]

They did him dirty

🤣

[pure cairn]

I was fucking around and finding out tbf

[clear siren]

you don't use scale to resize them

I was trying to make a proper avatar size resizing css but ran into some obstacles

:root
 { --avatar-size: 50px;
   --avatar-gap: 32px;
   --custom-message-avatar-size: var(--avatar-size);
   --custom-message-margin-left-content-cozy: calc(var(--custom-message-avatar-decoration-size) + var(--avatar-gap)); }
[class*=cozyMessage_] > [class^=contents_] > [class^=avatar__]
 { height: var(--avatar-size) !important;
   width: var(--avatar-size) !important; }

that's the main part of it

[pure cairn]

I tried with both a fixed margin size and letting it run all across the chat, it looks worse imho

[stone garden]

yeah

[pure cairn]

Stupid question, but if I'm trying to update a theme, should I use selectors or just stick to plain class names?

[clear siren]

uhh classnames are also selectors but you probably mean attribute selectors like [class^=contents_]?

[pure cairn]

Yes

Sorry, forgot to specify

Because I've seen multiple themes using class names, but they're usually the ones that break after discord updates

[clear siren]

I use them exclusively, they aren't as performant (doesn't matter really) and you sometimes have to be a bit careful to not use a simple selector as it can easily select more than you wanted

but it will ensure that your theme won't break too badly when discord decides to randomize the classname _xxxxxx strings

[pure cairn]

[clear siren]

which is happening soon I think

[pure cairn]

Are they going to release that update again?

[clear siren]

probably?

who knows

[pure cairn]

Can't wait for them to revert back again

But thanks

I'll try it out later

[lost shoal]

@import url(https://cdn.jsdelivr.net/gh/zerol1ght/chatty-edit@master/ChattyEdit.theme.css);
:root {
--chattyBackgroundImage: url(https://i.pximg.net/img-original/img/2024/02/07/19/00/25/115843546_p0.png) !important;
}
:root {
--chattyBorderRadius: 15px !important;
--chattyPadding: 10px !important;
--chattyBlur: 5px !important;
--interactive-muted: #c42424 !important;
--background-primary: rgba(38, 22, 46, 0.171) !important;
--background-secondary: rgba(48, 21, 35, 0.171) !important;
--background-secondary-alt: rgba(0, 0, 0, 0.192) !important;
--background-tertiary: rgba(31, 23, 51, 0.082) !important;
}

@clear siren

[clear siren]

yeah that image doesn't exist anymore

or can't be accessed without referer

if you can track the image down upload it to imgur or something and replace your link with that

[lost shoal]

o

[clear siren]

also 99% of that css you're importing is broken but that happened months ago so I guess it doesn't matter lol

[lost shoal]

well it does always work but it didnt now so i didnt know what to do

[clear siren]

yeah the issue you just encountered is just the image file not being accessible

[lost shoal]

okay thanks for helping

[clear siren]

but most of ChattyEdit.theme.css is using class names that got changed in october

[grand surge]

looking at this made me think that the color completely surrounding it would look nice

[pure cairn]

hmmmm

maybe?

[proud token]

is the reason why you dont shift everything to the right and adjust max width because its overkill complicated

since that edit makes it not line up with the other messages right

[proud token]

hopefully not

ill be really sad

[pure cairn]

Are you talking to me?

[proud token]

yeah

[pure cairn]

I'm shifting it to the right because with Couve as main theme, embeds usually look like this

they take up all the chat screen and they start from the left border

meanwhile, with the small left margin it sticks out more from the chat

so yeah, it's mainly a small tweak for people that use Couve

[brisk iron]

that margin throws me off

[proud token]

oh i see

that makes sense

[pure cairn]

the yellow or red one?

[gilded cloak]

Both are colossal imo, ew

[pure cairn]

as I said, I was messing around

[plain kelp]

* { margin: 1px }

[pure cairn]

now it looks kinda decent

[gilded cloak]

Please screenshot discord with this

[proud token]

lmao

[pure cairn]

nuh uh

[proud token]

it doesn't do that much actually

it just screws with some divs that rely on margins to fit correctly

[gilded cloak]

* { margin: 1px; padding: 1px }

[proud token]

pretty much same thing

[exotic nexus]

Add !important

[proud token]

oh yeah ok that fucks it up

[plain kelp]

With margin: 2px !important

[proud token]

average

[gilded cloak]

* { all: unset !important }

[proud token]

this will just break discord

[pure cairn]

* { display: none !important } moment

[gilded cloak]

I thought we had an auto mod rule to prevent people from sending that

[pure cairn]

oops

sorry

[gilded cloak]

No

It's fine,

[pure cairn]

maybe it doesn't detect it if it's not formatted? idk

[gilded cloak]

* { transform: rotate(1deg) }

[pure cairn]

AAAAAAAA

horror

[proud token]

you could probably do something funny with content: ""

[pure cairn]

is it still bad?

[proud token]

it looks good

[proud token]

for april fools day im pushing code to clearvision that makes discord do a barrel roll once upon load

[plain kelp]

What's clearvision?

[proud token]

its just a theme

[gilded cloak]

Bad theme, use clientTheme

[proud token]

real

[gilded cloak]

/s.

[proud token]

i mean ven uses it

so it must be the best theme

[pure cairn]

* {
  transition: transform 0.2s ease;
}
*:hover { 
  transform: rotate(7200deg);
}```

idek if this works

[plain kelp]

It does, for a specific definition of works

[proud token]

you could totally add a new pseudo class in the corner of discord or something and then set a trigger on the overall app class to do a barrel roll when the psuedo class is hovered

[plain kelp]

An issue is that when things move, the hover status changes, so it just starts spazzing around like crazy

[pure cairn]

so I can use :hover on *

added to the endless list of things I didn't know, thanks

[plain kelp]

Selectors can be combined pretty much arbitrarily

[proud token]

selectors are pretty much just regex for classes

[plain kelp]

Uh, no

Classes are a specific kind of selector

[proud token]

yeah but a lot of selectors just function to find classes

i know what you mean with selecting by id etc

but in practice you pretty much dont use them

[plain kelp]

. selectors are the only ones that deal with classes

[gilded cloak]

[class*=..]

[plain kelp]

And [class=] of course, but you'd never use that for class outside of discord shit

[proud token]

i think combinators count too

although those are generalized obv

[pure cairn]

Ok so it works as intended

[plain kelp]

Combinators combine selectors into more complex ones

[pure cairn]

Totally planned that one out, trust

[plain kelp]

They have nothing to do with classes per se, but their operands might

[proud token]

i guess yea

i think it's still worth arguing that css selectors as a whole are kind of like regex though

[plain kelp]

They're a language for matching stuff

[proud token]

yeah

[plain kelp]

svg, img { animation: spinny 4s linear infinite; }
@keyframes spinny { from { transform: none; } to { transform: rotate(360deg) }}

Works relatively not bad, but it's laggy af

[proud token]

its funny though

[plain kelp]

It doesn't make discord completely unusable like many similar joke snippets do

[pure cairn]

This is why I was concerned about the "add snippet to quickcss" button someone talked about in #👾-core-development

Clueless people adding these kind of snippets and fucking everything up

[proud token]

as long as you regulate the snippets channel it shouldn't be a big problem though right

[pure cairn]

The snippets channel is not the only place you can get them though

[plain kelp]

I don't suppose anyone knows any workaround for backdrop-filter being buggy in transparent firefoxes

[pure cairn]

My brain when I learn that I can chain margins into a single row instead of 4 separated ones

[manic chasm]

hey gang it's dumbass certified here, why can i not do css [class*="cozyMessage_"] { padding: 3px; }

i wanna make emojis bigger but like

0ghqr8igheori8ht30tu-34

idfk how to code in css

basically i cant see on my small fuckin monitor and i need things to be bigger

[plain kelp]

Probably discord's own selectors are more specific and therefore override it

[manic chasm]

i can do margin

but uh

the emojis still dont get to go outside

[plain kelp]

Consider :root { --custom-message-spacing-vertical-container-cozy: 2em; }

[manic chasm]

i cant see like anything

oh wait

i can

its just really spaced

[plain kelp]

Was that not what you wanted

[manic chasm]

no like

im trying to increase the emoji size

so theyre bigger

but they squish

[pure cairn]

try this
#🎨-theme-development message

[manic chasm]

okay yeah thats. a lot better

thankyou

[pure cairn]

[plain kelp]

Why were you messing with padding if you wanted emoji size

[pure cairn]

.addButton__8b4f0 { /* + Button */
  color: white;
  margin-left: 18px;
  position: absolute;
}```
just why

[manic chasm]

HHHHHHHGGGGGGHHHHHHHHHHH i cant find proper classessssssssss

idfk how to make this work im not. that col

cool

[manic chasm]

because i thought itd work

thats about how i feel rn yeah

[pure cairn]

boo womp sfx

[manic chasm]

guys

guys

i did it

]

im oproud of myself

[class^="positionLayer__50609 expressionPickerPositionLayer__2061e theme-dark layer_ec16dd"] {
  scale: 140%;
  margin-right: 320px;
  margin-bottom: 60px;

}```

it may have been with duck tape

it also goes otuside of the window but we arent talking about that

FUCK

I MADE IT TOO BIG

[plain kelp]

[class^="positionLayer__50609 expressionPickerPositionLayer__2061e theme-dark layer_ec16dd"] why

[manic chasm]

i dont know css

i know

umm

some lua

and some gdscript

why

[plain kelp]

Messing around with the positioning layer sounds risky

Have you considered pressing ctrl-+

[manic chasm]

that changes everything

im aiming for the emoji picker

i cannot see 32px reliably on this monitor lol

[plain kelp]

Then the --custom-emoji-picker-constants-emoji-size-medium variable sounds relevant

[manic chasm]

HGO34GO8IEHYROQGREW where do you find these

[plain kelp]

It's right there

[manic chasm]

ohh i cant drag my inspect so i can see all of it

i was looking at half

wait

wh

where is that thats not what im seeing

also that edits the padding

not ther size

[plain kelp]

Did you try just resizing the emoji picker

It switches to a larger emoji size if you do

[manic chasm]

then it takes up a ton ofthe screen

[plain kelp]

Sorry, but it's physically impossible to make things larger without them taking up more of the screen

[manic chasm]

no, i'm talking about within the emoji picker

the emoji picker itself does this

[plain kelp]

Does what

[manic chasm]

moves things to fit

see how the emojis shift

[plain kelp]

Your requirements are very confusing

You want to make things larger without them taking more space and without zooming in

[manic chasm]

no, i want it to zoom in, but within the emoji picker

i dont know how to get to the variables area but if i could i think i could do it

okay maybe not

[plain kelp]

div[class*="contentWrapper_"]:has(> #emoji-picker-tab-panel) {
    scale: 4;
    transform-origin: bottom right;
}
``` works fine for me

Though it doesn't work on the gif or sticker panels, not that I ever use those

[manic chasm]

oh i dont care about the gifs and stickers

Hi

are you. sure it works

its squished

hamburger

[plain kelp]

Works on my machine

[manic chasm]

for me it does this

what if i restart

[plain kelp]

Do you have any other css that's screwing stuff up

[manic chasm]

no because i restarted and itworked

thank you kyuuhachi i dont have to squint at emojis anymore

its just like a big monitor

[past bison]

Playing with transparency. What do you think?

[pure cairn]

Genuine reaction btw

How does that behave with an animated wallpaper though?

[past bison]

perfectly

[pure cairn]

Looks very good

[pure cairn]

Oh, that's more blurred than I thought

[past bison]

hmm

[pure cairn]

It wasn't very obvious here, since the background could have easily been plain

But still, it looks great

[past bison]

it uses the windows11's blur effect so, i don't think i can change that

[pure cairn]

Me likey, I'd use it if I ever need a small discord window fixed somewhere on my screen

[clear siren]

you can change it globally with dwmblurglass :3

[past bison]

wow it works

[past bison]

is it possible to fix this? I used backdrop-filter: blur(20px); but it's broken.

[clear siren]

nope, backdrop-filter straight up doesn't work if there's glass behind it

[past bison]

😐

any workaround? 😄

[clear siren]

not that I know of, probably not

[clear siren]

lmao discord's class updates have nothing on steam client's new update

[plain kelp]

Ouch

[proud token]

oh my god

[past bison]

Is it possible to change this scrollbar? (it's the dark purple nitro theme one). I can't find this.

@alpine current did you find it in the end?

[bleak gust]

[alpine current]

Currently I hide it when I don't hover over it:

.auto__76cc7:hover::-webkit-scrollbar-thumb,
.auto__76cc7:hover::-webkit-scrollbar-track {
    visibility: visible;
}
.auto__76cc7::-webkit-scrollbar-thumb,
.auto__76cc7::-webkit-scrollbar-track {
    visibility: hidden;
}```

I don't know if this is what you are looking for or what you are referring to.

[past bison]

Yes it did it!

.auto__76cc7::-webkit-scrollbar-track {
    visibility: hidden;
}```

i was trying to edit the color to transparent, which worked for the basic themes..

[bleak gust]

that actually looks sick

post the code

@past bison i would really like to try

[past bison]

https://github.com/s-k-y-l-i/discord-themes sure, i've updated it on github

[glad urchin]

i dont want to learn js, so trying to do this within css as much as possible

is it possible to perfectly get the dominant color of the album art and put it in the slider? my closest attempt results in a lot of blur and doesnt look appropriate

/* what */
#vc-spotify-player {
  --blur-amount: 0px; 
  --brightness: 50%;

  background: transparent !important;
  position: relative;
}
#vc-spotify-player::before,
#vc-spotify-player::after {
  z-index: -1;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#vc-spotify-player::before {
  background: var(--vc-spotify-track-image);
  background-size: cover;
  background-position: center;
  /* background-size: 100%;  */
  /* replace with "cover" in case your blur is small enough to see that it's stretched */
}
#vc-spotify-player::after {
  backdrop-filter: blur(var(--blur-amount)) brightness(var(--brightness));
}



#vc-spotify-player .barFill__30e17 {
  background: var(--vc-spotify-track-image);
  background-size: contain;
  backdrop-filter: blur(px) brightness(400%);
  opacity: 0.4;
}

#vc-spotify-player .barFill__30e17::before,
#vc-spotify-player .barFill__30e17::after {
  z-index: -1;
  content: "";
  position: absolute;
  height: 100%;
  width: 10%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#vc-spotify-player .barFill__30e17::before {
  background-color: red;
}



#vc-spotify-player .grabber_d2868c {
  opacity: 1 !important;
}

#vc-spotify-player .grabber_d2868c::after {
  position: absolute;
  background: var(--vc-spotify-track-image);
  background-size: 10px 10px;
  border: 1px solid red;
  backdrop-filter: blur(0px);
  /* opacity: 0.4; */
  overflow: hidden !important;
}```

[fast cipher]

think you need to do it with js

https://medium.com/@rocchokcoco/how-to-extract-image-theme-color-by-css-eb0d278c14d

this one works with css blurs and look ok

[glad urchin]

that;s the same one im using lol

thank you anyway

[bleak gust]

set the grabber to be the image and blur it a huge amount

[fast cipher]

because that's the only way 🫠

[glad urchin]

how can i animate the info container to smoothly take up the space when the album art is hidden

[past bison]

what xD

how? 😂

[glad urchin]

when i hover on it, the album art (red) disappears
when it disappears, i want the info container (green) to smoothly take up the space, with transition

[past bison]

hmm.. chatgpt says the display:none cannot be made to transition smooth

in my code i use visibility: hidden/visible and these ones work

but i think then you have to also make the text area larger and over the (invisible) image

but I meant that we are listening to a music from the same album lol 😄

[glad urchin]

im thinking of a silly way but oh well

css has its limitations sometimes

[past bison]

to the image: visibility: hidden

[glad urchin]

hides the image, but it doesnt move

[past bison]

it has: transition: visibility 0.3s ease;

i know

you have to make it by hand

width: 220px !important;
transition: width 0.3s ease;

something like this

[glad urchin]

yop, thinking of similar

weird

[past bison]

you have to do the text width on hover

also

[glad urchin]

im trying to make the visibility transition, but it doesnt?

mihght have to make a keyframe

OH.

[fast cipher]

maybe use a negative margin 🤔

[glad urchin]

did exactly that

[fast cipher]

looks nice

can u share the styles?

[past bison]

wow nice!

[glad urchin]

one sec, ill reupload the snippet in #🎨-css-snippets

[past bison]

btw I'm working on the same area 😄

[glad urchin]

updated, use the import

ah wait, forgot something

[fast cipher]

thx

[glad urchin]

commits updated

[solid ore]

wat program do u use to record and crop stuff like this btw

[pure flame]

i use this for recording https://linuxecke.volkoh.de/vokoscreen/vokoscreen.html

[glad urchin]

obs...by manually cropping
im making my own to make it easier

[balmy torrent]

this is how mutualgroupdms looked before discord's recent change with tabs, right?

nvm i think it was always after mutual servers

[deep bane]

this is how it looks for me still

[balmy torrent]

that's the new tab layout

they swapped mutual servers and mutual friends

[deep bane]

i forgot

[grand surge]

Hello, (sorry that im using you as an example toad) i want to change the background of the more user tags thing, so instead of a dark grey type of color i want it purple or smth like that

botTagCozy_dd88d1 botTag__11e95 botTagRegular_c89c9a botTag__4211a rem__931aa

i tried ^ class but it didnt work, can i get the class name, please and thank you

[minor arch]

does anyone know whats wrong with this code?

    display: none;
}```

[fast cipher]

if you want to remove user notes use the plugin

[pure cairn]

^

[minor arch]

i wanna learn myself

[grand surge]

So check how the plugin works on github

[minor arch]

how do u do that?

[grand surge]

https://github.com/Vendicated/Vencord/tree/main/src/plugins/betterNotes

[deep bane]

because that class doesnt have the aria-label

[minor arch]

ok

what would the right code be?

[deep bane]

"i wanna learn myself"

[minor arch]

look if i can know what the code is i can know what i did wrong

[grand surge]

Use dev tools

[deep bane]

use devtools

[fast cipher]

tolls

[grand surge]

Lol

[deep bane]

dev toll 💵

[grand surge]

@minor arch crtl shift i

[deep bane]

you're also using an old class iirc

[minor arch]

ok

[grand surge]

Lol, just use the plugin

[minor arch]

lol i wanna learn myself

[deep bane]

🗿

[grand surge]

Alr hold lemme find it

[minor arch]

ok

[pure cairn]

Ok, then learn by yourself

[minor arch]

i mean i want help but i wanna code it myself to learn

[pure cairn]

But if a plugin for that already exists

Why do you want to use css instead?

[minor arch]

becuase i learn when i code it myself

[deep bane]

[id^="popout_"] .section__6f61e:has([aria-label="Click to add a note"] {
    display: none;
}

[grand surge]

.section__6f61e {
  display: none;
}```

use this ![trolley](https://cdn.discordapp.com/emojis/1024751352028602449.webp?size=128 "trolley") ![trolley](https://cdn.discordapp.com/emojis/1024751352028602449.webp?size=128 "trolley") ![trolley](https://cdn.discordapp.com/emojis/1024751352028602449.webp?size=128 "trolley") ![trolley](https://cdn.discordapp.com/emojis/1024751352028602449.webp?size=128 "trolley")

[deep bane]

🔥

[minor arch]

what is that?

[grand surge]

🫡

[grand surge]

Try and see

[minor arch]

no

[pure cairn]

Pure 🔥

[deep bane]

🗿

[grand surge]

[minor arch]

what is ".section__6f61e"

what does that mean?

i dont know alot about ccs

[pure cairn]

I guess it's the profile popup window class

[grand surge]

It just looks like this

[grand surge]

Yessir

[deep bane]

no

its the sections in the profile popout

like the name would suggest

[grand surge]

O

[minor arch]

how do u find that class?

[pure cairn]

Oh it's just the details section

Lol

[deep bane]

dev tools

[minor arch]

what command in dev tools?

[grand surge]

.

[deep bane]

https://tenor.com/view/huh-dog-huh-dog-gif-9454444978823724629

[minor arch]

i found it

[grand surge]

Honest reaction

[minor arch]

ok i made it so it doesnt display my banner

but it doesnt work on other peoples

[deep bane]

are you gonna post the code or not

[grand surge]

Lol

[pure cairn]

Let them cook

[minor arch]

    display: none;
}```

[grand surge]

Real🔥

[minor arch]

i did

[deep bane]

we know

look at the second and third class in your code

[minor arch]

popoutBannerPremium__942db bannerPremium__42693

[deep bane]

the second and third

not the third and fourth

[minor arch]

yes ok

i edited message

[deep bane]

what do they have in common/what do their names suggest

[minor arch]

Premuim

[pure cairn]

||the 42||

[deep bane]

and you have nitro

[pure cairn]

[minor arch]

ohhh

[deep bane]

🤯

[minor arch]

so i need to remove them

then it wont show any banners

[deep bane]

💯

[minor arch]

ty!

[minor arch]

    display: none;
}```

will that work?

[balmy torrent]

wdym
those are the correct classes

[deep bane]

fuck around and find out 💯

[minor arch]

i did

it didnt work

[minor arch]

^

[deep bane]

then you didnt fuck around and find out enough

[minor arch]

what did i do wrong?

[deep bane]

you're on like 1 right now

[grand surge]

For anyone wondering i found it, its

.rem__931aa.botTag__4211a{
    background-color: #84178e !important;
}```

[deep bane]

which tags

[grand surge]

To change the background of the more user tags

[deep bane]

which ones bro

[grand surge]

A shit its only in one location lol

Ill brb

[deep bane]

so only bot tag?

just do .botTag dont bother with rem

[grand surge]

And for all i just use .tags with rem?

[fast cipher]

just look through the plugin source

[grand surge]

Alt

Alr

[limber igloo]

Is there a way to make dark names more readable ?

Like Luna's name

Here's my CSS code:

/* ─── Importation Des CSS ────────────────────────────────────────────────── */
@import "https://comfy-themes.github.io/Discord/betterdiscord/no-scrollbar.css";

/* ─── Avatar Sur Le Dessus. ──────────────────────────────────────────────── */
[class^="wrapper_"] {
  z-index: 4 !important;
}

/* ─── Couleur d'Arrière Plan Principale. ──────────────────────────────────── */
[class^="member_"] span[class^="username_"]::after {
  content: "" !important;
  /* background: linear-gradient(to right, currentColor, rgba(255, 0, 0, 0) 95%) !important; */
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  left: 0;
  top: 0;
  transition: 0.4s;
}

/* ─── Dégradé Sur La Droite. ─────────────────────────────────────────────── */
.memberInner_a32223 {
  background: rgba(0, 0, 0, 0.225);
  color: transparent;
  transition: 0.4s;
}

/* ─── Contraste Inversé. ─────────────────────────────────────────────────── */
.memberInner_a32223 .username_d272d6::before,
.memberInner_a32223 .status_t8wrhb::before {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  background: linear-gradient(to left, currentColor, rgba(255, 0, 0, 0) 95%);

/* ─── Effet Glossy ───────────────────────────────────────────────────────── */
  color: rgba(255, 255, 255, 0.267) !important;
}

/* ─── Effet Glossy #2 ────────────────────────────────────────────────────── */
[class^="member_"] span[class^="username_"]::after {
  background: linear-gradient(90deg, currentColor, #ffffff31);
  z-index: -1;
}

/* ─── Animation Passage De La Souris ─────────────────────────────────────── */
[class^="member_"]:hover {
background-color: rgba(255, 255, 255, 0.233) !important;
transition: 0.4s;
padding-top:10px;
padding-bottom:10px;
}

/* ─── Placement ──────────────────────────────────────────────────────────── */
.name__16feb {
  z-index: 3 !important;
}```

I tought about JS. JS could do it.

[deep bane]

probably gonna have to wait for color-mix()

or use some hack that i do not know about

[pure flame]

hi anyone know or can find the class for hide the add note (right click menu)

[pure cairn]

Read a dozen messages above

[deep bane]

#🎨-theme-development message

or just use the betternotesbox plugin

[pure flame]

it dont do anything

[deep bane]

what dont do anything

[pure flame]

the one you posted

[deep bane]

then use betternotesbox plugin

[pure flame]

not in the popup, just in the right click menu

[limber igloo]

wait for colormix ? Is that something announced or ?

[deep bane]

discord is gonna update electron or whatever soon™️

[limber igloo]

oh shit ok ! thanks

[past bison]

.mentioned__58017 {
    background-color: color-mix(in srgb, var(--os-accent-color), transparent 40%);
}```
Color-mix already works. I have this for example.

[deep bane]

are u on vesktop

[past bison]

yes

[plain kelp]

I don't think it works in download client

[deep bane]

thats why

[plain kelp]

Vesktop is not an outdated pos

[deep bane]

^

but it doesnt support push-to-talk when out of focus

[deep bane]

#user-context-note {
  display:none !important;
}```

[pure flame]

thank you 🙂

[grand surge]

Fixed it with a restart but its the same code LMFAO

[minor arch]

Does anyone know whats wrong with thins?

    border-radius: 15px;
    overflow: hidden;
}```

[plain kelp]

I don't think the app-mount is inside anything of note

[minor arch]

is that better?

[plain kelp]

That one's gonna hit quite a few things you probably don't want

[minor arch]

ok

[plain kelp]

User profiles and role color preview I think?

[minor arch]

?

[clear siren]

it only hits the html element which you can't put border-radius on

[minor arch]

why arent the corners rounded tho with this code

    border-radius: 15px;
    overflow: hidden;
}```

so how can i make the corners rounded?

[clear siren]

you can put border-radius on #app-mount but it will only round the corners of that element, not the window, leaving grey in the corners

[minor arch]

so what do i do?

[clear siren]

if you're trying to make the window itself have round corners you can't, unless you do some hack with transparency

[minor arch]

ok

[cunning fog]

[class*="messageContent__"]::after {
    content: ' :3 ';
}

[class*="desaturateUserColors_"]::after {
    content: ' :3 ';
}

add :3 at the end of messages and nicknames (in chat) :3

[limber igloo]

oh oh, I found a css bug and it pisses me off hahahahahaha

It's nothing you'll tell me but it's doesnt pass the test XD

it's missing i'd say... 4-5px at the right side of the banners

I know it, because I made the banner myself hahaha

it's like a solid border 5px 5px 0px 5px XD

[clear siren]

it's missing more than that assuming it's a mirror of the left side

[gilded cloak]

Object fit cover https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
And
Object position center
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

[limber igloo]

Correct.

[gilded cloak]

If they are using css to set the image instead of <img>, you should use
background size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Instead of object fit

[limber igloo]

I found the bug...

https://raw.githubusercontent.com/s-k-y-l-i/discord-themes/main/smooth-harmony-responsive.css I removed that.

[deep bane]

Someone should somehow implement this into the betternotesbox plugin

.profilePanel__12596 .divider__2bbbc:last-child,
.userProfileModalInner__7c87d .userInfoSectionHeader__31b66:last-child,
#user-context #user-context-note,
  display:none !important;
}```

[clear siren]

why :nth-last-child(1) and not just :last-child

[deep bane]

🤷‍♂️

i forgot about it i guess

[clear siren]

lol

[pure cairn]

What does it do? (can't test it rn)

[solid ore]

also this

[class^=userPanelOverlayBackground__] > [class^=divider__]:not(:has( ~ [class^=divider__])) /* last divider before notes in user panel in dms */

[deep bane]

i think thats just the divider for connections

[solid ore]

no cus those dont show up there

[solid ore]

check in dms

oon the side panel

[deep bane]

.profilePanel__12596 .divider__2bbbc:last-child,

this is like 10x simpler

[grand surge]

Awesome 💯 😎

[deep bane]

Is there a better way to do this (center the member since thing, with it being side by side at the same time)

[id^="popout_"]:has(.userPopoutInner_f545a3):not(:has(.accountProfilePopoutWrapper_af829a)) .section__6f61e:has(.memberSinceContainer__0a28b) {
  text-align:center;
}
[id^="popout_"]:has(.userPopoutInner_f545a3):not(:has(.accountProfilePopoutWrapper_af829a)) .memberSinceContainer__0a28b {
  display: inline-grid !important;
  grid-template-columns: repeat(2, 80px);
  grid-template-rows: 20px 0 10px 0;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.memberSinceContainer__0a28b :is(.discordIcon_feeef1,.iconSizeSmol__7ee47) {
  margin: auto;
}
.memberSinceContainer__0a28b .discordIcon_feeef1 {
  grid-area: 1 / 1 / 2 / 2;
}
.memberSinceContainer__0a28b :nth-child(2) {
  grid-area: 4 / 1 / 5 / 2;
}
.memberSinceContainer__0a28b .iconSizeSmol__7ee47 {
  grid-area: 1 / 2 / 2 / 3;
}
.memberSinceContainer__0a28b :nth-child(5) {
  grid-area: 4 / 2 / 5 / 3;
}
.memberSinceContainer__0a28b .divider_d66e63 {
  display:none !important;
}```

and also the icons being on top while text is below them

[cunning fog]

i accidentally made roles have :3 in the middle of their color preview

i love it

[clear siren]

:3

[plain kelp]

Not an issue

[deep bane]

/* Centered watermark */
.wordmarkWindows__05c46 {
  position:absolute;
  left:0;
  right:0;
  width:max-content;
  margin:auto;
}
.wordmarkWindows__05c46::after {
  content:':3' !important;
  font-size: 12px;
  line-height: 16px;
}
.theme-dark .titleBar__01af6 .wordmarkWindows__05c46 svg {
  display: none;
}```

[solid ore]

tyy

[deep bane]

i really dont know why you had the selector you had before

[solid ore]

@deep bane wasn't mine

[clear siren]

lol thought that looked familiar

[solid ore]

lmao

[deep bane]

that selector doesnt even look functional

[clear siren]

it is

[deep bane]

i know

im just saying

[clear siren]

it looks for divider that does not have any divider following it

easy hack to get last of certain class

[deep bane]

yeah but as you said

:last-child

[clear siren]

when last-child or last-of-type don't care about classes you can do that

[clear siren]

that works if it is actually the last child, but why would a divider be the last child, isn't there something after it

[deep bane]

well in this case the notes box is removed

and the divider IS the last child

[solid ore]

i think its bc its hidden by the plugin

[solid ore]

if it was j hidden by qcss instead of the plugin it wouldnt work right?

[clear siren]

kinda silly if the plugin removes the notes but not the divider

but yeah

[deep bane]

thats why i said that someone should implement some changes to it

#🎨-theme-development message

[clear siren]

oh yeah

[deep bane]

the user right click context menu also still has the note button

and the big "modal" popout still has the notes header

[clear siren]

we're vencord development now

[deep bane]

crazy

[limber igloo]

Holla.

I managed to replace the close button, but I struggle to target the maximize & minimize button, someone got the classes/id's ?

[deep bane]

use devtools

or i could tell you them if you tell me the font you're using

[limber igloo]

It's Montserrat, what do you think ? Haha kidding, yeah it's called Montserrat, it's an over-used font tho be awared XD

[deep bane]

.winButtonMinMax__72f36[aria-label="Minimise"] ``.winButtonMinMax__72f36[aria-label="Maximise"]`

[limber igloo]

<L> love

[limber igloo]

Are you sure ?

[deep bane]

yes, why?

[limber igloo]

But, the close one works:

(same image source for the test)

[deep bane]

can you post the code

[limber igloo]

  background-image: url(https://gcdnb.pbrd.co/images/5Py6i6AU6NMm.png);
  height: 30px;
  width: 30px;
}

.winButtonMinMax__72f36[aria-label="Minimise"]  {
  background-image: url(https://gcdnb.pbrd.co/images/5Py6i6AU6NMm.png);
  height: 30px;
  width: 30px;
}

.winButtonMinMax__72f36[aria-label="Maximise"] {

}```

[digital pier]

try switching out the s for z in the aria-label

[deep bane]

no its s

unless youre on a different language

i guess

[digital pier]

no it depends on your language

[limber igloo]

I'm in French oh may be it's because of that ?

Ok got it

hehehehe

[deep bane]

yes

it is because of that

use devtools

[limber igloo]

Maximiser and Minimiser thanks a lot working

[limber igloo]

I know I know I tried but no chance

[deep bane]

its working now?

[limber igloo]

Yes 🙂

I am almost there... Is there anyway to hide svg, but only in one div ? Like I cannot achieve to hide default svg's and they are on top of it let me zoom

[deep bane]

:is(.winButtonClose__73489,.winButtonMinMax__72f36) svg {
  display:none !important;
}```

put the colon in front of the is

[limber igloo]

working yaaaaaaaaay ❤️ thank you so much

[limber igloo]

PlatformIndicator is the plugin

[deep bane]

can you post the css

[limber igloo]

/* ─── Avatar Sur Le Dessus. ──────────────────────────────────────────────── */
[class^="wrapper_"] {
  z-index: 4 !important;
}

/* ─── Couleur d'Arrière Plan Principale. ──────────────────────────────────── */
[class^="member_"] span[class^="username_"]::after {
  content: "" !important;
  /* background: linear-gradient(to right, currentColor, rgba(255, 0, 0, 0) 95%) !important; */
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  left: 0;
  top: 0;
  transition: 0.4s;
}

/* ─── Dégradé Sur La Droite. ─────────────────────────────────────────────── */
.memberInner_a32223 {
  background: rgb(0, 0, 0);
  color: transparent;
  transition: 0.4s;
}

/* ─── Contraste Inversé. ─────────────────────────────────────────────────── */
.memberInner_a32223 .username_d272d6::before,
.memberInner_a32223 .status_t8wrhb::before {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  background: linear-gradient(to left, currentColor, rgba(255, 0, 0, 0) 95%);

  /* ─── Effet Glossy ───────────────────────────────────────────────────────── */
  color: rgba(255, 255, 255, 0.267) !important;
}

/* ─── Effet Glossy #2 ────────────────────────────────────────────────────── */
[class^="member_"] span[class^="username_"]::after {
  background: linear-gradient(90deg, currentColor, #ffffff31);
  z-index: -1;
}

/* ─── Animation Passage De La Souris ─────────────────────────────────────── */
[class^="member_"]:hover {
  background-color: rgba(255, 255, 255, 0.233) !important;
  transition: 0.4s;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ─── Placement ──────────────────────────────────────────────────────────── */
.name__16feb {
  z-index: 3 !important;
}```

[deep bane]

is this your whole css or just the part you think might be causing this

[tawny dagger]

I've been trying to target this tooltip cause it pops up all the time and is annoying. But any combo of classes I use seems to effect all tooltips and not just this one. Any ideas?

<div class="theme-dark layer_ec16dd disabledPointerEvents_bb5546" style="position: absolute; top: 64.8px; left: 192px;"><div class="tooltip__01384 tooltipBottom_ba4564 tooltipBrand__13fbc tooltipDisablePointerEvents__14727" style="opacity: 1; transform: none;"><div class="tooltipPointer_a79354" style="left: calc(50% + 0px);"></div><div class="tooltipContent__79a2d">Your server is out of sync with your server template. Sync template?</div></div></div>

[plain kelp]

Don't think you can target tooltips on specific elements

[tawny dagger]

[limber igloo]

Soproud

[slim pond]

you can (kinda), it just wouldn't be very performant

[clear siren]

depends on the tooltip structure and elements within, you can do :has():not(:has()) etc

[plain kelp]

You could do :root:has(that-element:hover) .tooltip__01384 { display:none } perhaps

[clear siren]

hmm maybe

[slim pond]

you just get the hovered element with a has selector attached to say the app-mount element

[plain kelp]

If I wanted something like that I'd just patch out the tooltip in a plugin

[clear siren]

this doesn't fully work when some tooltips stay even when not hovering

like for me sticker tooltips tend to stay stuck

[leaden sequoia]

🇨🇵🇨🇵🇨🇵❤️

[plain kelp]

Why Clipperton Island?

[pure cairn]

tomorrow more like in 7 days just to figure out that it was actually easy

.container_b2ce9c:hover [class^="membersWrap__"],
.container_b2ce9c:hover,
[class^="membersWrap__"]:hover {
  width: var(--user-width);
}```

but at least now it works

[echo frost]

that's supposed to move the chat right?
at least on mobile, it's just zooming to fit

[bleak gust]

yeah i'm seeing how to revert the css to do that

[echo frost]

ah lmao

[pure cairn]

it used to

but then discord fixed the bug

[plain kelp]

I sent the css to fix it in #👾-core-development

[lament basin]

I'ma try it when I turn my pc on.

[pure cairn]

yup, works perfectly

[lament basin]

If only there was a way to do it on mobile.

[bleak gust]

just making a more "formal" solution

[rugged echo]

damn that actually works, I thought you needed js or something for that

[iron smelt]

ayoo when that theme dropping

[limber igloo]

When people's gonna be interested like you and when I'll find my CSS/JS partner hehe I need help for some things before release

[iron smelt]

well i can’t wait until that theme drops it looks really cool

[vestal field]

there's no fucking way 😭

[edgy sentinel]

lmao

[vestal field]

the fact that they named it "several small fixes and changes"

[gilded cloak]

Please post it in #🎨-css-snippets, vencord-dev is super busy and impossible to search

@plain kelp

[iron smelt]

real

ong

[limber igloo]

What if I want to change the background of the app ?

What's the target can't find it with the dev tool

[vestal field]

there's a lot of them

[limber igloo]

I found it but

I need to incorporate a video background.

I need HTML then.

[plain kelp]

Good point

Done #🎨-css-snippets message

[echo frost]

smh the piston should be turned upside down

[pure cairn]

Oh no

[grand surge]

Those are a lot of changes

[vestal field]

and none are meaningful

[grand surge]

💀😭 why the person change it then

[pure cairn]

So is it already out on stable again?

Or just happening soon™️

[grand surge]

My computer just boot looped for 10 minutes 💀

Finally turned on

[pure cairn]

Gaming, my phone did that for 2h yesterday

[grand surge]

Relatable

😭

[solid ore]

btw would this be less performant? (ik it would be negligible but j curious)

[clear siren]

it would be yeah, but it's really negligible unless you use * selector in it

[solid ore]

hmm ok thankss

[limber igloo]

Who is down to dev a video background with me. In .mp4

It is not THAT demanding, if we chose a 4K video but that is short and loops seamlessly

I need a partner 😢

[manic chasm]

would anyone know how to only display my profile frame on me and noth other pfp frames

[limber igloo]

Does it motivates someone no ?

[deft niche]

ok it looks sorta good but what the actual fuck

Round and pad it atleast 😭

[limber igloo]

what do you mean

[pure cairn]

to be honest, not really

[mellow arch]

You made some… bold choices

Reminds me of those early Jurassic Park toys

[pure cairn]

do I have to set a max-width in pixels if I want to use an ellipsis?

[plain kelp]

I don't think there is anything in css that cares whether you specify sizes as px or any other unit

[pure cairn]

then I guess it's just my code that doesn't work at all

I tried having embed titles with an ellipsis, but instead they just cut off without anything at the end

[plain kelp]

I think you need text-overflow: ellipsis plus overflow: hidden

[pure cairn]

ye, I had it

let me send the code

[class^="embedTitle"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}```

but it wouldn't work properly alongside this one

/* Better Quotes & Embeds */
blockquote, [class*="embedFull__"] {
  width: fit-content !important;
  min-width: 460px; /* allows YT cogwheel */
}
[class*="embedFull__"] {
  margin-left: 20px; /* set to 0 if embeds don't start from chat border */
  border-radius: 25px !important;
}
[class*="embedFull__"] .grid_c7c4e6 {
  margin: 0px 19px !important;
}```

me when the ellipsis does not ellipse

[dark dragon]

Should be set on the child

[deep bane]

This will definitely sound great out of context

[pure cairn]

my discord crashed again

[terse oasis]

is there a way to make timestamp display as 24 hour that doesn't involve setting locale to uk?

[deep bane]

no

also i dont think this is an appropriate question for #🎨-theme-development

[plain kelp]

Anything is possible with plugins, but it won't be easy

[deep bane]

make minecraft in discord

⠀

[plain kelp]

I'm sure there's a half-assed js port somewhere that one can import

[nimble owl]

anyone have a css for putting theme color behind the joined voice channel buttons on the bottom left?

[pure cairn]

Can you send a screenshot of what you mean?

[mortal knoll]

[pure cairn]

[terse oasis]

thought it might be possible with css sorry

[plain kelp]

Css can't change contents of stuff

[bleak gust]

no or you can make a plugin

[clear siren]

https://github.com/Vencord/plugin-requests/issues/1#issuecomment-1957949593

[iron smelt]

https://tenor.com/view/embed-no-no-embed-megamind-megamind-meme-gif-25261934

[grand surge]

hey anyone got an updated snip for swapping the order of vc spotify & the game activity status?

[slim pond]

too bulky?

also

why are scrollbars messed up in the latest vesktop

[digital pier]

https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121

[plain kelp]

That question has been answered a couple fozen times

[slim pond]

oh

so this is a thing now, huh

[fast cipher]

will get fixed soon

prob

just change a few lines of css

[deft niche]

Nah it's quite nice actually

I like the contrast with the background and the ui segments being seperated

[plain kelp]

I like that it differentiates the guilds from the extra buttons

[deft niche]

Yee that's what i was trying to say

You just said it 20 times better and actually made sense

[slim pond]

Dunno, I mean I like it

but I'm not sure if I should add it as mainstream or as an additional snippet

and dms stick to this dock

[pure cairn]

loving it, but this throws me off

[deft niche]

Yeah

also you should really hide the scrollbar

[deep bane]

you can just hide the background

[slim pond]

it creates too much of an issue with performance, so an addon it is

[elfin marsh]

das a nice theme, is it shared anywhere?

[slim pond]

https://github.com/DaBluLite/Cyan

[elfin marsh]

ty

[slim pond]

but you have to replace the import name

in the cyan.theme.css file, change import.css to import2.css (or alt.import.css if you're using vesktop)

[plain kelp]

How do you get custom image on the embed

[slim pond]

it's in the repository settings

[plain kelp]

Oh, this one?

[slim pond]

ye

[oak plover]

very clean, i like that a lot

[past bison]

I'll release a big update but i find a new thing to do on it always ><

what is the simpliest way to change the background of an element to a gradient, but also apply transparency to the background?

[plain kelp]

Just do a gradient with rgba colors?

[remote flax]

i was trying to increase members tab and managed to do it with the following command .container_b2ce9c { width: 280px;}but there is still something odd, names are not completely filling the designated area and still remain on the default tab size, how do i fix this?

there is a big space on the left of the names

[remote flax]

pls help

[past bison]

it's based on a variable without transparency (the default theme colors)

[rough iris]

if i want custom home icon do i edit in quick css editor??

i dont have any custom theme atm

[past bison]

custom icon where?

[pure cairn]

[class^="membersWrap__"],
.container_b2ce9c {
  width: 280px;
}```

Try with this

[devout elm]

u accidentally removed a dot :3

.container_b2ce9c

[pure cairn]

True

Thanks

Typing class names by hand on mobile is not a great idea

[solid ore]

#🎨-css-snippets message

[past bison]

.codeContainer__1ded4:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay-app-frame,var(--background-tertiary));
    opacity: 0.4; 
    z-index: -1; 
    border-radius: 5px;
}```
This works, i just tought there is a more simple way. ><

[pure cairn]

This looks amazing ngl

[solid ore]

how do i make a button make the mouse pointer go from the normal pointer to the hand clicking pointer

does that make sense

[plain kelp]

cursor: pointer?

[solid ore]

tysm

[solid ore]

how can i shrink the size of this class so that it's only the size of the progress bar itself?
class i'm using is #vc-spotify-progress-bar [class^=track_] but position absolute is default and keeps it like that

[remote flax]

that just basically did the same, just increased the widht of the bar, i want to increase the size of the content on the members bar

[pure cairn]

what do you mean by that?

increase font size? make the account names larger?

[remote flax]

increase the widht of the box size for each name and thing under it

[pure cairn]

well

[remote flax]

increasing of the bar itself doesnt increases the content of each name

[pure cairn]

this works for me

nvm it doesn't

let me find the class name

[remote flax]

thank you so much for taking your time to help me 😄

[pure cairn]

[class^="membersWrap__"],
.container_b2ce9c {
  width: 280px;
}
.member_aa4760 {
  max-width: 275px;
}```

mh no

[remote flax]

ye 😅 didnt work

do i need to know programming to do this? where i can find that info?

[plain kelp]

You can't write css without knowing how to write css

Or at least, not write good css

But css is not programming

[remote flax]

but how do i know what is the code for the specific thing that i want to do? like the members box size for each user

[dark dragon]

I think you're after this

.members__9f47b {
    max-width: 280px;
}

.member_aa4760 {
    max-width: unset;
}

[remote flax]

nope, didnt work

[pure cairn]

I have some css that collides with what I'm trying to do

[dark dragon]

Do you have a theme enabled? You might need to make the selectors a bit more specific or chuck an !important on the declarations.

Assuming this is what you want

[remote flax]

.members__9f47b { max-width: 280px; } for some reason the "max" was ruining it

it worked without it!

[dark dragon]

Ah, that's on me. That one has a width of 240px set on it by default. I removed it and forgot

[remote flax]

what does the max and mins stand for?

[plain kelp]

Maximum and minimum

[remote flax]

i know that

but that varies with the window size?

[dark dragon]

They cap the width at those breakpoints. So if you set max-width: 280px your width won't go beyond that even if you set you were to set a higher width

[remote flax]

oh interesting

thank you so much for your help!

[bleak gust]

i NEEEEED to clean up my quickcss

[solid ore]

how can i shrink the size of this class so that it's only the size of the progress bar itself?
class i'm using is #vc-spotify-progress-bar [class^=track_] but position absolute is default and keeps it like that

[chilly sky]

my quickcss:

div.scroller__4b984.thin_b1c063.scrollerBase_dc3aa9.fade_ba0fa0 > ul > li:nth-child(4), /* DM Shop Ad */
div.scroller__4b984.thin_b1c063.scrollerBase_dc3aa9.fade_ba0fa0 > ul > li:nth-child(3), /* DM Nitro Ad*/
button[aria-label="Send a gift"], /* textbox gift button */
[class^=nitroBadgeSvg__] /* nitro user badge */
.vc-rdb-review:has(span.botText__19848) {
  display: none;
}

[solid ore]

wat r u trying to hide w the first two selectors

there's surely a better selector

[chilly sky]

i dont think css has comments, but it hides the shop and nitro from DMs

[plain kelp]

Sure does

/* like this */

[chilly sky]

thanks, i'll update it

[plain kelp]

Sucks that it doesn't have // comments though

[solid ore]

there r beter selectors, 1 sec

[class^="channel_"] > div > [href="/store"], /* Nitro Button above DM List */
[class^="channel_"] > div > [href="/shop"], /* Shop Button above DM List */

[plain kelp]

Hiding those with css is kinda bad since it doesn't prevent keyboard nav

[chilly sky]

done

[solid ore]

wat would u do instead

[chilly sky]

i never used keyboard nav so i wouldn't have known tbh

i just think ads/upsells are ugly af

[solid ore]

@chilly sky these will still work if they change the order of them, whereas urs wont

[chilly sky]

thanks, i'll use them instead of mine

i just used the inspector tool and copied the selectors

[solid ore]

u might also be interested in this https://d3sox.me/complementary-discord-theme/hide-nitro-upselling.theme.css

[chilly sky]

thanks again 🙏

why does that css use 2 groups for the same property?

is there a selector limit per group or smth?

[solid ore]

i dont think so

[solid ore]

i think its j preference? someone correct me if im wrong

[solid ore]

https://raw.githubusercontent.com/tom22k/css-snippets/main/hide-nitro-upsell.css
this is my tweaked fork of d3sox's which has it almost all in one if u wanna compare

[proud token]

.nitroTopDividerContainer__4c8fd,
.premiumEmoji__2dbd7,
.premiumHeader_f78f97 {
    display: none;
}```
disgusting

more in your face nitro ads ;-;

[bleak gust]

get fakenitro

[solid ore]

i wasnt able to reproduce that, but i did find these extra ones:

#appearance-tab [class^=selectionGroup__]:has([aria-label="Exclusive to Nitro"]), /* customize icon section in appearance tab */
#appearance-tab section:has([aria-label="Exclusive to Nitro"]), /* customize colour background section in appearance tab */
#emoji-picker-grid [class^=nitroTopDividerContainer__], /* nitro top divider in emoji picker  */
#emoji-picker-grid [class^=nitroBottomDivider_], /* nitro top divider in emoji picker  */
#emoji-picker-grid [class^=upsellContainer_] /* nitro upsell warning in emoji picker  */ {
  display: none;
}

[bleak gust]

[solid ore]

also if u wanna completely hide all nitro exclusive emojis from the emoji picker, u can use this selector
#emoji-picker-grid [class*=categorySectionNitroDivider_] /* all nitro exclusive emojis */
warning: hiding this leaves a big gap

[proud token]

oh yeah this has been there for quite a while

the thing i sent is a new canary thing i believe

[solid ore]

ohh, im on stable

[solid ore]

yeah but they werent in the nitro upsell theme so i thought to mention it

[proud token]

yeah i was just thinking about pushing this to my theme

normally i refuse to remove anything discord adds even if it's an advertisement or patently useless

but i think that taking up 70% of your emoji selection popup for ads is next level trashy

[pure cairn]

the way you exclude a class while specifying the hover is
1st-class:not(2nd-class):hover, right?

[plain kelp]

You'd need . before the classes

But yes

[pure cairn]

Can it be . for the 1st class and # for the second one?

[plain kelp]

Well you can't use # for classes

That's ids

But yeah you can combine selectors any way you like

[pure cairn]

Great, so that's why it's not working

I'm treating it as a class when it's not

Thanks, I'll have fun fixing it tomorrow

[proud token]

as an additional remark, you can't just have display none on the original 3, you need ```css
.autocomplete_df266d:has(.base__76a71 + .nitroTopDividerContainer__4c8fd) {
display: none;
}

[pure cairn]

But shouldn't it still be working?

🤔

[plain kelp]

No, the wrong selector will (usually) not match the right thing

[pure cairn]

So it means that I can't just have
.class:not(#id):hover
?

Maybe
.class:not(id="#id"):hover?
Idk

[plain kelp]

The former is valid

The latter is invalid syntax

[pure cairn]

So it should indeed be working

But it's not
So the problem is not there but probably in another selector

Wish I could paste the code here, but I turned my laptop off

[dark dragon]

If you're 100% sure you got the selectors right, then it's probably just a specificity issue. Chuck an !important on it and see if it changes anything

[sweet lark]

hey please @ me if you make a thing that properly hides the emoji autocomplete nitro ad, its so fucking bad

i dont know css so i unfortunately cant help but its so bad

[sweet lark]

or post it to #🎨-css-snippets at least

[pure cairn]

heh, it was
I was selecting all user area (which includes the spotify controls panel) instead of just the bottom part

but now something else has broken, oh no

[grand surge]

can u add an svg on top of something which didnt have an svg with just css?

[plain kelp]

background-image can take any image format, including svg

[grand surge]

will try that, thank u

..how do i use that? i have the svg path but i dont know where to put it

[grand surge]

@plain kelp

[plain kelp]

Put it in a svg file

[grand surge]

ok 1 sec

[grand surge]

so in devtools its working but i cant see the svg on discord, im trying to overlay it on top of locked emojis and i think its behind them

[class*=categorySectionNitroLocked_] [class^=lockedEmoji__] {
  background-image: url(https://raw.githubusercontent.com/tom22k/css-snippets/main/svgviewer-output.svg) !important;
}

[plain kelp]

Yes, backgrounds are behind things

Consider using ::after

[grand surge]

it doesnt even show up in devtools, i think because there's an ::after already there

[past bison]

Why is this working in Vencord, but not in Vesktop?

.panels__58331 > div:nth-child(1):has(div)```

[plain kelp]

nth-child selectors are notoriously fragile

[past bison]

hmmm

it's bad ><

[grand surge]

[class*=categorySectionNitroLocked_] button::after {
  background-image: url(https://raw.githubusercontent.com/tom22k/css-snippets/main/svgviewer-output.svg) !important;
}

it's showing up in devtools but not on discord

[plain kelp]

Did you, like, make the ::after exist?

Styling something is no good if it's not there

[grand surge]

do u mean like this?

the ::after is there

[plain kelp]

No I mean like this

Documentation is often very useful for doing things

[grand surge]

so i have to put something in the content property, but if i put content: icon; it says invalid property?

[plain kelp]

Because icon is not a syntactically valid value for the content: property

[grand surge]

content: "🔒";
content: url(xxx.png);
content: url(xxx.svg);
neither of these work, but in the docs for content u should be able to do the url with image right?

[plain kelp]

content: "🔒"; should work

[grand surge]

its valid in devtools but doesnt appear over the emoji in discord

#emoji-picker-grid [class*=categorySectionNitroLocked_] button::after {
  content: "🔒";
}```

trying to make other servers emojis have the same lock as the first row which r locked because theyre animated

[past bison]

If my code is very ugly but it works and is not slow, is it okay? xD

[past bison]

.panels__58331 > div:nth-child(2):has(div):before, .panels__58331 > .panel_bd8c76.activityPanel__22355:before```
I solved it! it was the game activity bar, now it detects it perfectly 😄

[remote flax]

i was using the following code to reduce font size of "read all" buttom plugin
[class^=tutorialContainer__] + button { font-size: 12px;}
but its not working anymore with this material discord, any idea what to do?

already tried to ask the author

[clear siren]

add !important see if that helps

[remote flax]

already tried

[class^=tutorialContainer__] + button { font-size: 12px; !important; }

[plain kelp]

!important is not a separate statement, it's a modifier

[remote flax]

he managed to help me

.scroller__3d071 .lookFilled__19298 .contents_fb6220 { font-size: 13px; } fixed it

[deft niche]

Hey, i just swapped to linux and the font in my theme isn't working- the exact same css works fine on windows but it just displays as the default ugly fallback font

[plain kelp]

Does the linux have the required font installed?

[deft niche]

Yup

Not that it matters since i'm using an @import

[plain kelp]

You mean a @font-face?

@import has nothing to do with fonts

[clear siren]

google fonts uses imports to define a bunch of font face declarations

[deft niche]

Yee i'm using a google font

[past bison]

could someone help me? The first image is from Vesktop, the other is from Vencord. How can I make this to work in Vencord too?

[pure cairn]

"solved" by switching to emojis instead
work smart, not hard

[past bison]

pretty

[pure cairn]

/* Spotify Controls */
#vc-spotify-titles { 
  margin-left: 15px; 
}
#vc-spotify-titles > div:first-child::before {
  content: ":musical_note:";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-titles > div:nth-child(2)::before {
  content: ":microphone:";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-titles > div:nth-child(3)::before {
  content: ":cd:";
  margin-top: -6px;
  left: 65.5px;
}
#vc-spotify-album-image {
  border-radius: 10px;
}
[class*=vc-spotify-shuffle-on] > svg, 
[class*=vc-spotify-repeat-context] > svg,
[class*=vc-spotify-repeat-track] > svg {
  fill: var(--main-color)
}```

I have no idea if there's a better/more compact way to do it, but this works fine

[past bison]

more compact way 😂

[pure cairn]

https://tenor.com/view/too-tiny-ken-jeong-too-small-quinting-cant-read-gif-15407148

me trying to change song

[past bison]

it pops out 😂

[pure cairn]

ohhhh

that's cool

[past bison]

But i want to fix this bug

[pure cairn]

did you try with webkit-mask-image instead?

[past bison]

WORKS