🎨-theme-development

[crimson skiff]

can you disable it and use gibbu's version?

[stark epoch]

i can try to remove the horizontal this theme uses and swap it out for gibbus

ok so i cant replace however i have noticed its so so close

i got it, its weird but i got it

setting the heigh to 48% on them allows them to be small enough to not overlap

they just look like some weird one lon cohesive bar, ill find a way to add a seperator thing at somepoint

[subtle sedge]

.content__99f8c:has(+div>.colorStreamerMode__6e2b9) :is(.peopleListItem_cc6179) {
    opacity: 0;
}

tryna make everything opacity 0 thats peoplelistitem but doesnt work

supposed to hide these and each friend from the ui by opacity 0

@echo frost @crimson skiff

it works when i do i manually

did i forget style?

.content__99f8c:has(+div>.colorStreamerMode__6e2b9) :is([style*="opacity: 1"]>.peopleListItem_cc6179) {
    opacity: 0 !important;
}

tried this and it didnt work

[crimson skiff]

@subtle sedge what exactly do you want?

[crimson skiff]

why is there two bars? the big one and the really small one at the ottom

[subtle sedge]

@crimson skiff trying to make it so that it hides every user in friends list when streamer mode is enabled

[crimson skiff]

hides user as in hides their display/username or that section is just yeeted into the void?

[subtle sedge]

each friend button is hidden

look at the image

go on ur discord home and it will automatically show your friends list

the script will hide each person, similar to manually editing the opacity of each one to 0

[crimson skiff]

so you want the list to be yeeted?

[echo frost]

you could do something much cleaner to censor them

like use the font used in this snippet
#🎨-css-snippets message

[subtle sedge]

yea each one will have its opacity ser to 0 so it’s invisible

basically

and when it’s turned off it will return to 0

[subtle sedge]

i see

but whay did i do wrong?

cuz my script doesn’t hide them regardless

accurate class names etc

[subtle sedge]

@crimson skiff @echo frost

[crimson skiff]

wait fixing another guy's snippet

@stark epoch what exactly do you want to do with the extra sidebar from better folders?

[crimson skiff]

@stark epoch test if this suits you

[class*=container]:has(> [aria-label="Servers sidebar"]) {
    [class^=folderEndWrapper] {
        display: none;
    }
    > div > nav {
        transform: rotate(-90deg);
        transition: transform 1s ease-in-out;
        z-index: 200;
    }
    &:hover > div > nav {
        bottom: 100px;
        transform: rotate(-90deg) translateX(-100%) !important;
        [class^=itemsContainer] {
            border-radius: 25%;
        }
    }
}

[stark epoch]

Sorry i was asleep by that time, The only weirdness with that is that hovering over any part of discord makes it move down and cover parts of discord, otherwise yeah that looks like what i was wanting

[edgy sentinel]

this looks like it'd perform horribly

[burnt maple]

check every container for servers sidebar clueless

:has() so good but the people behind css should optimize it with dark magic

[half crystal]

me omw to make a fork of electron that does that and nothing else:

[burnt maple]

how do i pay you to do that

[half crystal]

you cant
i dont code in like fucking anything apart from html, css and scss

but if you pay me high enough, i may learn c++ to do just that

[iron smelt]

scss reference

[half crystal]

makes css silly by giving it actual logic

useful but
silly

[clear siren]

people behind chromium had it optimized to some extent but discord unoptimized it with their darker magic somehow

[burnt maple]

someone ought to find whatever discord changed that made it lag css tf out

[stark epoch]

Oh both of his css perform horribly as they use that method, however there seems to be no other way and its not bad enough for me to care to find a way myself

[subtle sedge]

@iron smelt any help with this?

[iron smelt]

I don’t even know what you’re trying to accomplish with this

[subtle sedge]

when streamer mode is enabled, it hides each user in the friends list by setting its opacity to 0

[bleak gust]

You're trying to detect the notice at the top of the screen. If you close it, your CSS obviously won't work.

There is currently no way to detect it other than by keeping that open, so many months ago I opened a PR to fix that. It's been ignored though

[crimson skiff]

that's the point

[iron smelt]

Might be the worse thing I’ve ever cooked

Commit 32a6753

[crimson skiff]

isnt that bad ngl

[subtle sedge]

that’s the point

it works witj another script

i just don’t know what’s wrong with the opacity

[subtle sedge]

@bleak gust

peopleListItem_cc6179 is each button

[crimson skiff]

[class*=layer] > [class*=container]:has(> [aria-label="Servers sidebar"]) {
    [class^=folderEndWrapper] {
        display: none;
    }
    > div > nav {
        transform: rotate(-90deg);
        transition: transform 1s ease-in-out;
        z-index: 200;
    }
    &:hover > div > nav {
        bottom: 100px;
        transform: rotate(-90deg) translateX(-100%) !important;
        [class^=itemsContainer] {
            border-radius: 25%;
        }
    }
}

extra descendant selector, happy now?

[subtle sedge]

someone assist me 💔

[crimson skiff]

i just learn that -webkit-text-security is a thing, and it seems to work for evey character, so yeah

[echo frost]

oh nice

i think the font used in that snippet looks a bit better, but -webkit-text-security would be nice for some situations

[subtle sedge]

i give up

[echo frost]

how's this

:root {
  --censored-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%2326262c'/%3E%3Ctext xmlns='http://www.w3.org/2000/svg' x='50%25' y='50%25' fill='%23dbdee1' dominant-baseline='middle' text-anchor='middle' style='font-size: 48px'%3E-%3C/text%3E%3C/svg%3E");
}
.colorStreamerMode__6e2b9+.content_c48ade .peopleListItem_cc6179 {
  -webkit-text-security: disc;
  img {
    content: var(--censored-icon);
  }
}

and now that the censored icon is a variable, you can change the other snippet to use var(--censored-icon) instead of the whole svg

@subtle sedge ^

[echo frost]

the class you used was already under the streamer mode banner

and in this case :has() isn't even needed. it's under the banner's sibling (.content_c48ade) so just the sibling selector works in this case

[crimson skiff]

for icons, i just blur it out a lot, thats what i did for my beeper snippet

[half crystal]

WHAT THE FUCK HAVE I DONE 😭

[half crystal]

ok so messing with this element in any way now kills the channel list

[burnt maple]

.vc-ranb-button {
  display: none;
}

read all button doesnt have hash for whatever reason

[iron smelt]

because Vencord adds that element

[burnt maple]

oh

[iron smelt]

Hence the .vc-

stuff Vencord adds doesnt have hashes

[burnt maple]

why did vencord add it

and what does ranb stand for

[lunar hamlet]

style.css: Lines 1-11

.vc-ranb-button {
    color: var(--interactive-normal);
    padding: 0 0.5em;
    margin-bottom: 0.5em;
    width: 100%;
    box-sizing: border-box;
}

.vc-ranb-button:hover {
    color: var(--interactive-active);
}

[iron smelt]

idk just whoever made the CSS decided on naming it

[iron smelt]

So they could style the read all button

[pure cairn]

read all (something starting with N) button

[plain kelp]

Notifications perhaps

[pure cairn]

Makes sense

[burnt maple]

i miss legible class names

[pure cairn]

It is legible wdym

Would you prefer .button_hs6hg2

[clear siren]

h, s and g in my hex?

[burnt maple]

is .readall-button too much to ask for

[echo frost]

.vc-readall-button

[vernal ginkgo]

Hello I put the text channel to the left in vc with this:

/* Reverse chat in vc */
[class^=chat_] > [class^=wrapper_] {
  flex-flow: row-reverse;
}
[class^=layerContainer_] [class^=chatLayerWrapper_] {
  right: unset;
  flex-flow: row-reverse;
}
[class^=pictureInPicture_] * {
  z-index: 1002;
}

But the resize direction isn't right, Ive to drag to the left to increase the window instead of the right, can I fix it?

[supple tartan]

guys, what code is more optimized? 1 (nested) or 2 (plain)?
context: I'm trying to integrate a snippet from here into my theme

[iron smelt]

as far as I have observed, it doesn’t really matter when it comes to optimization. An it’s more up to what do you think looks better…

Like yes nesting makes it more clean and looks nice, but can be more difficult to read for people who’s just starting out.

[supple tartan]

oka, so it's up to my taste then, thanks!

[iron smelt]

As far as I observed at least… given some of my CSS’s nested and some of mine isn’t

[echo frost]

for that case, there's so much duplication without nesting, so I'd say thats a perfect use case of nesting

and yeah nesting doesn't cause lag

[supple tartan]

ª

well... back to nesting

[echo frost]

although it can get a bit hard to read when using many layers of nesting

[iron smelt]

but can be more difficult to read for people who’s just starting out.

[echo frost]

I thought you meant people who don't understand nesting syntax

[iron smelt]

well, yeah… most people who’s just beginning starting to develop CSS

Since nesting is a pretty advanced thing

Something you should learn early, but it’s still advanced

[subtle sedge]

ah i see, thanks

[smoky belfry]

imo if you get nesting, it's better because it mean that you can kinda match the css you see with the HTML

also nice use of my snippet 👍

i would guess that not nesting help for diff tho

i might start to just offer both

[still quiver]

Two things I previously used preprocessors for... variables and nesting. Glad they're both in native CSS now!

[plain kelp]

Css variables and preprocessor variables are different things though

But some of the use cases overlap

[dusty willow]

Is it possible to change a theme to add borders to the usernames?
I have the AMOLED theme and some users have the black color in the username, making it unreadable. Wanted to add a small border in a color that would be readable

[vestal field]

i think u can do this
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

[half crystal]

yo this is new

[vestal field]

i've had it for like a couple days now

if you mean the new image view buttons

discord seems to be running a lot of ui experiment testing

[half crystal]

i mean the complete redesign of the image viewer
the once in a blue moon good discord update has come to pass

[vestal field]

yeah thats what i meant

[smoky belfry]

I find it kinda good-ish
But i just want them to make an actually good zoom like the plugin

Like why make a zoom to limit it...

[supple tartan]

good point too

[supple tartan]

A_Fubuki_xd

I was hesitating between using different snippets separately as modules or combining them all into one big theme. In the end, having them separated was getting annoying, so I ended up combining them, so I could also make small edits to them if needed

and so I could make this

[crimson skiff]

thats actually super neat lmao, really nicely made

[supple lodge]

Pretty cool!
Also do you have the code for the bottom profile, like name centered and mute buttons etc above? Thank you :3

[smoky belfry]

It's right there
#🎨-css-snippets message

[supple lodge]

ah thanks a lot

[supple tartan]

thanks

[dusty willow]

i think that is only for texts, I was searching more for usernames in general, for example, the username of a user that is black, I can't see his name in the voice chat, I have to check it's profile to be able to see its name

[supple tartan]

guys, what header looks cooler for the server name?
1.

or
2.

[iron smelt]

1

[half crystal]

2

[rancid bronze]

Hey! I've spent some time trying to change the appearance of the "New unreads" popup using the QuickCSS feature but it doesn't seem to work. More specifically, I looked up what class it uses and tried to override the background-color property, but it doesn't seem to work. Any clue on how to change it?

or

[half crystal]

did you use !important?

[rancid bronze]

I did, but nothing seems to happen

[half crystal]

what are you selecting?

[rancid bronze]

bar__7aaec

[half crystal]

try adding #app-mount before it

[rancid bronze]

Doesn't work

[burnt maple]

1

[crimson skiff]

feels a lot better while it has a different color and stands out

[echo frost]

are you putting a . before that? e.g. .classname

[rancid bronze]

Yes

[hazy tinsel]

when i'm deafened this invisible square appears and i dont want that there ive tried almost everything in CSS and it wont go away it's related to Soundboards

here's the HTML

i just wanna remove that invisible square from being shown when deafened

related to Soundboards being disabled.

[grand surge]

theme question: I cannot find --red-400 defined in my theme file. Is that a discord built in color?

[iron smelt]

Yes, it’s one of their built-in variables.

https://docs.betterdiscord.app/discord/variables

^ I’d recommend looking through this. It’s a good list of every discord variable

[grand surge]

alright, I am just trying to figure this theme out to reverse SOME of the colors to default discord

[vestal field]

crazy shit

[grand surge]

it says var(--red-400);

[crimson skiff]

best option is to litereally go to react devtools and in the styles section, search for your variable

[grand surge]

thats what im doing right now

i have discord devtools in a split screen with my text editor

[crimson skiff]

actually fire though

[iron smelt]

Or just use the list

The one that already exists

[grand surge]

lol i got so confused because the variable i was looking for was defined in two places, one was the real value and one was the --red-400

i figured it out lol

plus i only remembered the styles tab in devtools yesterday

[iron smelt]

I mean, yeah that does help but you really only need the QuickCSS editor and
https://www.w3schools.com/Css/
https://developer.mozilla.org/en-US/docs/Web/CSS
https://docs.betterdiscord.app/discord/variables

[grand surge]

now right now im trying to find --button-filled-brand-background, it doesnt seem to show up on the betterdiscord link or in my theme

according to dev tools it is defined

i might search my theme file for the hsl values

apparently it resolves to --accent-3 in my theme file based on the hsl

the strangest thing is that .lookFilled__201d5.colorBrand__201d5 doesnt appear to be defined by my theme file, although there is a line that has that string in it

.defaultColor__77578

I cannot find where .lookFilled__201d5.colorBrand__201d5 leads to --accent-3

even stranger, deleting the definition for --accent-3 does nothing

(to the element in question), other stuff is affected

I just discovered that multiple elements can have a single definition, that makes that a lot easier to find

[hazy tinsel]

can someone help me 🙏

[grand surge]

I am so intensely confused

now im tired

what the crap css

[echo frost]

wait what
where's the styles section in react devtools
i only know of the one in normal devtools under elements

[echo frost]

it's working for me

might be a theme conflict

[echo frost]

What theme are you using

[crimson skiff]

wrong name i think
I'm stupid

normal devtools

[echo frost]

ok

[hazy tinsel]

its when ur deafend in call

oh mb wrong thing

[hazy tinsel]

uh

im using client theme +

[echo frost]

i can't reproduce it

how are you disabling soundboard

this is what it looks like for me

ig soundbaord is disabled in this server

[hazy tinsel]

All it says is

Soundboard is disabled when deafened

idk how to reproduce

i just join a vc and deafen and it shows a not highlighted soundboard icon with that text when hovering over

i sent the html above

@echo frost i’ve tried disabling it but it doesn’t work it still shows

[echo frost]

all of your css?

[echo frost]

but there's no soundboard button in this ss

[echo frost]

you're talking about the empty space on the right, correct?

[subtle sedge]

Is there a better way of doing this?

.colorStreamerMode__6e2b9 [class*="timestampInline_"],
.colorStreamerMode__6e2b9 [class*="timezone-message-item"],
.colorStreamerMode__6e2b9 [class*="timestampVisibleOnHover_"],
.colorStreamerMode__6e2b9 .timestampInline__430cf,
.colorStreamerMode__6e2b9 .contents_c19a55 .timestampVisibleOnHover_c19a55 {
    opacity: 0;
    visibility: hidden;
}

doesnt seem to work

:P

all the classes r supposed to be hidden

dont know whats wrong

all the classes work by its self

trying to make it so when the streamermode notice is show nat the top it sets each class to hidden

[subtle sedge]

@echo frost @crimson skiff what do u find wrong with these?

they are supposed to hide the timestamps on messages

[crimson skiff]

its checking the descendant, which wouldnt work

@subtle sedge

.colorStreamerMode__6e2b9 + .content_c48ade { 
    [class*="timestampInline_"], 
    [class*="timezone-message-item"], 
    [class*="timestampVisibleOnHover_"], 
    .timestampInline__430cf, 
    .contents_c19a55 .timestampVisibleOnHover_c19a55 {
        opacity: 0;
        visibility: hidden;
    }
}

[subtle sedge]

ohh

thanks

css pro

[crimson skiff]

i probably wont ever get a special role, mods defo regretting that they gave me the snippet dev

[echo frost]

better to use :is()

.colorStreamerMode__6e2b9 + .content_c48ade :is( 
  [class*="timestampInline_"], 
  [class*="timezone-message-item"], 
  [class*="timestampVisibleOnHover_"], 
  .timestampInline__430cf, 
  .contents_c19a55 .timestampVisibleOnHover_c19a55
) {
  opacity: 0;
  visibility: hidden;
}

@subtle sedge the version using nesting will work, but this is a slightly better way to do it that doesn't cause an empty ruleset

[crimson skiff]

never knew how :is() works

[echo frost]

using nesting causes this

[crimson skiff]

yeah i know that

[echo frost]

it's very useful and pretty simple https://developer.mozilla.org/en-US/docs/Web/CSS/:is

[crimson skiff]

so its parallel nesting

[echo frost]

hm?

[crimson skiff]

when you have multiple combinations using the same theme

[echo frost]

it's basically or

[crimson skiff]

yeah

use :has with :is

[echo frost]

i dont think you need :is() inside :has()

or maybe using commas inside :has() is like and

i don't remember

seems like it's like or

[narrow acorn]

Made a recolor for the comfy theme

didnt mean to reply mb

its 6am and have not slept

its technically broken but I think it looks nice use it for spotify

[hard rampart]

does anyone know postcss plugin to transpile/polyfill :where, :not, :is?

[plain kelp]

Why

None of those can be desugared anyway

:not is very obviously impossible, and :where and :is have different specificity than the closest desugared forms (plus combinatorial explosion)

[grand surge]

cant find chatHeaderBarButtonInner_dc83f5

why discord, why

[grand surge]

I gave up

[rancid bronze]

it's working for me

[hazy tinsel]

Yes

[hazy tinsel]

because its invisible yeah im hiding the soundboard element but its still being shown when deafened

[echo frost]

can you send your css

[echo frost]

oh wait it's this isn't it

(I'm on mobile rn)

[hazy tinsel]

ya

that invisible space to the right

[echo frost]

wait no that's not css

that's html

[echo frost]

please send your css, that is html of some element

[iron smelt]

I guess now is it good as time as any

[crimson skiff]

anyone else wants to suggest stupid themes?

[echo frost]

lagcord

make discord as laggy as possible

and preferably makes computer explode

[iron smelt]

ok devilbro

[crimson skiff]

nested :has selectors lets gooooo

[echo frost]

use that and other types of l;ag

likke animations and forcing discord to reposition things but resizing

[crimson skiff]

probably a shit ton of animations and transitions

*:has(*) {
    transition: transform 100s ease;
    transform: rotate(1800deg) !important
}

@echo frost

[echo frost]

i feel like :has(*) won't be laggy because it'll stop checking after the first child?

[crimson skiff]

thats how it works?

[echo frost]

i'd hope so

[crimson skiff]

because when I tried it, discord became blank

it checks every element for an element and transitions it over a long period of time

[echo frost]

I think this feels laggier than :has(*)

*:has(.fakeClassName) {
  opacity: 0.9;
}

[crimson skiff]

so it will check everything

what if you add in an attribute selector

[echo frost]

yeah ithink so

[crimson skiff]

*:has([class*="suchacoolclassname"]) {
    transition: transform 100s ease;
    transform: rotate(1800deg) !important
}

[echo frost]

yeah that's definitely better than using an actual class

[crimson skiff]

having an animation itself would work
but i cant see animations because of reduced motion i think

[echo frost]

i can't really test how laggy css is because my discord is already laggy from playing bloons

i closed bloons and discord is barely lagging anymore

the sacrifices i must make to lag discord

[echo frost]

@keyframes lag {
  0%, 100% {
    box-shadow: 0 0 100px hsla(0, 2%, 0%, 0.004), 0 0 200px hsla(0, 2%, 0%, 0.004), 0 0 300px hsla(0, 2%, 0%, 0.004), 0 0 400px hsla(0, 2%, 0%, 0.004), 0 0 500px hsla(0, 2%, 0%, 0.004);
  }
  50% {
    box-shadow: 0 0 105px hsla(0, 2%, 5%, 0.004), 0 0 205px hsla(0, 2%, 5%, 0.004), 0 0 305px hsla(0, 2%, 5%, 0.004), 0 0 405px hsla(0, 2%, 5%, 0.004), 0 0 505px hsla(0, 2%, 5%, 0.004);
  }
}

* {
  animation: lag 20s infinite alternate;
}

@crimson skiff rate it

probably worse with lower duration

i crashed discord with 2s

i think that's mission successful

[crimson skiff]

it took a while to crash, but it did crash

[vestal field]

try 0.2s

[river notch]

anyway to return the display of pictures as it was a few years ago so that you do not have to open the picture to see it all and immediately was full?

[echo frost]

there's a plugin to do that

gallery something maybe?

@river notch

[exotic scaffold]

How does Vencord display the meta of a theme/plugin? Just the same as BD?

Or what is the "recommended" way to create a theme for Vencord?

[whole roost]

guys how do i remove this shit

the message hover

its annoying and useless

ok figured it out

.buttonContainer_c19a55 {
display: none !important;
}

beautiful

no hover time or menu

[crimson skiff]

I assume so, not sure what you mean by 'meta'

[crimson skiff]

abuse quick css

[exotic scaffold]

Meta = the theme name, description, author, source location, ect...
Tell the mod to display information about the theme/plugin

[vestal field]

its exactly the same iirc

you should need no changes

[exotic scaffold]

Nice nice

[crimson skiff]

dont want another xkcd/927 to happen, do we?

[echo frost]

I made this which collapses them except on hover
#🎨-css-snippets message

if you still want to be able to use them without them taking up a bunch of space

[whole roost]

great way to solve it

i find it annoying and never use it

so i just removed it

looks very clean

[whole roost]

how do i completely hide the activity panel?

if i hide it normally it leaves too much space

.container__0f2e8 {
display: none !important;
}

.headerContainer__095fe {
display: none !important;
}

thats where the collapsed activity header is

[whole roost]

div[aria-expanded="false"][role="listitem"] > .container__0f2e8.openOnHover__0f2e8 {
    position: absolute !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

    .membersGroup_c8ffbb.container__13cf1.text__13cf1:first-of-type .hiddenVisually__27f77 {
    display: none !important;
}

.membersGroup_c8ffbb.container__13cf1.text__13cf1:first-of-type {
    display: none !important;
}

this worked

probably shabby solution

[slim meadow]

https://github.com/Bakushou/hkcord/tree/main

No idea why this isnt working
the mistake must be oh so small
Sublime even
Yes I did check that the bgimg link was correct

[real quarry]

not sure if this is the place to go for Quick CSS help, but lately i've been lagging real hard while Quick CSS is enabled and i was wondering if anyone knew which CSS rules are notorious for killing FPS while in Discord

my Quick CSS, if anyone wants. yes i use comic sans in discord.

[ ping if replying, please ]

[burnt maple]

a lot of [class^="class"] and :has() is inefficient

[vestal field]

wow

that is actually insane

[echo frost]

oh I didn't even notice that from my quick look on mobile with text wrapping 😭

[crimson skiff]

what the actual...

[echo frost]

if you have to use :has(), make sure to use > or + so it doesn't have to search every single one of its children

[crimson skiff]

thats insane

[crimson skiff]

wait so is your background image https://raw.githubusercontent.com/Bakushou/hkcord/refs/heads/main/hollow.jpg or https://i.imgur.com/mWV9S97.jpg?

[crimson skiff]

thats much worse than my snippets bruh
you are so cooked

[crimson skiff]

it wasnt his fault, its a snippet from someone else

@import url(https://cdn.discordapp.com/attachments/1008439556619636777/1232284525363724329/NewIcons.css?ex=6628e5e5&is=66279465&hm=c3ad6679a86ad4babc59f4df753de1727d4f847cc5f53a049a639848b291452c&);

but like really, discord will definitely change the query params after a while, it isnt as futureproof as your other css codes
but like previously said, tell that guy to use exact descendant selectors > inside :has() to miminise the lag that you would otherwise not face

[real quarry]

yeah none of this is mine btw i just slapped a whole bunch of stuff from #🎨-css-snippets

i guess for now i can just cmoment out the problematic css rules

[real quarry]

ok i removed a lot of the :has() rules (most of them from the profile connections CSS snippet)

i'll be back if it lags hard again

[crimson skiff]

/* hide edited messages until clicked and held on */
@keyframes itsEdited {
    /* show that it is edited through a subtle animation */
    0% { filter: brightness(100%) }
    100% { filter: brightness(80%) }
}

[id^="chat-messages"]:not(:active) .messagelogger-edited {
    height: 0;
    overflow: hidden;
    display: none !important;
}

[id^="chat-messages"]:not(:active):has(> div > div > div > .messagelogger-edited) [id^=message-content] > span:not([class^="timestamp"]) {
    animation: itsEdited 2s infinite alternate ease-in-out;
    + [class^="timestamp"] { color: #aaa !important }
}
``` made this snippet for fun, opinions?

[echo frost]

oh nice

kinda doesnt work to scroll to see it though

also it prevents you from clicking the edited to open the edited history modal

[crimson skiff]

can click on the edited button, not that hard tbh

[echo frost]

oh yeah actually yeah i can do it now

[crimson skiff]

or maybe should i make a snippet to make the edited thing cover the entire mesage, so clicking on it automatically opens the preview

[echo frost]

huh

that seems bad

and ican't tell if you're joking

[crimson skiff]

idk, you said you had difficulty

[crimson skiff]

not sure what do do about that

unless you want it to activate on hover

[echo frost]

i wonder if it would be possible to make those edit history messages first appear when clicking, and then stay while hovering over them

[crimson skiff]

maybe with vars?

[echo frost]

huh

how would that work

[crimson skiff]

wait lemme tinker around first

nvm it doesnt work
thought you could bring over a variable from the :active state to the :hover state

- [id^="chat-messages"]:not(:active) .messagelogger-edited {
+ [id^="chat-messages"]:not(:active) .messagelogger-edited:not(:hover) {

@echo frost what about this?

damn discord supports .diff syntax highlighting, just tried it for fun

[echo frost]

doesn't quite work

[crimson skiff]

you have to hover over the edited log thing for it to stay

[crimson skiff]

its super gimmicky yeah, not sure how i can ever fix it

css issues

[echo frost]

i wouldn't call it gimmicky

i'd call it janky

and almost all cool css is janky

[plain kelp]

I prefer just clicking the (edited)

[blazing pivot]

What CSS would I need to h i d e S h o p?

[pure cairn]

[href=/shop] {
  display:none
}```

Why is that staying there
I hate you

[dusty tusk]

I kept using this so far but discord fokkin changes the id constantly

[data-list-item-id="private-channels-uid_2754___shop"]{
  display: none;
}```

if anyone knows a solution I'd be very happy :3

[blazing pivot]

Oh so it's an arms race

Probably just inspecting the element whenever it changes

Or see if css supports regex

They already changed it

Unless it's different for every user

[dusty tusk]

wait nvm this works

just slightly different

[href="/shop"]{
  display: none;
}```

this

works :D

its shop and store I forgot which one is which

[dusty tusk]

i hope its oke to ping

[pure cairn]

Yes

[blazing pivot]

Whee

[pure cairn]

store is the nitro tab, shop is the profile decorations one

[proper ivy]

how do u change the default profile colors now? (I wanna change the background where text is)

I tried to use
profile-gradient-primary-color: but it doesnt make a difference

[crimson skiff]

not sure why you use 'element.style', have you tried ':root'?

[proper ivy]

yep! i used element.style since the source says so

[crimson skiff]

ohh umm sorry to break the news but element.style means it is added to the element via html
you need the specific attribute to select it

[proper ivy]

oh

ill look into more detail

[vestal field]

add !important to each one

and you're probably gonna have to apply it to profiles with a certain default class, otherwise it will theme all profiles

[proper ivy]

tried it no change

actually if i select user from member list it works but when i try to check their profile through normal dc chat it doesnt work

[echo frost]

will a lower down defined var override one in :root that uses important?

ok ig not then

[clear siren]

:root is just html but with higher specificity

html is 001 :root is 010

[plain kelp]

Plus, :root matches the root element while html matches <html> elements

In most html pages there exists exactly one <html> element which is at the root so there's no difference

[clear siren]

and you can also make a chain like :root:root to add specificity

yeah

[plain kelp]

But :root would hit the root in svgs too, and I don't think there's any rule against having multiple <html> elements even if that would be quite silly

[clear siren]

The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element. There can be only one <html> element in a document.

[plain kelp]

Huh, TIL. data:text/html,<html><body><div><html><div>foo

[half crystal]

i reimplemented the GC call ui in VCs
the code behind this is pure spaghetti

[echo frost]

google chat?

wait group chat

is the group chat ui different than vc?

[steep wigeon]

i just did something

revolutionary

to my theme

🐱

all emojis are now greeen!!!!!!

woooooooooooooooooooooooooooooooooo

[tall lion]

Woah wtf! I first thought you just put a filter over it but no!

[steep wigeon]

heres how i did it

.emoji {
    filter: sepia(5) hue-rotate(400deg) saturate(2);
}

hue rotate is probably a little cursed but

i dont care

it works

for example for blurple stuff i just use a 610deg

it works really well

add ```css
.emojiImage__13533 {
filter: sepia(5) hue-rotate(400deg) saturate(2);
}

for making the auto complete thingy green aswell

this

.emojiItem_fc7141 {
    filter: sepia(5) hue-rotate(400deg) saturate(2);
}

im gonna stop talking now

im floodin the chat

[vestal field]

lol

the dark arts of css filtering

[supple tartan]

guys, how can I do the same as the first img?
I tried adding .menu_c1e9c4 {backdrop-filter: blur(40px);} but it breaks sub-menus (2nd img)

[echo frost]

look at the css for the acrylic popups that you got that image from
#🎨-css-snippets message https://s-k-y-l-i.github.io/discord-themes/Theme code/transparent-popups.css

@dense creek ^

sorry wrong eduard

[echo frost]

@supple tartan ^

oh ig that snippet broke

might still be able to use it as reference though

[supple tartan]

oh nicee, I'm gonna try it

btw, I have an idea for a plugin I would like to request. It's just a decorative plugin, nothing useful enough to be included in vencord xd, but maybe as an unofficial plugin(?) where can I request that?

[echo frost]

there isn't anywhere to request plugins anymore

[plain kelp]

Since it got clogged up with junk, as predicted

[supple tartan]

😔

[supple tartan]

my idea was for a plugin that would grab the first image/gif from the channel/thread and display it as a header for that channel.

real utility? none , you will only see it when the channel/thread is newly created or read only (In my case, I tend to visit quite a few channels like this, so it's a nice detail)

right now, I can add a static image/gif with CSS, but it would be great if it were dynamic.
What do you think about this idea?

[silver shard]

if you can get it working please put it in https://discord.com/channels/1015060230222131221/1028106818368589824 I cant figure out how to make the pop ups work either

[vestal field]

lol im pretty sure its not possible

if you apply a backdrop-filter onto something it will reset the position fixed origin

and the positioning is hardcoded in by discord's js so you can't really get around it

[silver shard]

that sucks thats probably why my css wasnt working

[vestal field]

actually, maybe you could try setting top 0 left 0 on it or something

im not sure

[subtle sedge]

is there a css script that hides a specific user id(s) from the friend list tab?

[echo frost]

that could be made pretty easily, but why?

[grand surge]

you mean hide from displaying whole thing related to them?

[subtle sedge]

like the profile

[subtle sedge]

idk annoying usernames/activitys/etc

usually on default discord start up it shows ur online friends list

a css script that can hide one or multiple users from being displayed on the friends list

[supple tartan]

I'll try, but I don't guarantee anything

btw, any idea on how to make replied messages cooler?

[silver shard]

you could try to set a custom gradient

[half crystal]

animated border color

[supple tartan]

@silver shard well looks like I did achieve something || (I have absolutely no idea how to see the classes of the submenu)||

[silver shard]

sweat

[plain kelp]

F8break?

[supple tartan]

if I press F8 and leave the submenu, it disappears as normal

[echo frost]

don't leave the submenu then?
you might not be doing it right

you could run this in console setTimeout(debugger, 3000) to trigger the break 3s after sending though

[errant jetty]

I want to style the channels immediately before and immediately after the selected channel, so I can get a certain effect. However, all my selectors are instead targeting ALL channels before and ALL channels after the selected one. What's the best way to go about this?

My current selectors:

/*style the channel before the selected one*/
ul[aria-label="Channels"] li:has(~li.selected_12345) {}

/*style the channel immediately after the selected one*/
ul[aria-label="Channels"] li.selected_12345~li {}

I'm using the aria-label in the ul selector because I did this before on the browser version of discord and then all the numbers at the end of the classes changed and broke the theme right after I finished it.

Obviously I have more selectors to style the other things in the list like channel groups and threads, but I want to get a good idea of how best to go about doing what I'm trying to do.

[vestal field]

use + instead of ~

https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator

[errant jetty]

Thanks, I knew it had to be something stupid.

While I have you here, how do you use classes in selectors when they've got those alphanumeric bits at the end that seem to change without notice?

[vestal field]

i recommend you just use the class directly, they only change every couple of months and you will get better performance (css performance on discord is pretty shit)

you can update them using the class updater tool if they do actually change

[errant jetty]

The what

[vestal field]

but if you really really don't want to do that then you can do

[class^="class_"] 

[vestal field]

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

[errant jetty]

This is a lifesaver. Thank you!

Out of curiosity Why doesn't vencord/vesktop strip or revert those class changes?

It would make theme maintenance a lot simpler imo.

[vestal field]

because its a feature few themes would use

since betterdiscord exists

usually theme authors want themes to work on all clients

[errant jetty]

That makes sense.

[vestal field]

there is a plugin called themeattributes that adds extra attributes for selecting certain elements

but very few themes actually rely on it

[errant jetty]

Noted. Thanks for your help!

[plain kelp]

I have a plugin for that btw https://github.com/Kyuuhachi/VencordPlugins/tree/main/Classify

But the module mapping needs a lot of maintenance that I don't have the manpower for

[supple tartan]

I leave the submenu to inspect the submenu, how can I know what classes it has, without inspecting it?

[plain kelp]

Why do you leave the submenu

[half crystal]

To access the inspector I think

[supple tartan]

exactly

[plain kelp]

Does f8break somehow require closing the menu?

[burnt maple]

try using CTRL + SHIFT + C shortcut to activate inspector?

[iron smelt]

https://tenor.com/view/ice-age-sid-i-am-a-genius-im-a-genius-genius-gif-23906122

[supple tartan]

no, but if I want to modify the submenu div and the parent/child divs, I have to click on the elements in the HTML tree. And when I do that, I stop hovering over the submenu, so it disappears. Plus, I usually make changes in the dev tools first, and for that, I also have to stop hovering over the submenu xD

[supple tartan]

that helped a bit, thanks

[plain kelp]

Doesn't the menu freeze?

[supple tartan]

nope

well the menu yes, it stays, but the submenu no

[half crystal]

@supple tartan ???????

[supple tartan]

@silver shard this is the best I could do, but there is just one problem I can't figure how to fix: the space between the menu and the submenu. I had to remove it because the parent div's padding was also affected by the submenu's blur. And now the submenu overlaps the menu a bit

[supple tartan]

wtf? I 100% can't do that

xD

[half crystal]

ok this is weird
f8'd to do what you were doing, came back and now submenus won't open? tf

VENCORD JUST KILLED ITSELF???????????
ON VESKTOP?????????

dude 😭

/* CURSED MATERIAL */
.menu_c1e9c4 {
    background-color: #0000003d;
    backdrop-filter: blur(20px);
}

ok so after performing an exorcism on that snippet everything is back to normal

crazy

[plain kelp]

Your css crashed vencord?

[half crystal]

I DONT KNOW THAT THE FUCK IS HAPPENING

i have royally fucked up my copy of vesktop

huh
y'know i think theres supposed to be a bit more to that

im once again back with no vesktop in my vesktop
i am having an existential crisis here

and its all back

what fucking layer of hell was i dragged through

[echo frost]

I don't think you activated f8 break
did the timeout debugger work? it does the same thing as f8break

[crimson skiff]

i use arch btw
build it again

[half crystal]

vesktop-bin

Either way, from what I've figured out, my asar file is completely fucked

[iron smelt]

Average Linux moment

[echo frost]

seems like this is actually necessary now
can't seem to revert it with an experiment

ok fixed it having wrong y pos by using translateY() instead of bottom: (idk why i was using bottom)
need to fix the width being wrong when upload your message as a file appears
or...
change the width of upload message as file (:<

oh wait translateY() doesn't fix it nvm

[pine needle]

is there any way to resize member list?

[echo frost]

Like with a draggable thing?

[pine needle]

yepp

[echo frost]

possibly, but it would look like this

and be hard to make

i think

[grand surge]

Yo wsg, I'm trying to change the width of my channel container but it seems that this code doesn't work can anyone help me out?

also trying to change embeds width to be accross the entire channel or auto to the width of the text but that can have some weird appearances(it might be because I'm not used to it but I have never gotten it to look good IMO)

[echo frost]

try adding !important like this width: 500px !important;
other than that, I'm not sure bc I'm not on computer rn

[grand surge]

alr

It does work don't get me wrong

its just that

that div element isn't teh correct one

and I can't find the correct one

the one above it is for the entire Channel list AND chat

so it's like

IDK what to grab

or what to change

[echo frost]

oh

[full badge]

is there no way to f8break on the startup screen?

I'm trying to replace the loading animation from the current webm to add back shiggy

[grand surge]

I think you can

but I don't know how

well I semi do

you could use this

I found this in a theme called midnight

and it puts a image over the discord favicon

[chilly quail]

can i have access to #🎨-css-snippets ?

[spare mural]

you need to request a pass in #📩-modmail

[chilly quail]

touche

[echo frost]

you should still be able to open devtools, and then you can run debugger in your console which is what f8break runs

[plain kelp]

Or the manual pause button (conveniently bound to F8 while devtools is focused)

[echo frost]

ohhhhh

it only works in sources

i tried to get that to work for so long, but never tried doing it in sources

[real quarry]

not sure how absurd/computationally expensive this hypothetical CSS snippet would be: bringing back the "Today at HH:MM" timestamp format as opposed to the "HH:MM" seen today

or is it better fit for TS?

[chilly quail]

#👾-core-development message

[real quarry]

thx!

[smoky belfry]

i found a better way, there's just a slight issue

[class^=timestamp_] > time {
    &::before {
        content: attr(aria-label);
        font-size: initial;
    }
    font-size: 0;
}

the font size is too big

or the date render twice

fr i don't get why discord makes these kind of changes

they're small and yet they suck

it was just fine

no need to change it

[unreal wyvern]

here's my attempt
im not sure if it's fully reliable?
one thing to note is that it shows a more detailed date on older messages

[class^="message_"] [class*="timestampInline_"] > time {
    font-size: 0;
}

[class^="message_"] [class*="timestampInline_"] > time::after {
    font-size: 0.75rem;
    content: attr(aria-label);
}

[smoky belfry]

holy fuck

i found out why i had a feeling that the time on reply sucked and what offset

there used to be brackets there
which were offseting the text to the right

i hate how discord is some messy layering of CSS

[warm bough]

one that changes every 2 weeks for no reason

[smoky belfry]

If they were to change the font-size it could break, but it's better than nothing
I'm looking for the option which doesn't rely on hardcoding anything

[lusty timber]

Since I am told that this channel is the more appropriate place to ask... here is my question from that channel!

[lusty timber]

Also, this is so that I could pad out Batter Folders' folder sidebar.

[half crystal]

i'd suggest giving wherever that is overflow: visible!important

crazy theme btw

[lusty timber]

The full theme is crazier. I'll sent it when I get the issue fixed.

[half crystal]

@lusty timber also, your full name is on your discord connections, in your paypal and facebook. i suggest removing that, as that is kind of a privacy risk

[lusty timber]

I don't mind my full name being there. I kinda reference my full name all the time in small cameos.

[lusty timber]

Anyway, onto theme stuff... I tried it out aaaand yea .isExpanded__48112 isn't the main container holding the folder sidebar.
The dots still aren't showing. So it must be the some parent of .isExpanded__48112

[real quarry]

i might use this version instead if i remember; the earlier one in #👾-core-development has these funky problems

[lusty timber]

Okay yeah. I am really stuck here. I'll need someone to help me find out what the name of the folder sidebar's class is.
None of any of the other classes I tried produced any result I needed.

[clear siren]

I used to have a css to cut it off lol

but now I have a plugin to modify timestamps

https://github.com/Vendicated/Vencord/pull/3189

[tepid zealot]

click the timestamp to copy the <T:unix:R> thing to clipboard could be a cool feature (if it's not already, i didn't read too hard </3)

[echo frost]

Is this the best way to do the today at?

[id^=message-username]+.timestamp_c19a55>[aria-label^="Today at"]::before {
  content: "Today at "
}

[echo frost]

that would give a different format for long format dates

which ig might be good

but it also slightly messes up the tooltip position

even after fixing font size

[half crystal]

dark. fucking. magic.

[burnt maple]

attr()?

[half crystal]

no, im not that smart
its whatever the fuck this is

[half crystal]

its broken on only vencord pages

[iron smelt]

Ok... I need opinions, which is better 1 or 2...

[chilly knoll]

1

[spare mural]

why do you need so many warnings for an nsfw channel

like i think the red warning symbol is enough especially when you click on it and it also asks you if you really wanna enter

[iron smelt]

It doesn’t always ask you that

[spare mural]

yea cuz it saves your selection

[iron smelt]

Ik… and I have a version that adds just the color but then I also have one that adds the label… and I’m just trying to ask which one’s better because I’m trying to make it look better

[spring hill]

Imho latter

[grand surge]

man, i been trying to use github's compilot
i gave several times that i don't want a example with javascript and it just ignores

https://tenor.com/view/it's-just-so-bad-it's-so-bad-ew-panda-it's-just-so-bad-gif-12756154516164019614

[half crystal]

chatboxes are gonna be the death of me i swear to fuck

[crimson skiff]

why would you even want that bruh, just hide the gift, sticker and gif buttons

[oak plover]

The gif and sticker buttons are dumb

And the gift button should only show up in dms makes no sense everywhere else

[wraith sandal]

hey support channel pointed me here. anyone have a solution to css snippets only working in the quick css box? my theme (Material Discord) works fine and so does Radial Statuses but when i enable a custom css file with just the snippet i had tried out a few seconds ago in quick css it doesnt do anything?

i fixed it im dumb i guess it needs to be named "Something**.theme.css**"

[half crystal]

what about plugins that add buttons to the message bar?
the emoji button?

[crimson skiff]

you willingly enabled those plugins

emoji button so you can access the stickers and gifs

[half crystal]

yeah, but the same problem is still there with the chatbox, its still offset

[cloud sigil]

position: absolute;

[half crystal]

fixed it, but jesus

[cloud sigil]

That doesn't look like a position absolute..

[supple lodge]

Just need to not have spaces in the name.

[boreal moth]

Hey does anyone knows how to automaticaly change the variables names every time discord updates them so i dont have to do it manually ?

[supple lodge]

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

[slim pond]

so I did a thing

[plain kelp]

Is @custom-variant some preprocessor thing?

[slim pond]

tailwind

so the dark:bg-white class translates to roughly:

.theme-dark .class {
  background-color: white;
}

[half crystal]

jesus fuckity

[grand surge]

i dont get it

[slim pond]

funniest part: it's actually really ergonomic

[plain kelp]

I'll never understand the likes of tailwind

When I grew up we tried to avoid the style attribute, now people are reinventing it with nonsense classes

[half crystal]

🤑

[echo frost]

does the collapsible chat buttons thing I made do what you want?

[half crystal]

no i was just complaining about the chatbox being misaligned
i made it aligned now

[spare mural]

its very convenient

for small projects i recommend it honestly

why have a ton of css files for your different components or whatever when you can just slap a bg-black text-white p-4 rounded-md shadow border border-stone-900 on it?

[plain kelp]

Why slap a bg-black when you can do background-color: black

[spare mural]

less characters

i think the reason should be pretty obvious

stuff like @media (min-width: 640px) { background-color: black } is a lot more to write than just... sm:bg-black

and then organising the css files.. and so on

[slim pond]

and a lot more complicated in general

[spare mural]

of course youd want that organisation and less repetition in actual full scale projects but for simple projects like a personal site, small app or prototyping its great!

[slim pond]

and though I do not endorse using tw if you just started out with css, seeing it as an "easy way out"

it is certainly very useful

also, for some really simple discord themes

there is the appeal of going from 1K lines output to something like 200 lines input

[iron smelt]

Is that honestly even a better Foward icon

[plain kelp]

Anything is better than just mirroring the reply

[iron smelt]

Thats true

[echo frost]

you realize that's 7 different components right?

[crimson skiff]

tailwind is only useful if you have a specific style used multiple times, not once
and even then, you usually prefer presets and leave them as is until you need them

[iron smelt]

Eww tailwind

[crimson skiff]

i never knew the appeal of tailwind anyways

just felt like unnecessary bloat in the DOM

[iron smelt]

https://vxtwitter.com/hibakod/status/1901415191792795941

[plain kelp]

Tailwind is completely impossible to third party style, too

[crimson skiff]

why would you ever do that to yourself

[plain kelp]

Just use classes like The W3C decreed

[crimson skiff]

they couldve literally used a custom attribute, but decided to say fuck it and mess directly with classes

[echo frost]

well classes are more efficient

and it would still be ugly

[spare mural]

No that’s 7 classes, I’m talking about components as in for example react components

If you really want to be organised you would create a css file for every component

[spare mural]

Wdym

[fathom hedge]

This seems like the kind of person to look at minified js code and complain that it's minified

[spare mural]

It has a config for more values, they have their own flavour of css for creating more classes, etc

[spare mural]

There is no point in using custom attributes when the point is to only use tailwind for your styles

[crimson skiff]

i still have no idea how im gonna transition to tailwind bruh, the control that normal css gives feels nice, especially the !important

[spare mural]

You don’t have to, no one is telling you to use tailwind

Its preference

[fathom hedge]

Also you can use !important with tailwind

[spare mural]

Important is useless for your own sites anyway, the last time I used important on a site fully made by me was 2 years ago
It can be avoided with good css and a good html structure

Of course that doesn’t apply to theming other apps, gotta use important there

[vestal field]

there's no real use to reading minified code, there is use for reading your own html

the two arguments for tw i understand are

1. its faster to type
2. it has some nice presets so you don't have to think about stuff

also the whole argument about having a lot of css files is to a large extent a react/jsx problem, having styles in the same solves that issue mostly

what i don't understand about tw (genuine question) is, in the case where you want to update multiple elements with a new style, do you have to paste the tw class into each of them?

[echo frost]

oh thought you were calling css blocks components
.class {thing: value;}

[echo frost]

I think you can make groups or something to apply many things at once
||(something normal css automatically does 😱)||

[slim pond]

.component {
  @apply rounded-xl bg-primary-500 hover:bg-primary-600
}

[halcyon crypt]

a small snippet I put together to hide the "🔊 Show All" button from the channel list:

/* Hide 🔊 Show All button */
[class^=voiceChannelsButton] { display: none }```
if there's a better way, please let me know

[slim pond]

@theme {
  --color-primary-500: #202222;
  --color-primary-600: #191a1a;
  --color-primary-700: #141515;
}

@utility primary-button {
  @apply transition duration-200 ease rounded-md px-4 py-2 bg-primary-500 hover:bg-primary-600 active:bg-primary-700
}

.button {
  @apply primary-button
}

tailwind gives you a lot of control over utility classes, while also making styles both reusable and customizable on the fly

[slim pond]

looks fine, and since you're not querying the exact class, it should be fine from discord updates

[slim pond]

since when is production code meant to be readable?

[slim pond]

just apply all your styles on one reusable class, or even a custom utility class, but those are mostly usefule for stacking reused styles on reused styles

[echo frost]

just do that with normal css though

[real quarry]

test

foobar

ok gg

[iron smelt]

Bad preference

[spare mural]

this person hates on subjective opinions! laugh at them immediately.

[iron smelt]

Yk what get orbed

[half crystal]

i second this

[chilly knoll]

i third this

[grand surge]

is it possible to load/get shaders with url()?

oh hell nah, chatgpt

[half crystal]

a simple search works

[grand surge]

"You can load shaders (GLSL) using JavaScript and WebGL."
"Using CSS filter and backdrop-filter"
"Using SVG Filters"

4th is same as 1st

https://tenor.com/view/its-so-ass-ryuko-crying-ryuko-matoi-ryuko-crying-gif-12233572733644394864

i will find a way around it if i wont find anything more simple way

[iron smelt]

Idk if it applies to this channel but #📖-info

[half crystal]

Oh right yeah fuck

[grand surge]

🤔

[grand surge]

god, i hate making borders for embed

[tidal heron]

no idea where to ask but i just need a recommendation for a theme. looking for a light weight dark theme preferably with some rounding but no biggie if not and AMOLED is not what im looking for. something kinda similar to this i suppose

[echo frost]

idk what this means, but ig i'll 4th it

[tidal heron]

or even just smthn like the discord refresh

ill 5th it

[echo frost]

why not use the refresh?

[tidal heron]

idk how to lol

i disabled my theme and the refresh doesnt exist

[echo frost]

make sure experiments plugin is enabled

you can search/browse for themes here https://betterdiscord.app/themes

[tidal heron]

BD has barely any good themes nowadays imo but i got refresh to work so thanks

[echo frost]

i don't think there's really a better place to look than that

maybe you could try searching on github, but idk how well that would work

and you could loolk in #🎨-css-snippets, but most of those are small snippets not themes

[vestal field]

https://github.com/refact0r/midnight-discord
has a version for refresh too that allows you to use discord's default dark dark mode

[slim pond]

Tailwind just has better dx imo

Doing things the W3C way is fine, but you shouldn't completely rule out other options

[lunar garden]

does anyone know an working right-aligned self messages css snippet?

[half crystal]

from the BD server

.message__5126c .contents_c19a55 .messageContent_c19a55 {
    background-color: var(--background-tertiary)!important;
    padding: 10px;
    border-radius: 12px;
    border-top-left-radius: 0;
    width: fit-content;
    translate: 70px;
    max-width: 100%;
}
.repliedMessage_c19a55 {
    background-color: var(--background-tertiary)!important;
    padding: 5px;
    border-radius: 12px;
    width: fit-content;

}
.message__5126c[data-is-self="true"] {
    transform: scaleX(-1);
    .header_c19a55 {
        transform: scaleX(-1);
        text-align: right;
    }
    .avatar_c19a55, .avatarDecoration_c19a55 {
        transform: scaleX(-1);
    }
    .messageContent_c19a55 {
        transform: scaleX(-1);
        text-align: left;
        border-top-left-radius: 12px!important;
        border-top-right-radius: 0!important;
    }
    .container_b7e1cb {
        [class*=container], .reaction__23977, .embed__623de, .embedImage__623de {
            transform: scaleX(-1);
        }
    }
.container__122e4 {
        width: fit-content;
        .messageContent_c19a55 {
            transform: scaleX(1);
        }
    }
    .buttonContainer_c19a55 .buttons__5126c{
        transform: scaleX(-1);
    }
    .timestampVisibleOnHover_c19a55 {
        transform: scaleX(-1);
    }
    .channelTextArea__5126c {
        transform: scaleX(-1);
    }
    .repliedMessage_c19a55 {
        flex-direction: row-reverse;

        .repliedTextContent_c19a55 {
            transform: scaleX(-1) scaleY(1);
            margin: 0;
            margin-right: -70px!important;
        }
        .replyAvatar_c19a55, .username_c19a55, .repliedTextPlaceholder_c19a55 {
            transform: scaleX(-1);
        }
    }
}

[lunar garden]

yea i tried that one

this is before btw

and i do have the themes plugin on

[half crystal]

do you have themeattributes enabled?

[lunar garden]

yes i do

[half crystal]

aoieudh

[lunar garden]

ima turn it off and off

its just buggy

[half crystal]

i do have ddex4's messagebubbles
https://github.com/Blade04208/ddex4/blob/main/src/bubbles.css

[lunar garden]

it just says not found

[half crystal]

i cant remember github links

[lunar garden]

this one?
https://github.com/blade04208/ddex4/src/bubbles.css

[half crystal]

no, the one in the message

[lunar garden]

@import url(https://blade04208.github.io/ddex4/src/bubbles.css);

[half crystal]

works

[lunar garden]

oh wow it does

works perfectly

love the way the meme looks like as well

needs to update though

[half crystal]

look at the whole theme if you like, its meant to imitate that one scrapped discord theme

[lunar garden]

i tried too but the classes need to be updated

i should make a repo for it

[half crystal]

it needs visual-refresh, the classes are updated

[lunar garden]

oh

where can i get that?

[half crystal]

experiments > visual refresh > treatment 2

[lunar garden]

ohhhh

bet

[lunar garden]

so i got this so far

fixed

[chilly knoll]

is it possible to theme the reply pipe? been trying to for ages but it themes some "invisible" background underneath it not the actual pipe

[lunar garden]

this is the class for it
repliedMessageClickableSpine_c19a55

[chilly knoll]

this is what happens when i add it

[lunar garden]

display:none;?

found this

.cozy_c19a55 .messageSpine_c19a55:before, .cozy_c19a55 .repliedMessageClickableSpine_c19a55 {
    --gutter: var(--custom-message-margin-horizontal);
}```

try these classes

[lunar garden]

i did it

  #app-mount .messageListItem__5126c[data-is-self="true"] .repliedMessage_c19a55:before,
  #app-mount .mentioned__5126c:before,
  .replying__5126c:before,
  .spine__9271d.cozy__9271d,
  .message__5126c::after,
  .repliedMessageClickableSpine_c19a55 {
    display: none;
  }```

you could remove some of the classes but it removes it

oh you mean to theme

im not sure then mb

[chilly knoll]

yeh lol, thnx for trying to help anyway

[lunar garden]

np

[vestal field]

its a border, so you have to change the border color

[chilly knoll]

got it thanks

[heady jay]

can i ask how to get midnight theme with dark ui?

[vestal field]

use the refresh variant, disable colors, and use discord's own dark theme

[heady jay]

ty

[pallid tinsel]

is there a theme that just makes discord amoled black but no other customizations? i cant seem to find a good one

[echo frost]

might need some slight modification, but

[pallid tinsel]

ill try that out

thans

thanks*

[pallid tinsel]

howd you find this out 😭

this was what mine looked like (theres more above 💀)

[echo frost]

uh
I found it out like a year ago when I started doing css

[pallid tinsel]

oh i see

damn 😭

[echo frost]

hard to explain on mobile, and need to go to bed

[pallid tinsel]

i see

thanks sm tho

works so fine

C:

[echo frost]

but the colors are defined by variables

so if you find an element with a background or something, click the variable

[magic abyss]

is there a way to lower the input box so it matches the avatar on the left? like 10px lower

[grand surge]

:root {
  --custom-chat-input-margin-bottom: 0px; /*try other than 0*/
}

[magic abyss]

in quick css? cuz it doesnt work there. i have a few other ones tho

[grand surge]

there's a chance that you have custom theme that changes this

[magic abyss]

what i got

[href="/store"],
[href='/shop'],
button[aria-label="Send a gift"],
[for="burst-reaction-toggle-button"],
[class*="nowPlayingColumn"]
{
display: none;
}

:root {
--custom-chat-input-margin-bottom: 10px; /try other than 0/
}

[grand surge]

i gave you wrong margin

or not

--custom-chat-input-margin-bottom: 10px;

this works well

not sure whats wrong

[half crystal]

you didnt make it !important ig

[magic abyss]

tried with and without online theme link. and restarted.

[half crystal]

:root {
  --custom-chat-input-margin-bottom: 10px!important; /try other than 0*/
}

[magic abyss]

nothing

[grand surge]

yeah, its somehow forced other way

[half crystal]

.channelTextArea_f75fb0 {
    margin-bottom: 10px!important;
}

[grand surge]

would just get class but it's not really future proof

[magic abyss]

that works

[grand surge]

[class*="channelTextArea_"]

[half crystal]

1. no .

[grand surge]

is it?

[half crystal]

yes

[magic abyss]

how do i check what class it is? like if it breaks ever i can just rename it myself

[half crystal]

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

[magic abyss]

theres no way to check on discord? like inspector or smt

[grand surge]

ctrl+shift+i

[magic abyss]

ok sick, that works. i can find it easily

thanks guys

if you ever need help with mics or audio in general hit me up

[grand surge]

i am so confused

[iron smelt]

Stop lying to people

[iron smelt]

No

[half crystal]

???

[grand surge]

i will do it to every class then

[iron smelt]

[class*=“"] isn’t laggy, the only way it is is if it’s too broad of a class, or if you’re doing it too much

Say something like footer

[half crystal]

i love regurgitating info others have given me believing to be fully true when in reality it is partially false

[grand surge]

does {display:none;} improve performance?

[iron smelt]

*{display: none !important;}

[plain kelp]

It'll need to do a substring check on every element on the page

At least specify the tag name

[golden ibex]

Is there a way to reduce the width of the server bar?

[iron smelt]

Also unless it’s just because I have treatment 3. The discovery seems to not be pinned anymore on this Visual Refresh.

[wind geyser]

i dont know if you get this on 10px but i made it 6px since i made my chat box smaller than usual & to get it centered with the panels on the left, but would you know how to also push the "x is typing..." up to basically be above the chat box?

[hollow steppe]

has anyone already found the tweak to make server icons bigger ?

[whole roost]

guys im going to end my life

it broke my awesome theme

my discord looked so nice

WHY DID THEY DO THIS

[wooden stag]

what's the way to fix this black overlay over the server icons

my current css:

.panels_c48ade {
    margin-left: 20%;
    width: calc(calc(100% - 42px * 2)) !important;
}

[hollow steppe]

instead of margin-left: 20%, use margin-left: var(--custom-guild-list-width);

so that, if your guild list width change through this variable, the rest can follow automatically

[wooden stag]

oh that's nice thx

[whole roost]

for me the server icons are still square why arent urs square

[wooden stag]

css

[hollow steppe]

and this is your fix:

.visual-refresh .wrapper_ef3116 {
    margin-bottom: 10px; /* or whatever you want */
}

[wooden stag]

that worked, I appricate it. btw how did you find it

[half crystal]

i attempted to restore visual-refresh using only the old stylesheets
it did not work, but i have a monstrosity now

[hollow steppe]

by inspecting elements with the devtools

[wooden stag]

[whole roost]

cant figure out how to make everything rounded again

[wooden stag]

me either..

[barren spade]

my low level ass hasn't touched css in years 😭

I tried border-radius but didn't work, probably something glaringly obvious I'm missing

[vestal field]

some things use svg masks instead of border radius

[fickle falcon]

can someone get rid of this fucking bar from the vesktop

I want there to only be my own top bar

it's so annoying

I hate this new redesign so much

[iron smelt]

Bro's will do anything but use #🏥-vencord-support-🏥

[fickle falcon]

I am stupid

[grand surge]

Is there a way I can make a selector for an a tag with a div tag inside it?

a[href^="https://support.discord.com"] {
  display: none!important;
}

I have this rn

[proper badge]

got the background only on the header bruh

[grand surge]

I want to make sure not every link pointing to it would get zapped

[tidal moth]

so is there any css yet that helps undo this

ui tragedy

[grand surge]

#1257025907625951423

[tidal moth]

thank you

[proper badge]

yeah this is my bg fix

its not the best but it does things

[grand surge]

does anyone know how I can get the icon from PlainFolderIcons working in CSS?

[class^=closedFolderIconWrapper_] {
    display: none !important;
}

so far I figured out how to hide the icons, but not get the plain icon there.
the plugin is broken with the visual refresh

[lofty sedge]

can anyone point me to what the typing indicator css would be? im trying to move it to the right so its not awkwardly offset from the input box but idk how to even grab it lol

[glacial citrus]

anyone here know how css grids work and could help me, im trying to fix better folders and am running into issues

im trying to insert an element at the red line, but it renders like this

i think it has something to do with this

[lofty sedge]

(got it, its .base_b88801 rn)

thanks #🏥-vencord-support-🏥 for not shutting up rn

[glacial citrus]

if you're on stable, the hash might be different

[lofty sedge]

i am, that was stable's

ty though

[ivory tendon]

"made" this code to hide the channels and show them on hover. but when i hover on mute/defen/settings... it immediately collapses and i cant reach them any ideas?

:root {
    --collapsed-members-width: 64px;
    --expanded-profile-width: 340px;
    --collapsed-channels-width: 20px;
    --expanded-channels-width: 264px;
}
/* Hide member list */
[class^=membersWrap],
[aria-label="Members"],
[class^=members] {
    /* set width */
    width: var(--collapsed-members-width)!important;
    min-width: var(--collapsed-members-width)!important;
}
/* Show member list when hovered */
[class^=membersWrap]:hover,
[class^=membersWrap]:hover [aria-label="Members"],
[class^=members]:hover {
    /* set width */
    width: var(--expanded-members-width)!important;
}

/* hide channels list */
[class*="sidebarList_c48ade"] {
    max-width: var(--collapsed-channels-width)!important; 
    min-width: var(--collapsed-channels-width)!important;; 
}
/* Show channel list when hovered */
[class*="sidebarList_c48ade"]:hover {
    max-width: var(--expanded-channels-width)!important;
    min-width: var(--expanded-channels-width)!important;
}

[boreal moth]

Could someone kindly explain how the new grid system work i dont really understand it

[fiery stirrup]

i wonder if there's any way to get the old ui back i got used to it

[vestal field]

see pinned in support

[smoky belfry]

yes #1354170031373553776 message

yes i forgor what it is, but yes
it's easy to do, but i forgor how to enable it

[chilly quail]

dont complain lol

at least we got variables we can easily change to edit css

[brittle iron]

had to do it to em

.channelTextArea_f75fb0 {
    min-height: 56px;
    margin-bottom: 8px;
}

[echo frost]

wtf

[echo frost]

.class:has(>div)

[grand surge]

yo who got a old ui css backup before its removed

[echo frost]

has anyone figured out how to get the server icons the right size?

they're supposed to be 48px, but they're 40

[echo frost]

Best i've come up with

/* Folders */
.visual-refresh .closedFolderIconWrapper__48112>div {
  border-radius: 50% !important;
  width: 16px;
  height: 16px;
}
.expandedFolderIconWrapper__48112 {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
}
[id^=folder-items-] { /* Needed, but Messes up folder opening/closing anim */
  height: unset !important;
}

/* Fix shape */
.blobContainer_e5445c foreignObject:hover,
.blobContainer_e5445c.selected_e5445c foreignObject {
  border-radius: 25% !important;
}
.blobContainer_e5445c foreignObject {
  transition: border-radius 0.2s linear;
  border-radius: 50%;
}

/* Fix size */
.stack_dbd263>.listItem__650eb {
  svg {
    top: 0;
    left: 0;
  }
  foreignObject {
    transform: translate(-4px, -4px);
    mask: none;
  }
  .wrapper_cc5dd2, foreignObject, .wrapper__6e9f8,
  mask, use, img, .acronym__6e9f8 {
    width: 48px !important;
    height: 48px !important;
  }
}

it's so scuffed and terrible

[lofty sedge]

doesnt affect dms right now but this is awesome

[echo frost]

hmm ig this is slightly better-ish than the fix size

.stack_dbd263>.listItem__650eb {
  height: 48px;
  >.pill_e5445c+div {
    scale: 1.2;
  }
  .acronym__6e9f8 {
    font-size: 15px;
  }
}

[echo frost]

are dms too small?

they look right to me

oh do you mean the dm button

to go to dms

[lofty sedge]

no i meant dms as well

[echo frost]

oh

like that

[lofty sedge]

nvm (skill issued on something)

[echo frost]

i can't figure out a good fix sorry

[echo frost]

oh this doesn't apply to servers in folders

[real quarry]

im dumb my windows machine just doesnt have my css file for this at all

(full context)

[vestal field]

@echo frost

it might not work perfectly anymore but should be pretty close

[echo frost]

yay

the folders are too big btw

they're already 48px

and then you're making them bigger

mightve been a change since you made it

[vestal field]

well it keeps the padding

the servers themselves are 48

[echo frost]

i just commented out this and it fixes it 🤷

[vestal field]

that just shrinks the vertical padding for me

oh dear why is there an empty calc()

[echo frost]

i thought that was some super advanced strat lol

[vestal field]

nah just stupidity

[echo frost]

why can i not click resume until i display: none the title bar

or change the height or something

[pallid tinsel]

how do i make this black (or a darker shade of grey)
i cant figure out the "--primary-000-hsl" or whatever var it is

[minor ibex]

is there a list of the new varibles and what they generally do? currently updating the stylix template for vencord but its a bit slow finding them all

and i will need to find what is obsolete at some point too

[iron smelt]

@crimson skiff Im geeking or are photos the exact same

#🎨-css-snippets message

[spare mural]

@crimson skiff

[echo frost]

I think they Are

[spare mural]

wrong image?

[crimson skiff]

wait mb

[echo frost]

I think you just pasted it twice

[crimson skiff]

now?

clipboard not clipboarding

[spare mural]

you pasted them in the wrong order now 😭

[iron smelt]

😭