🎨-theme-development

[vast delta]

TRUE

[mortal mantle]

there's only 1 line of code

[slim pond]

I just use hex

[vast delta]

Does the border property also included radius or just all 4 sides?

[slim pond]

works well now since color mix exists

[vast delta]

Border-Radius:#FF

[slim pond]

sorry

[vast delta]

:3

[slim pond]

I meant for the above conversation

[mortal mantle]

if color mix works on discord I will go back to rgba

[vast delta]

I think hex is great

[mortal mantle]

otherwise hsl

[slim pond]

I just gave up on discord

[vast delta]

I love hex, I wanna learn it like base 10 lol

[slim pond]

Vesktop/Armcord >>>>

[mortal mantle]

I have the color mix lines commented out

[vast delta]

Inefficient

[mortal mantle]

hsl still is the best way to generate a whole set of colors

[slim pond]

alpha channel to hex color

with color mix

[mortal mantle]

damn

[vast delta]

What does colormix even do?

[mortal mantle]

color-mix works with hex?

mixes color with another color/transparent

my workaround is to define hsl and a separately, then combine it into one hsla line

[vast delta]

Isn't that basically like doing rgb(100-var(--red),100,100)?

[slim pond]

yep

[mortal mantle]

Interesting

[vast delta]

Oh so you can have an rgb variable and a transparency variable and colormix both to get an rgba value?

[mortal mantle]

Will I rewrite the entire theme again to change color values? I .... don't think so

[slim pond]

and I just implemented a watered down version of the colorways creator code

[vast delta]

Wait no that should just work normally haha

[mortal mantle]

yes

[slim pond]

which is every higher value is -3.6 lightness

so +3.6% black

[vast delta]

That's actually cool!

[slim pond]

and the opposite for the lower values

[mortal mantle]

I want primary-100 to be as close as white

and primary-900 as close as black

[slim pond]

exactly what I just said

the closer you get to 900

the more black you add

and the closer you are to 100

the more white you add

and on the brand-experiment-**a

the asterisks indicate how transparent the color should be

[mortal mantle]

I started from 0

But somehow ended up at +96%

[slim pond]

so brand-experiment-05a has an opacity of 0.05

[mortal mantle]

I have no idea what that means until now

[slim pond]

this is brand-experiment-80a

and on hover it becomes 95a

[mortal mantle]

how do you change the brand experiment without affecting the opacity

[slim pond]

if you just change these values it also affects the experiment variants

the alpha channel variants use the -hsl variables

so if you modify these you're fine

if not, use color mix with ransparent

so with 05a you would mix 95% transparent

all alpha variants use the 500 value

[mortal mantle]

Not looking forward to rewrite theme with brand-experiment, but if it means making the theme much faster then I might reconsider

[slim pond]

no need for that

just the alpha variants

for places that need them

[mortal mantle]

My current solution is a separate transparency variable

and do the hsla style color

which can easily be replaced with color-mix

[glad urchin]

this should change the position of the "mask" / rect right

its at 17 for mobile status

so far..

[slim pond]

making some questionable design choices

[glad urchin]

how can i change this property

its also related to that circle above, in the profile

cx, cy and r work
but can i turn this circle into a square? or is that not possible

nvm, display: none; 'd the circle
looks a little clean

the tooltip is placed on this circle

setting the circle "r" to 0px works

[mortal mantle]

are you trying to make squarecord

[mortal mantle]

I give up on supporting normal discord

color-mix is just way too convenient

[glad urchin]

yes

almost.......done
something like 50% now

[grand surge]

wip theme

[glad urchin]

looks cool

[vast delta]

Nice!

[slim pond]

looks sick

[grand surge]

ty

[glad urchin]

why is

[sharp shell]

yes

[glad urchin]

i dont know if this is optimization or performance killer

[slim pond]

https://gyazo.com/f24b0e94adff65952db72a6e90a4e9e9

[sharp shell]

what is this

[slim pond]

more distracting sales tag

pulsating shadow

[mortal mantle]

I had an idea in my mind during shower

What if I rewrite the theme but only for myself, using stock discord variables and color-mix for transparency

[slim pond]

god im not used to cyan being this fast

almost at 2k lines

no lag

[mortal mantle]

[toxic yew]

why is this icon for some reason being smaller in vesktop 😭

[edgy sentinel]

lmao

different zoom probably

[toxic yew]

but the green icon is same size

oh i think because the offline icon use border: 3px
somehow the border on vesktop looks thinner than on discord despite same value

[shy turtle]

likin' the look of this

[mortal mantle]

trying my best to remove custom color variables off my theme while retaining the design

[shut frigate]

that goes hard tbh

[mortal mantle]

ty

[shut frigate]

unfortunately that didnt work ):

[mortal mantle]

fitting name

[glad urchin]

titlebar right

i wonder if native titlebar text can be ported to discord titlebar ?

[mortal mantle]

Aren't both title bars already available (on Vesktop)?

[glad urchin]

text, not the actual titlebar itself

in vesktop, with native titlebar
it shows something like "Vencord / #channel / [pings]"

[rugged echo]

this looks so wrong

[grizzled axle]

uhh i made irc thing https://github.com/nothendev/vencr/raw/main/snipper/irceverything.css

[rugged echo]

whar

[grizzled axle]

i made discord look like an irc client

[teal cave]

For the font to show properly to other people, you gotta add an import to the top

[slim pond]

also, avoid using aria labels

localized

[glad urchin]

avoid div > div and try to use single selector

(?)

[vast delta]

heyo, do you have a link for the channels and their folders? i'd love to use this

[vast delta]

can i force objects to be put to the side of the screen if they would leave the screen?

[gilded radish]

hey, does anyone have a selector or anything for the tint on a selected channel? I'm looking to round it with {border-radius: 15px}

[glad urchin]

one sec

[glad urchin]

try
.link-1_kTxV { border-radius: 15px; }

[gilded radish]

nope

only affects on hover

grandma size so it's more clear

[glad urchin]

.containerDefault-YUSmu3

or .containerDefault-YUSmu3:hover

[night comet]

did you come here from ntts

[gilded radish]

none worked

[gilded radish]

no but I do watch him

[night comet]

15H14.3504L15.4104 9H9.41045Z"></path></svg></div><span class="hiddenVisually-39QJvl">Text Channel</span><div class="titleWrapper-24Kyzc"><h1 class="defaultColor-1EVLSt heading-md-semibold-2h_vsp defaultColor-1GKx81 title-17SveM" data-text-variant="heading-md/semibold"><span class="hiddenVisually-39QJvl">Vencord:</span> css-development</h1></div></div><div class="toolbar-3_r2xA"><div class="icon-1ELUnB iconWrapper-2awDjA clickable-ZD7xvu" role="button" aria-label="Threads" aria-expanded="false" tabindex="0"><svg x="0" y="0" class="icon-2xnN2Y" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" fill="none"><path

might help

dont know

random html code that is related to channels

[gilded radish]

nop

bruh this is satan's selector or what

[night comet]

thats not

a thing to put in your css

that was for p to decipher

[gilded radish]

oh I know

I was refering to whatever the selector of that thing might be

[glad urchin]

that selector/ html above is only into a channel's html component
the actual css for it is outside, in the list item

[gilded radish]

uhhh yeah I'm not experienced enough to understand (if you were talking to me)

[glad urchin]

sorry, im not experienced here either
someone might help, or ill check again tomorrow

[gilded radish]

np man, thanks for trying

[mortal mantle]

now it finally works with actual nitro themes

I'm so happy

[muted knoll]

with this uhm.. "snippet".. can I somehow get the "insert timestamp plugin"s icon to be on right side with the emoji button?

https://github.com/Vendicated/BetterDiscordPlugins/tree/main/Plugins/InsertTimestamps

like this

[mortal mantle]

Just enable the plugin in settings

[muted knoll]

that snippet brings it to left side

also I want it to be in the darker area with the emoji button

[rugged echo]

you will most likelly need to edit the css adding the button of timestamps, for removing buttons i don't think its that hard, it shouldn't affect the theme

[muted knoll]

[shy turtle]

create invite on hovering channels should be GONE
if i need it i would use the context menu

[edgy sentinel]

then hide it :P

[shy turtle]

i have skill issue, i wait until someone else also wants it gone (for them to do it,, or if theyre really nice & cute )

[edgy sentinel]

its really not that hard

try teaching urself basic css and how to use the inspector

and dont be stupid like me and have quickcss disabled

u could just select it with aria-label instead of the :has if u dont care about language support

[shy turtle]

i could probably learn it but i'd need to be doing mentally better and have some decent motivation to get started cuz otherwise i know i would just give up x3 i already know stuff like coding is possible but not too much for me if i ever need to be taught or need help i have a programming friend tho

thank u ven

i am now going to look at the video and manually type out what u did to copy it lmao

[edgy sentinel]

use the inspector to reproduce what i did

[shy turtle]

i'll give it a try

[shy turtle]

I've done it? :3

[class="iconItem-1EjiK0 iconBase-2G48Fc"] {
  display: none !important;
}```

[edgy sentinel]

that also hides settings

you'll want to include the :has i have or the aria-label

[shy turtle]

u mean this? its still here for me

oh wait u mean channe lsettings

u can just also use the context menu for that

so im personally just fine with it tbh, but lemme try

[edgy sentinel]

read the channel name

[shy turtle]

tbh it took me too long to realize u said "or" while struggling trying things

/* Hide "Create Invite" when hovering channel */

.actionIcon-2sw4Sl:has([d^="M14 2H16V3"]) {
  display: none !important;
}```
```CSS
/* Hide "Edit Channel" when hovering channel */

.actionIcon-2sw4Sl:has([d^="M14 7V9C14"]) {
  display: none !important;
}```

now both but this time seperate

[stuck plinth]

however english only

[shy turtle]

[rugged echo]

"just learn english dumbass" ~ fawn I think

[alpine cove]

this is true

[shy turtle]

there fixed

the second one feels so long tho

[stuck plinth]

, but if it works it works

[shy turtle]

i hope ven is proud of me

[alpine cove]

you could at least like

use ^=

[shy turtle]

where does that go

[toxic yew]

.actionIcon-2sw4Sl:has([d^="M14 7V9C14"]) {
  display: none !important;
}

[shy turtle]

oke i've done it whatever it does :3 ty

[toxic yew]

it is like "starts with" so u only need some first part

[shy turtle]

ah to shorten the second one

[autumn light]

How can I exclusively remove the mask on images to make the corners straight? I've done two attempts but it either makes everything straight or it doesn't work.

Attempt 1:
{
border-radius: 0px !important;
}
attempt 2:
.imageWrapper-oMkQl4 {
border-radius: 0;
}

Final attempt. I know nothing about css so any help would be amazing.

[stuck plinth]

this seems to work:

.mediaAttachmentsContainer-1WGRWy, .oneByOneGrid-3Cl27N, .messageAttachmentMediaMosaic-2ic1yt, .imageWrapper-oMkQl4 {
  border-radius: 0px !important;
}```

@autumn light

[autumn light]

Worked flawlessly. Thanks a ton @stuck plinth

[stuck plinth]

np, i just dug around in devtools for a bit until any instances of border radius in the whole attachment stack were gone

[mortal mantle]

#🎨-css-snippets message

this snippet removes any instance of border radius

[grand surge]

is there any way at all to change the alpha value of folder backgrounds? its set with an inline style

or any trick to achieve the same thing

[mortal mantle]

color-mix

[grand surge]

oh i havent looked into that ty

[stuck plinth]

peter did previously say that he wanted only images to have square edges

i think anyway

[mortal mantle]

I know I know

but one step further

[grand surge]

this is really confusing

how do i use color mix to change the transparency?

[mortal mantle]

color-mix(in srgb, <color you want to change> <percentage>, transparent)

[clear siren]

color-mix wasn't supported by discord, only in vesktop, and I think aura wants a selector

shouldn't matter if it's an inline style

just add !important or make the selector more specific

[mortal mantle]

.theme-dark.custom-theme-background .folder-241Joy as i'm currently on a Nitro theme

for non-nitro remove the .custom-theme-background

[slim pond]

:root {
  --brand-530: color-mix(in srgb, black 3.6%, var(--cyan-accent-color))
}

[mortal mantle]

fuck discord for not supporting color-mix

[clear siren]

yeah I hate when many electron apps use old versions

[mortal mantle]

wtf light mode actually doesnt look too bad

[grand surge]

sorry if im misunderstanding but the color isnt set by a variable or anything so how do i insert t into color mix?

[clear siren]

I also like how light mode looks but I just can't be using apps in light mode

[mortal mantle]

the folder colour is set by var(--background-secondary)

insert it into the color-mix

[grand surge]

hm that just makes it transparent

[mortal mantle]

didn't you say you wanted to adjust the transparency?

[grand surge]

yea to 100%

or the opacity to 100%

[mortal mantle]

the default is already 100%

[grand surge]

it seems to be 0.4?

maybe ive done something

[mortal mantle]

so ... you wanted the folder inside, not the wrapper outside?

i'm sorry i'm sorry

wait

the svg inside has 100% opacity

[grand surge]

im not really sure what that means sorry, ive never done any css or anything. im trying to make the closed folder background fully opaque

this

[mortal mantle]

.theme-dark.custom-theme-background .folder-241Joy {
    background: currentColor;
}

[grand surge]

that doesnt seem to work its still semi transparent

[mortal mantle]

it worked for me

[grand surge]

oh wait i see

the background color is just darker than the icon colour

sorry for wasting your time

[toxic yew]

the currentColor is just black
that's why it's darker

[mortal mantle]

It's fine, glad I could help

skill issue

change ur folder to different color

[gilded radish]

hey
I'm using the ShikiCodeblocks Plug-in, is there any way I can change that god forsaken font with a better one?

[mortal mantle]

change --font-code in :root to a different one

[gilded radish]

--font-code, cool!

flawless, thank you Aoi!

.side-2ur1Qk :nth-child(8)::before {content: "Friend Requests"; color: inherit; font-size: 16px;}
.side-2ur1Qk :nth-child(8) {font-size: 0px; height: 32px;}```

is there any way I can adapt this to channel names?

[glad urchin]

i found a way to make the loading screen transparent

/* transparent loading bg */
.container-2RRFHK {
    background-color: rgba(0, 0, 0, 0.5) !important;
}```

[stuck plinth]

if you want full transparency im p sure you can background: transparent !important or smth

[glad urchin]

that works too

though, would make the user confused
maybe full transparency isnt the best

[clear siren]

<@&1118512951318548480> you should consider using new css4 syntax for colors, rgb(0 0 0 / .5)

[glad urchin]

i see

[clear siren]

so you don't need the a in rgba/hsla, etc and no commas, alpha is optional and separated by the slash

[stuck plinth]

i don't see the issues with an "a" and 3 commas but ok

[clear siren]

old syntax will probably work forever but yeah

[glad urchin]

so long

i havent touched the settings page yet

[clear siren]

why not group and comment the selectors and then just have one {border-radius:0} at the end

[glad urchin]

dont know if i should
because i started it this way so its more easier to find which class is which

[clear siren]

when you make the code long like this I feel like it's harder to find a selector, it's easier when there's less lines but maybe that's just me

[glad urchin]

that's why i added comments for each "section"

[glad urchin]

nvm, i shrunk the css by 300%

/* Squarecore Simplified */
*,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
    border-radius: 0px !important;
    mask: none !important;
}```

[mortal mantle]

there we go

[glad urchin]

3 days of work in 5 minutes

fun

[simple kiln]

hmm

[vast delta]

This do be quite efficient, I'm pleased.

[glad urchin]

i may have just made it a little less efficient

[vast delta]

It is space efficient and that's what we need

[glad urchin]

/* --- Squarecord Simplified --- */
*,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
    border-radius: 0px !important;
    mask: none !important;
    -webkit-mask: none !important;
}
.svg-1G_H_8 rect[style],
.svg-1G_H_8 circle[style] {
    display: none;
}
.slider-HJFN2i rect {
    rx: 0;
}
/*  */
/* Voice pfp fix */
.voiceUser-3nRK-K .userAvatar-3Hwf1F {
    border: none;
}
/*  */
/* Voice Member count FIX */
.total-1c5KCN {
    padding-left: 4px;
}
.total-1c5KCN::after {
    display: none;
}
/*  */
/* Theme checkmark fix */
.checkmarkCircle-2LCcdI {
    background-color: var(--brand-500);
}
/*  */
/* Radio buttons (settings) fix */
.radioBar-1XgZqD svg {
    border: 2px solid white;
}
.radioBar-1XgZqD svg path,
.radioBar-1XgZqD circle {
    display: none;
}
.radioBar-1XgZqD div {
    position: relative;
}
.radioBar-1XgZqD div:has(circle)::before{
    content:"";
    position:absolute;
    background:currentColor;
    width:13px;
    height:13px;
    left:25%;
    top: 22%;
}
/*  */

[vast delta]

The shorter you can get your code the better it is. Fact™.

[glad urchin]

let me fix something

[vast delta]

Also, does it work without the *?

It could maybe?

[glad urchin]

without the * selector ?

[vast delta]

Yeah, just :webkit blablabla

[glad urchin]

not sure

[vast delta]

It might work like putting in div or svg

[glad urchin]

i did do that before using *
div, span, a, img, button ........it keeps going on

[vast delta]

I think the * tries every object and for example div only tries div objects?

[glad urchin]

yes

[vast delta]

So maybe :after and :before or the WebKit stuff only tries those objects?

[glad urchin]

no idea

ill try to remove all animations next, if that's possible

[vast delta]

*{animation-name:unset!important;} thank me later

[glad urchin]

oh

[vast delta]

I don't know if that works

[glad urchin]

https://raw.githubusercontent.com/Panniku/vc-snippets/main/simple-squarecord.css

[vast delta]

But in theory, it should unset (or put it to an invalid animation name) all animations

[glad urchin]

let me check

nope (?)

[vast delta]

nope (?) (?)

[glad urchin]

server hover / open profile / open settings

[vast delta]

Maybe try doing them separately, there is some thing called priority that I don't even wanna try to pretend to understand but I think it means being more specific makes it more likely to work

[glad urchin]

will try

[gilded cloak]

Discord animates using javascript, so this doesn't work

[karmic cliff]

revived an old project of mine

https://github.com/PrincessAkira/OpenAsar-Acrylic/blob/main/acrylic.theme.css if anyone knows how to make an if in css/scss to check if .theme-dark is loaded please tell me :D

[edgy sentinel]

why do you need that

[karmic cliff]

bc i make the sidebar transparent when on dark

and want to make it colored in whitemode

[edgy sentinel]

[karmic cliff]

i tried it with scss but cant seem to figure it out

[edgy sentinel]

.theme-dark .some-selector {}

[karmic cliff]

that didnt work sad;y

i tried that

weird

i guess it decided to work .-.

i hate css sometimes

[mortal mantle]

remade this using flexbox instead of grid

hope it will go well ...

what does the uploadinput do here ...

I have never seen it

[mortal mantle]

https://cdn.discordapp.com/emojis/1143890552765567147.gif?size=48&name=ShiggyTrans&quality=lossless

this is probably a bit better

[grand surge]

How do I change the text?

[mortal mantle]

Is it possible to separate the Send button from the div?

[edgy sentinel]

why flex?

grid seems better suited

[mortal mantle]

this entire component is a grid, but the buttons as shown above are flex

I should have stated that more clearly

[shy turtle]

today ima try for this to be GONE
i tried yesterday but didnt work, also tryna figure out how i can actually see it in console without making it appear, found a "force state" thing but didnt do anything

[autumn light]

Is there a way to offset embeds and reactions the same way I have for the text?

[modest osprey]

seems like this works

[id^="popout_"] {
  display: none;
}

[shy turtle]

oo yis

i just got somethin that worked too

[class*=layerContainer-2lfOPe] {
  display: none !important;
}```

theyre both not good tho cuz any popouts like the ones from icons like inbox, pins etc doesnt work lol

[modest osprey]

yeah

[safe python]

• .layerContainer-2lfOPe
• [class*=layerContainer-]
  choose one

dont do both

[modest osprey]

[id^="popout_"]:has([class^="more"]) {
  display: none;
}

maybe this?

[shy turtle]

[shy turtle]

yip thats better

[glad urchin]

trying something

nvm its broken

[zenith nova]

My biggest project ever

Also based Vesktop, literally never crashes, Discord is always crashing in this laptop for some reason, thank God I only use it when I have to turn off my desktop, but now with Vesktop it's not really an issue

[torpid void]

pls give me

i like very much

[zenith nova]

Hopefully soon

It's been in development for months

[torpid void]

ok

its amazying

amazing

[zenith nova]

Thanksss

[mortal mantle]

This just looks so impressive

[zenith nova]

Thank you so much

I'm not active here at all so it means a lot

[mortal mantle]

Make it Vesktop/Armcord exclusive

[vast delta]

Don't tell me you are a windows 7 user

[mortal mantle]

SO BASED IKR

Windows Vista even

[zenith nova]

10 on my Desktop, 11 on my laptop
Both heavily modified to look like longhorn + 7

My Desktop is obviously way more polished

[vast delta]

Acceptable

[zenith nova]

This is it

[zenith nova]

It kinda is Vencord exclusive, because I made a plugin for my theme and it's just for changing colour schemes with a menu, like real WLM xd

[torpid void]

i started a project to make linux mint look like windows 7 but i gave up cuz i am too stupid

[mortal mantle]

Vencord exclusive ain't enough

Vesktop exclusive

[spark veldt]

Would love to port it to BetterDiscord tbh

[mortal mantle]

just because it has proper color-mix support

[zenith nova]

🤔

Interesting

I need to check that

[alpine cove]

please explode

would love that

[zenith nova]

LMAO

[spark veldt]

I'm already dead. why would I die twice

[mortal mantle]

twice is better than once

[zenith nova]

The more the better they say

I just have trouble with dark mode

I think it's hard to make dark mode for old software, it always seems to look so wrong

[mortal mantle]

just keep it light mode

[spark veldt]

Also if this is solely because of me using BetterDiscord, Checkmate.
I use EVERYTHING.

[zenith nova]

What's the black one?

[spark veldt]

Development

Its basically my vanilla discord instance cuz its running completely stock.

Might install OpenAsar on it so that I can make it match my desktop more closely
https://Riddim-GLiTCH.hacked-your.tech/content/cdn/oSpfOjwHxSXY.png

[alpine cove]

husk

[mortal mantle]

[worthy dust]

bro even changed the icons, thats dedication

[zenith nova]

Thankss

Some icons are the modern ones

Because they keep changing to the new one when updating

So I need to replace them with the old one again

[mortal mantle]

horror

[autumn light]

Is there a way I could assign a colour to bold text?

[cedar cairn]

i think you can just style any <strong> elements

that are children of whatever classes youre trying to style

[edgy sentinel]

^

[class*=messageContent] strong {
  color: salmon;
}

damn i kinda like this

[mortal mantle]

real

[shy turtle]

salmon, what a great color

[mortal mantle]

i love salmon

[autumn light]

Thanks mate!

What else would fall under <strong>

[silent wadi]

requesting for a css snippet for (refer to the top right) moving the [#three13338] bar to the left up until the [#1141537912941445130b2d31] scrollbar, and extending the [#1141537912941445130b2d31] member list all the way to the top. (please lol)

[glad urchin]

might do if someone doesn't

[vast delta]

So you basically just want the buttons from the top of the screen moved to the left and have the memberlist go up to the top?

[glad urchin]

yes

[silent wadi]

not just the buttons, the bar below it too

[vast delta]

So exactly what I said

[mortal mantle]

well, the container shadow will automatically move when you shrink it

[silent wadi]

oh yeah sure

ooo i see yup that then

[vast delta]

Probably just gonna have to move the memberlist up however many pixels the top bar is thick, change the max-width of the top bar to like 220px less and add the amount of pixels moved up to the height of the memberlist

Not able to attempt right now but I can look up the memberlist's name

[silent wadi]

ah dw im patient

[vast delta]

You're gonna have to stretch your patience because I won't be home for another 6 hours

[silent wadi]

ive waited longer

as for this snippet:

.containerDefault-YUSmu3:hover{background:var(--bg-overlay-4,var(--background-accent));border-left:3px solid var(--primary-500);border-radius:0}.containerDefault-YUSmu3.selected-2TbFuo{background:var(--bg-overlay-1,var(--background-secondary-alt));border-left:3px solid var(--primary-560);border-radius:0}.containerDefault-YUSmu3.selected-2TbFuo>div>div>.link-1_kTxV>[class*="emojiColorFill-"]{margin-left:-30px;margin-top:0}.link-1_kTxV{background:none!important}.optionsList-dmHy1l{display:flex;gap:8px;flex-wrap:wrap}.optionsList-dmHy1l>button{width:calc(50% - 4px)}.optionsList-dmHy1l>div{width:100%}

is there a way to change the selection's accent to a lighter grey on light mode? just like the same background color as when you hover on a member's tab.

[mortal mantle]

.membersWrap-3NUR2t {
    margin-top: -3em;
    z-index: 1;
}
body:not(:has(.chat-1-OBC7)) .chat-2ZfjoI:not(:has(.profilePanel-2VBkh8)) .container-ZMc96U {
    max-width: calc(100% - 240px);
}
.container-2o3qEW {
    height: calc(100% + 50px);
}

pretty sure thats it for moving the members to the top

[rugged echo]

minified css

[silent wadi]

oo! yup looks good

thank youu

[mortal mantle]

Change the highlighted line's background to var(--bg-overlay-3,var(--background-modifier-selected))

[silent wadi]

oh oops forgot toadd a flashbang warning lol mb guys

[rugged echo]

I am used to people posting screenshots using light mode

[mortal mantle]

light mode looks cool though

if only there were some option to change between light/dark mode based on time of day

[silent wadi]

unfortunately nothing's changed

[silent wadi]

during the day mhm

[rugged echo]

kinda ass, it should be a bit less white

[mortal mantle]

looks not white enough for me

I kinda dig it

also coolesding why is ur name lesbiest straight now

[vast delta]

(insert the guy denying once then agreeing non-verbally meme)
top: 0px; 📉

margin-top: -3em; 📈

[mortal mantle]

REAL

[vast delta]

I saw straightest lesbian and I liked the idea

[mortal mantle]

but are you one

[vast delta]

Wellllll

Yeah sure

very important CSS topic

[mortal mantle]

exactly

[vast delta]

Light mode be like:
*{
background: white!important;
background-color: white!important;
color: white!important;}

omg discord

[mortal mantle]

just use nitro theme

[vast delta]

Nitro theme be like (now the guy with the meme again)
Vencord 📉

Paying a billion dollar company 10 bucks a month for colours and a banner 📈

[mortal mantle]

omg light theme oneko looks way better than dark mode

[vast delta]

THATS TRUE

I love it

[mortal mantle]

wtf radial status good

[silent wadi]

ah that's weird, the profile card on the right in dms gets cut off

[mortal mantle]

wasn't it cut off in the first place?

[silent wadi]

nope, it's noticable when the user has a banner

[rugged echo]

I wasn't talking about nitro themes but yeah I guess that counts

[silent wadi]

i think

would like the dm profiles to also be extended

[mortal mantle]

.membersWrap-3NUR2t, .profilePanel-2VBkh8 {
    margin-top: -3em;
    z-index: 1;
}
body:not(:has(.chat-1-OBC7)) .chat-2ZfjoI:not(:has(.profilePanel-2VBkh8)) .container-ZMc96U {
    max-width: calc(100% - 240px);
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
    max-width: calc(100% - 340px);
}
.container-2o3qEW {
    height: calc(100% + 50px);
}

[silent wadi]

splendid! tyty

[silent wadi]

aand about this, any update?

oh wait nvm i got it, changed the .containerDefault-YUSmu3:hover instead

better

[silent wadi]

another visual bug found, in a stage's full view the client still thinks there's an extension beside it (when there's none) so the buttons are pushed to the left, any possible workaround?

[mortal mantle]

i have never used stage before

no idea

[silent wadi]

oo np,

anybody else reading this knows the code for this?

[mortal mantle]

markdown?

real

[silent wadi]

lol.. wait

oh they didn't block the ## one

[mortal mantle]

nope, all blocked

[silent wadi]

ah maybe bypassed by putting normal text at the first line

[silent wadi]

also, cant seem to find a way to fill the white space at the bottom of the member list of a thread, any ideas?

[mortal mantle]

Well, too few members in your server I guess?

it's gonna auto crop

[glad urchin]

cant height be 100% ?

weird, but this works @silent wadi

.title-31SJ6t {
    max-width: calc(100% - 240px);
    position: absolute;
}

.container-2o3qEW {
    height: 100%;
}```

turn off member list and a little broken

[silent wadi]

i dont think so, this is what it looks like without the code

becuz the code forces the member list upwards a few pixels, it leaves a white space at the bottom

[glad urchin]

this should work

.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U {
    max-width: calc(100% - 240px);
    position: absolute;
}```

[silent wadi]

uh nah it doesn't sadly

[glad urchin]

do note there is a small shadow thing, dont know how to remove it

one ec

.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .container-ZMc96U{
    max-width: calc(100% - 240px);
    position: absolute;
}```

finally

@silent wadi

.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .container-ZMc96U{
    max-width: calc(100% - 240px);
    position: absolute;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
    max-width: calc(100% - 340px);
    position: absolute;
}```

[glad urchin]

image zoom lens shadow fix:

/* VC image zoom fix */
.vc-imgzoom-lens {
    box-shadow: none;
    filter: none;
}```

box-shadow -> the major shadow
filter -> a small glow on the border

[silent wadi]

actually i was talking about this spot right here, is your code referring to this?

[glad urchin]

yes

[silent wadi]

added the code in, it only pushed the memberlist even more to the top

[glad urchin]

where are you testing this

[silent wadi]

here's my quick css

[silent wadi]

i have no idea.

[glad urchin]

it works for me

[silent wadi]

just bothers me lmao

ooo, maybe it's cuz you have the online members plugin?

[glad urchin]

that only adds a span to the top, doesnt affect the existing css

[silent wadi]

hmm weird

[glad urchin]

do you have both snippets on this

if so delete one

[silent wadi]

OH

[glad urchin]

top is aoi, bottom is mine
one is conflicting

[silent wadi]

ohh theyre conflicting i see

yup, works now thank you p

[glad urchin]

np

[silent wadi]

you see it?

[glad urchin]

what's wrong

scrollbar ?

[silent wadi]

yup

it goes through

(this is without the code)

oh cool it's nighttime

[glad urchin]

not sure what's wrong with the scrollbar

do you want it to be aligned completely to the right

[silent wadi]

uh no..the tip of the top part should end below the top bar (refer to the 2nd screenshot), but rn the tip of the part extends further into the top bar (refer to the 1st screenshot).

[glad urchin]

it looks fine ?

on mine its fine too

oh...wait

[silent wadi]

scroll up to the top using the scrollbar and youll see

[glad urchin]

.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .container-ZMc96U{
    max-width: calc(100% - 240px);
    position: absolute;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
    max-width: calc(100% - 340px);
    position: absolute;
}
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .container-ZMc96U {
    max-width: calc(100% - 418px);
    position: absolute;
}

.chatContent-3KubbW {
    margin-top: 48px;
}```

wait

small bug found, if you resize the window too much the top bar icons overflow

not sure how to make it compress

made the search result header consistent

.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .container-ZMc96U{
    max-width: calc(100% - 240px);
    position: absolute;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
    max-width: calc(100% - 340px);
    position: absolute;
}
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .container-ZMc96U {
    max-width: calc(100% - 418px);
    position: absolute;
}
.chatContent-3KubbW {
    margin-top: 48px;
}
.searchHeader-1r_ZSh {
    height: 48px;
}```

[silent wadi]

thank you so much 🛐

[glad urchin]

np

[vast delta]

@mortal mantle https://cdn.discordapp.com/attachments/123136820409139200/1144538022658969660/u7m61pUm.png how did you theme the top bar in vesktop???????

I thought it was impossible!

[glad urchin]

discord top bar + ".winbar" something class in the html

[mortal mantle]

Yeah

[vast delta]

I know it's .winbar but the vesktop bar seems to be its own thing and not in the html of discord

[mortal mantle]

Did you know that Vesktop can now use discord native titlebar

[vast delta]

Since when?

[mortal mantle]

0.2.8 something

[vast delta]

I literally uninstalled it for that

[mortal mantle]

you're 2 versions late

[vast delta]

oof

Well, time to update my snippet woo

[mortal mantle]

Fr

[stuck plinth]

but can it on linux

[vestal field]

woah cool

[edgy sentinel]

[glad urchin]

fire

[harsh solstice]

I was thinking about making this like a month ago

I just didn't know how to approach it or what elements to actually add things to

[edgy sentinel]

server settings

anything else that would be useful?

[edgy sentinel]

i will also add data-is-self

[dusky hare]

flashbacks to the days of normalized css classes and theme incompatibility horror

utility attributes good though

[mortal mantle]

!!!!!!

finally I can simulate WhatsApp Messenger

[edgy sentinel]

pretty cool

if there are any other elements inside discord where you could use such data attributes, please comment here: https://github.com/Vendicated/Vencord/pull/1686

provide as much detail as possible:

• What element specifically?
• What attributes do you want?
• What's your use case? What are you trying to do?

do not suggest elements where you can already achieve the same by matching some child using :has
do not request demangled classes (classes without the -ajsjakjs suffix)

[edgy sentinel]

would data-content be useful? then you could select messages with specific content

[mortal pebble]

Maybe data-content for each line could be useful, you could do something like [data-content^=">"] { color: green } to create greentext and you could still do [class^="messageListItem"]:has([data-content*="some text"]) { color: red } if you want to style the message item itself

[edgy sentinel]

that's the idea || nah ive been meaning to do this for a while cause its useful asf ||

[glad urchin]

essentially themes+ port to vencord

🔥

[alpine cove]

dont think that would work for multiple lines

[mortal mantle]

just use multiple "+" symbols to grab the next messages

[mortal pebble]

Yeah you could do something like [data-content$="end of line"] + [data-content^="new line"]

Which would select this:
Anything end of line
new line anything

[vagrant cobalt]

hate to ping for this but i really wanna know since ive been trying to get an aero discord theme for ages - do u possibly know when this would be out? this looks amazing and id love to use it

[zenith nova]

No, but closed beta is soon, so release should be soon hopefully

[vagrant cobalt]

would i be able to be part of the closed beta? lol

[zenith nova]

It's mostly for close friends of mine since I'm not active in any of these styling/modding communities (like even this one for example) and I don't know who's trustworthy and who isn't (no offense to you), and I'm a perfectionist so everything has to release publicly in a perfect state, but I want to open the closed beta to more people too

[vagrant cobalt]

fair enough i understand lol

[robust totem]

https://cdn.discordapp.com/emojis/1059690570085310515.gif?size=48&name=neppy&quality=lossless

[edgy sentinel]

just stop caring and make it public

i have all my code public on github

https://github.com/Vendicated?tab=repositories&type=source :)

[cedar cairn]

i have created fire

[slim pond]

border-radius: 50%

[mortal mantle]

50% oval

[vast delta]

Background red please

[mortal mantle]

Horror

I LOVE BACKGROUND RED

[slim pond]

the hello world of css

color: red;

background-color: red;

[mortal mantle]

fill: red also

And !important for all 3 of them

[slim pond]

[mortal mantle]

[vast delta]

TRUE

I literally always use background or color red when trying to change new elements or when making after objects

[edgy sentinel]

mid

border: 1px solid salmon best

[vast delta]

May I do cod?

[edgy sentinel]

not a colour sorry ♥

[mortal mantle]

SALMON
LIGHTSALMON
DARKSALMON

oh shiggy has cute role now

[vast delta]

me shiggy?

[cedar cairn]

yopyopyop

[silent wadi]

oh right one more thing, got the code to change the member list's background color the same as the server list's?

[silent wadi]

and:

button[class*="button"][class*="lookFilled"][class*="colorBrand"][class*="sizeMin"]{background-color:var(--background-primary)}button[class*="button"][class*="lookFilled"][class*="colorBrand"][class*="sizeMin"]:hover{background-color:var(--brand-experiment)}

anyway to make this compatible with light mode?

[mortal mantle]

prefix .theme-dark and .theme-light

[silent wadi]

could you make the snippet for me?

[vast delta]

Just put .theme-dark before it for dark mode and .theme-light for light mode

[mortal mantle]

I'm not on PC rn sorry

[silent wadi]

~~oh right this thing as well, from @import url(https://minidiscordthemes.github.io/Snippets/SplitMessageBars/SplitMessageBars.css); together with @import url(//dablulite.github.io/css-snippets/ConsistentChatbar/import.css);.

whats the snippet for pushing the message bars just a little bit down~~

this, #🎨-theme-development message

[silent wadi]

wait i didn't follow, will that change the "Read all" font's color into dark on light mode?

[silent wadi]

also, could you round this corner (1st image) like the one on the left (2nd image)?

@import url('https://d3sox.github.io/complementary-discord-theme/hide-nitro-upselling.theme.css');
this snippet is conflicting with the "Preview Messages" plugin (the eye button gets hidden), anyone know what's up and a workaround? this, #🎨-theme-development message

[class^="channelTextArea"] [class^="buttons-"] > button, // Gift Button might be the culprit #🎨-theme-development message

[silent wadi]

uh hey man @robust grove you know the snippet to not let your button get hidden? :p tyty, #🎨-theme-development message

[rugged echo]

you can't use // for comments I think

[silent wadi]

well it's from https://d3sox.github.io/complementary-discord-theme/hide-nitro-upselling.theme.css and it works #🎨-theme-development message

[class^="channelTextArea"] [class^="buttons-"] > button, this probably thinks the preview messages button has the same container as the gift button #🎨-theme-development message

[silent wadi]

found another one

happens when the member tab is collapsed

[robust grove]

maybe this

button[aria-label="Preview Message"][type="button"] {
    display: block !important;
}

[silent wadi]

it is that, thank you!

[silent wadi]

wbu @teal cave you know the snippet for moving this downwards a bit? nvm ty, #🎨-theme-development message

[edgy sentinel]

stop pinging random people

figure it out yourself

[silent wadi]

..uh not random people, theyre the makers of the code

but ok

[silent wadi]

(i indeed figured it out myself ueheheheh, here's the code for anyone backreading)

.newMessagesBar-1hF-9G {
    padding-bottom: 0px!important;
}
.barBase-3xxDXu {
    padding-bottom: 0px!important;
}

[glad urchin]

@silent wadi ```css
.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .container-ZMc96U{
max-width: calc(100% - 240px);
position: absolute;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
max-width: calc(100% - 340px);
position: absolute;
}
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .container-ZMc96U {
max-width: calc(100% - 418px);
position: absolute;
}
/* /
.chat-2ZfjoI:has(.container-2o3qEW) .chatContent-3KubbW,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .chatContent-3KubbW,
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .chatContent-3KubbW,
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .chatContent-3KubbW {
margin-top: 48px;
}
/ */
.searchHeader-1r_ZSh {
height: 48px;
}

wair

inlined

[silent wadi]

oo nice tyty could you also match the member list's background color as the server list's?

[glad urchin]

ah yes discord

[glad urchin]

it is the same color ?

[silent wadi]

it is?

[glad urchin]

ohh, server list

ill have to make the member background transparent and hope that hover is also transparent

[silent wadi]

oooo

[glad urchin]

is this fine enough or

[silent wadi]

uhh, is it not possible to make it transparent?

[glad urchin]

it is

[silent wadi]

oo can you make the member background transparent then :]

or just match the member list's background

[glad urchin]

/* member list matching with server list */
.members-3WRCEx {
    background: var(--bg-base-tertiary);
}
.member-2gU6Ar {    
    background: none;
}

[silent wadi]

ah yay :D tytyty

[glad urchin]

np

[silent wadi]

im guessing this line cant merge with the color?

[glad urchin]

i have no idea what that shadow is

[silent wadi]

thats probably the title bar

[glad urchin]

it isnt from titlebar
if you remove the other snippet i gave you, that shadow is below the channel bar

[silent wadi]

oh weird

[silent wadi]

well anyway have u checked this out

[glad urchin]

after i find this shadow

[silent wadi]

sure sure

[glad urchin]

found it

[glad urchin]

@silent wadi consistent top bar

/* -- consistent top bar */
.chat-2ZfjoI:has(.container-2o3qEW) .container-ZMc96U,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .container-ZMc96U{
    max-width: calc(100% - 240px);
    position: absolute;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
    max-width: calc(100% - 340px);
    position: absolute;
}
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .container-ZMc96U {
    max-width: calc(100% - 418px);
    position: absolute;
}
/*  */
.chat-2ZfjoI:has(.container-2o3qEW) .chatContent-3KubbW,
.chat-2ZfjoI:has(.membersWrap-3NUR2t) .chatContent-3KubbW {
    margin-top: 48px;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .chatContent-3KubbW {
    margin-top: 48px;
}
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .chatContent-3KubbW {
    margin-top: 48px;
}
/*  */
.searchHeader-1r_ZSh {
    height: 48px;
}
.content-1jQy2l::before {
    display: none;
}
/* -- */```

match member list to server list
```css
/* -- member list matching with server list */
.members-3WRCEx {
    background: var(--background-tertiary);
}
.member-2gU6Ar {    
    background: none;
}
.container-ZMc96U {
    border-radius: 0 8px 0 0;
}
.content-1jQy2l {
    background-color: var(--background-tertiary);
}
/* -- */

wait

ffiixed

[silent wadi]

damn bro the dedication o7

(thanks broskie)

[glad urchin]

np

[silent wadi]

wait is it supposed to be like this

whats the --bg name for the color of the top bar

[glad urchin]

one sec

/* -- member list matching with server list */
.members-3WRCEx {
    background: var(--background-tertiary);
}
.member-2gU6Ar {    
    background: none;
}
.container-ZMc96U {
    border-radius: 0 8px 0 0;
}
.content-1jQy2l {
    background-color: var(--background-tertiary);
}
/* -- */

[silent wadi]

ah, thank you very much :]

[glad urchin]

np

[silent wadi]

will let u know if i find more imperfections kek

[empty radish]

I cant download in Android

[mortal mantle]

vns

[cloud jolt]

👉 #🏥-vencord-support-🏥

[silent wadi]

#🎨-theme-development message

ah by the way, you use the read all plugin too right? found this snippet to match it with discord's scheme better, but on light theme the font's color doesn't change to [#313338] can u modify the snippet to do that?

[glad urchin]

i don't use the plugin

[silent wadi]

o i see

[dusky hare]

you can probably just add color: var(--text-normal); inside the the first set of curly brackets

[silent wadi]

yup, tyty katlyn

[silent wadi]

and for the :hover, what's the var(--text-???); color for #FFFFFF just like when you're hovering on the Direct Messages' icon?

[dusky hare]

if you just want it to be pure white you can put #FFFFFF instead of ver(whatever)

but it won't change accurately for dark theme

I'm not on pc anymore to look for other cas variables

[silent wadi]

oo np ill stick with the hex code for now

[silent wadi]

found it, it's css color: var(--white-500)

[grand surge]

is there a selector for all instances of a certain word / phrase / string?

[edgy sentinel]

no

[mortal mantle]

avatar statuses

while they technically do work

I will have to sometimes click on the user's profile

[shy turtle]

that looks nice, i want it now

is it for chat only? if its also for memberlist & stuff then that would replace the radial statuses thing i have

[mortal mantle]

its only for messages, you already have the radial statuses thing for the memberlist + profile

.contents-2MsGLg .avatar-2e8lTP {
    scale: 0.85;
    margin-top: -0.625em;
    border: 4px solid transparent;
    box-shadow: 0 0 0 2px #747f8d
}
.contents-2MsGLg:has(svg[fill="var(--green-360"]) .avatar-2e8lTP {
    box-shadow: 0 0 0 2.5px #43b581
}
.contents-2MsGLg:has(svg[fill="var(--yellow-300"]) .avatar-2e8lTP {
    box-shadow: 0 0 0 2.5px #faa61a
}
.contents-2MsGLg:has(svg[fill="var(--red-400"]) .avatar-2e8lTP {
    box-shadow: 0 0 0 2.5px #f04747
}

Turn on PlatformIndicators for this to work

[runic lake]

can someone help me that the top option works again ?
example i cant hide the help icon or the user panel button

it is this option:
/* NOTE: change "block" to "none" if you want to hide the listed icons! */

if someone can tell me what is wrong i will be very thankfull

[gilded radish]

Can you send a screenshot? I'm on mobile atm

@runic lake

[runic lake]

from the file mate ?

[gilded radish]

Yes

[runic lake]

ok hold on

[gilded radish]

Take your time

[runic lake]

the file is kinda big with all the css snippets

is it readable for you ? @gilded radish

[gilded radish]

Hmm

Yeah idk

Wait for someone else

[runic lake]

kk

[shy turtle]

it worky ty

[fringe wharf]

How do I fix this??

[fringe wharf]

It had the same thing with the normal chat but I fixed it with

.chat-2ZfjoI {
  margin-top: 0px
}```

[vast delta]

how do i select the white text again, i forgorr

when there is no other useful attribute

i forgot to add the picture lol

[mortal mantle]

.markup-eYLPri.messageContent-2t3eCI>span

[vast delta]

i mean based on the text that is on there

not just the object, there was some way using :has and its gone from my head :(

[mortal mantle]

then idk :(

[mortal mantle]

i could do something like this

but not word-specific

[vast delta]

wait how?

[mortal mantle]

spans in messages are separated by a punctuation

so if you select just the nth-child you could color that specific part

[vast delta]

oh yeah no thats not it

[unkempt silo]

:nth-child(3):has(span)

[vast delta]

thats still selecting the object based on being a span, im talking about selecting it based on the text

[unkempt silo]

class?

[vast delta]

no class

just based on the white text like in the image aoi sent

[mortal mantle]

she wants to color just the text "image" for the example

[vast delta]

im not talking about selecting based on being a select kind of object, i specifically mean based on for example having the text "test"

so this message wouldnt be selected

but this test message would be

[toxic yew]

css cant do that

[vast delta]

hm, im pretty sure someone showed me that somewhere

well ill see if i can find it

[mortal mantle]

let me test my hypothesis

a bit of manipulation

[class*=messageContent] strong {
  color: salmon;
  font-weight: normal;
}

[unkempt silo]

thats just stong

[mortal mantle]

you can disguise it as strong and change it back to normal font-weight

[unkempt silo]

but what would be the point of that

[mortal mantle]

then what would be the point of coloring just a specific word

😭

[unkempt silo]

idk i was confused from the start

[vast delta]

hahaha

its not just for messages, ive seen those whitetext classes in multiple places and i hate them

[mortal mantle]

like this

horror

[vast delta]

yeah

[mortal mantle]

but well

[vast delta]

but that one you can easily select

there are also some objects that dont have any class or stuff scattered around and its a nightmare

[mortal mantle]

how

[vast delta]

well probably not possible i guess, maybe i misremembered

[little agate]

has anyone randomly got any username background styles, like in a lot of forums
e.g.

[vast delta]

yooo thats cool

if i do :after on an image it doesnt work, can i fix that or do i have to use a different object to :after?

[little agate]

is there a way to concat variables into things like a url()?

such as url("https://google.com/search?q=" --random-var-name "&tbm=isch")

i want to use this in a bg thing that just uses a var to select between a couple styles

[vast delta]

so you wanna for example do example.com/(variable)?

[little agate]

nop

dl.issou.best/ordr/assets/text_bg/text_bg(variable).gif

is what id use it for

[vast delta]

i dont know if that works but i saw a snippet that used a variable that you would name for example 23 and it would have a specific value, ill send you the message link

[toxic yew]

why not define that random var name to whole url

[little agate]

true. it just looked nicer for people to only see a single number instead of a whole link in my head

but ill do that

[vast delta]

i cant find it

[vast delta]

whats the color variable for the streaming activity? for example for being idle it would be --yellow-300

[toxic yew]

--twitch

[vast delta]

thank you, lets hope it works

[teal cave]

The updated theme docs on BD are worth a read for the generally applicable theming advice https://docs.betterdiscord.app/themes/

[vast delta]

i forgot this existed lol

[teal cave]

it didn't exist until like 3 days ago

new section!

[vast delta]

i guess i didnt forget it existed lol

[little agate]

are these decent selectors? im not the best at css lol

[vast delta]

i think doing div div is bad

[little agate]

idk another way as i feel div:has(img[src*=blahblah]) is too generic and will match random things

[toxic yew]

remove div, span that next to [
[class=vc-rdb-view] to .vc-rdb-view

[little agate]

thank you!!

so to something like this:

[vast delta]

comments are always bad :)

[little agate]

ill move the block in the middle to the end

but its readable if you dont know what theyre doing, therefore easily removable

[teal cave]

I'd also change the img to just img[src*="589322754470445057"] because long string with anywhere selector loses performance fast

[little agate]

will do!

done

this is what ive got finally, anything i should change?

[open cove]

Anyone know what css code is responsible for the unread channels? I have the fluent11 theme installed but the unread looks almost identical to the read ones

[vast delta]

we dont know.

[vast delta]

ill make you look like a NOOB :)

no probably not

[edgy glacier]

Hey, how do I make this be the same colour as the rest?

https://i.imgur.com/elSsYcu.png

[silent wadi]

(offtopic :]) - #1095648542892228618 message

[dark dragon]

Nope, url() is one of the few things that can't be interpolated in css these days. They're planning to add it I think, but it was still a way off last I checked

[dark dragon]

psuedo elements won't work on any replaced elements. I believe this is also planned, but no eta

[silent wadi]

/* match ping color with theme + blurple hover */
.theme-light [class^=numberBadge] {color: var(--header-secondary); background-color: var(--background-primary)!important;}
.theme-dark [class^=numberBadge] {color: var(--header-secondary); background-color: var(--background-primary)!important;}
[class*=unreadMentionsBar], [class*=mentionsBar] {display: none;}

.avatar:has(badge) .badge:hover {color: var(--header-secondary);background: var(--brand-experiment)

editing a snippet, trying to accomplish the comment's goal, cant seem to make the "blurple hover" work. it's supposed to change the number badge's background color to discord's blurple when hovering over a user/server's avatar on the server list.

[dark dragon]

I might be misunderstanding what you're asking for. But it should just be this, no?

.listItem-3SmSlK:hover .numberBadge-37OJ3S {
  background-color: var(--brand-experiment) !important;
}

[silent wadi]

mhm that's that, thank you!

/* match ping color with default theme + blurple hover */
[class^=numberBadge] {
    color: var(--header-primary);
    background-color: var(--background-primary) !important;
}

.listItem-3SmSlK:hover .numberBadge-37OJ3S {
    color: var(--white-500);
    background-color: var(--brand-experiment) !important;
}

for anyone who wants ^

[dark dragon]

You shouldn't need to set the colour and background colour for each theme, those custom properties are defined on the theme class

[silent wadi]

oo okok

[edgy sentinel]

oh my god i love container queries

.chatContent-3KubbW {
    container-type: inline-size;
    container-name: chat;
}

@container chat (max-width: 500px) {
    .chatContent-3KubbW .buttons-uaqb-5 {
        display: none;
    } 
}

hides chat buttons if chat gets too narrow

so
wh
en
yo
u
ty
pe
me
ss
ag
es
it doesnt look like this

[digital pier]

🔥

[edgy sentinel]

idk why this is so satisfying

[mortal mantle]

!!

[sharp shell]

long string with anywhere selector loses performance fast
whart

[teal cave]

I accidentally used *= with a whole bunch of svg path selectors, like path[d*="entire path like 300 chars long"], which made toggling the theme the slowest experience on earth. Not so bad when I only use the first 10 chars or so of the path.

[edgy sentinel]

where u take that from

[sharp shell]

scroll up

[grand surge]

@vast delta hi

[vast delta]

Hi!

[grand surge]

idk if it was possible with css

[vast delta]

So, you open devtools, you go to inspect element (the box with the mouse pointer) click on the window thing you want larger, copy the name that comes after class=, put that with a dot before into quick CSS and then add {width:100%;height:100%;}

[grand surge]

ok

[grand surge]

doesn't work

probably because it's an iframe

[glad urchin]

it should still work

[grand surge]

i tried it and it didn't work

[glad urchin]

try display: none

if it disappears, it works

then try again with the same thing except add ! important at the end

[teal cave]

pretty pog document how browsers work

[grand surge]

ok

[worn prawn]

i want to disable the stream preview or whatever you call this thing

[glad urchin]

this (#🎨-css-snippets message) but change to display: none

[worn prawn]

what do i change that from?

[toxic yew]

[class*=pictureInPictureWindow] {
    display: none;
}

[worn prawn]

o

ty

it worked

https://tenor.com/view/dancing-cat-dancing-kitten-60fps-boogie-cat-gif-24303276

[grand surge]

display: none makes it disappear but changing the width and height doesn't do anything

[glad urchin]

probably an old snippey

snippet

change the width and height on the one above

[grand surge]

ok

[grand surge]

that just makes it disappear

[toxic yew]

did u run the js snippet i gave u

[grand surge]

it works but it's too manual

i want it to fill the entire vc section like streams do

[vast delta]

replace your own avatar in this little section at the bottom with a custom one (replace mine obviously) [pretty good if you have some snippet that makes it larger and its resolution sucks]css .container-YkUktl .avatar-31d8He {display: none;} .container-YkUktl .avatarStack-3Bjmsl:after { height: 32px; width: 32px; display: block; position: absolute; content: ""; background: url(https://cdn.discordapp.com/avatars/406084422308331522/30e9ece40fa614f14c3f17e98476d88c.webp?size=128); background-size: 100%; border-radius: 50%; }

[mortal mantle]

why do you keep wasting time on css

[vast delta]

says you??

[little agate]

but aoi is cute

[vast delta]

IM NOT CUTE??????

[mortal mantle]

I stopped

I'm busy for the next days

[vast delta]

didnt you say you were busy for like a week

yeah see

[mortal mantle]

probably 2 weeks even

[vast delta]

youre gonna come back crawling in a week continuing with css

[mortal mantle]

no

I have other things to do

gotta get back to video and photo editing

haven't got time since beginning of semester

[vast delta]

is this a bad time to announce i just found a performance upgrade for our radialstatus snippet? lol

[mortal mantle]

Do it so I can import the snippet

[vast delta]

yeah give me a sec to implement it, ill update the github one

[vast delta]

can i make it so :has only looks one at the next item, not at every item after it?

[edgy sentinel]

what?

define next item

[vast delta]

the tree for example is parent>childA>childB

childB has some property and when i would just do *:has(that property) it would be for both parent and childA

but i want it so that doing *:has(that property) checks every object, but is only successful if the firstchild has that property, not parent or something earlier in the tree

[alpine cove]

doesnt :has(> .prop) work

[stuck plinth]

what does this do

[digital pier]

the message literally says what it does 😭

[stuck plinth]

it isn''t clear to me

[stuck plinth]

ohhh the avatar there

[jovial night]

https://cdn.discordapp.com/emojis/1076702280117669908.gif?size=48&name=fadeaway&quality=lossless

[vast delta]

I'll check soon

[minor steeple]

what theme are you using?

[worn prawn]

Midnight

I seen someone use super reactions without nitro is that possible on vencord

[vast delta]

Not for everyone, though I saw someone make their own sr animation

[worn prawn]

Oof

[toxic yew]

it's free first 2

[worn prawn]

O

[vast delta]

Or that

[mortal mantle]

Not anymore

Maybe your first 2 super reactions of all time could be free

[mortal mantle]

mmh feels great to finally have some time off

[vast delta]

Mm feels great to only have time off after 8 hours of school

[mortal mantle]

the moment you start your school year is when I can finally have summer break

[mortal mantle]

8 hours of school in Germany??? whar

[vast delta]

Well 8 lessons, which are each 45 minutes

Plus 75 minutes of break

I leave at 6:40 and come back at 16

*{display:none;} to stay on topic

[mortal mantle]

damn

[worn prawn]

so when i want to send a sticker in a server the sticker isnt in im forced to send it, like so

is there a way to make it act like a normal sticker?

[digital pier]

that be fake nitro

[worn prawn]

i have fake nitro on

[digital pier]

yes

animated stickers are converted to apng or something so the plugin converts them back to gifs

that’s why it doesn’t just grab the sticker link like it does for static ones

but i doubt you could make it act like a normal sticker with css without making it do the same for all attachments

[worn prawn]

is there a way around it?

o

[digital pier]

not really i think

it’s just the way discord manages animated stickers

[worn prawn]

well we tried

https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=48&name=shiggy&quality=lossless

[digital pier]

https://cdn.discordapp.com/emojis/1059690570085310515.gif?size=48&name=neppy&quality=lossless

[vast delta]

https://cdn.discordapp.com/emojis/1059690570085310515.gif?size=128

[plush ermine]

great theme

[vast delta]

https://cdn.discordapp.com/emojis/1024751291504791654.gif?size=128

[valid heron]

is there a css snippet that swaps the pronouns and timestamp when using pronoundb?

[silent wadi]

(offtopic) #1095759697656692736 message

[harsh solstice]

i don't think thats possible because the elements are one after the other

maybe some terrible jank with RTL characters would work

[edgy sentinel]

it's possible

[valid heron]

fairs

[edgy sentinel]

https://developer.mozilla.org/en-US/docs/Web/CSS/order

[harsh solstice]

its block and inline, not flex or grid

[edgy sentinel]

just make it flex

[harsh solstice]

https://i.toxicaven.dev/ktrism853fkB
jank

[edgy sentinel]

can u reorder the dot as well

[robust totem]

you could possibly just use a font that hides the dot, and add another dot as a pseudo element

[edgy sentinel]

cursed

can you chop the dot off by using a translateX and overflow hidden?

[silent wadi]

fits better

/* match ping icon with primary bg + danger color hover */
:root {
    --ping-hover: #DA373C
}
[class^=numberBadge] {
    color:var(--header-primary);
    background-color:var(--background-primary)!important
}
.listItem-3SmSlK:hover .numberBadge-37OJ3S {
    color:var(--white-500);
    background-color:var(--ping-hover)!important
}

[silent wadi]

#1095759697656692736 message anybody? currently experimenting for now

[rugged echo]

I did a funny, I thought it would look cool, but nope
the text was on purpose just so it matches

[teal cave]

needs to go in snipsnops imediately

[rugged echo]

I can't, no role perms

my favorite platform, drocsiD

[glad urchin]

good css

[vast delta]

body? do *

[silent wadi]

open if willing to help
||reimagining this snippet, would it be possible to move the search bar at the top right (top of the member list), moving the member list back down to its original spot?

/*! consistent top bar - extends member list !*/
.chat-2ZfjoI:has(.container-2o3qEW,.membersWrap-3NUR2t) .container-ZMc96U {
    max-width: calc(100% - 240px);
    position: absolute;
}
.chat-2ZfjoI:has(.profilePanel-2VBkh8) .container-ZMc96U {
    max-width: calc(100% - 340px);
    position: absolute;
}
.chat-2ZfjoI:has(.searchResultsWrap-5RVOkx) .container-ZMc96U {
    max-width: calc(100% - 418px);
    position: absolute;
}
.chat-2ZfjoI:has(.container-2o3qEW,.membersWrap-3NUR2t,.profilePanel-2VBkh8) .chatContent-3KubbW,
.grid-21dB-S,
.list-3FIpnh {
    margin-top: 48px;
}
.searchHeader-1r_ZSh {
    height: 48px;
}
.content-1jQy2l::before {
    display: none;
}
.banner-1YaD3N {
    border-radius: 8px 8px 0 0;
}
.profileColors-2AgAV4 {
    border-radius: 8px;
}
.none-1rXy4P {
    background-color: var(--background-tertiary);
}
```||

[edgy sentinel]

format your css jeez

[silent wadi]

mb ☠️

[mortal mantle]

Vee's right

:has can have multiple elements inside, you don't have to write it 4 times

[silent wadi]

fixed? xD

[alpine cove]

my mom writes css rules in one line and insists that's good practice

[edgy sentinel]

YOUR MOM??

[alpine cove]

IM SERIOUS

😭 she uses wordpress

[vast delta]

fixed [aria-label="Channel header"] { width: calc(100% - 120px); } .container-2o3qEW { top: -50px; right: 0px; position: absolute; height: 100vh; }

[vast delta]

wait its overlays chat lmao

[edgy sentinel]

kill her

[vast delta]

[aria-label="Channel header"] {
  width: calc(100% - 240px);
}
.container-2o3qEW {
  top: -48px;
  right: 0px;
  position: absolute;
  height: 100vh;
}
.chatContent-3KubbW {
  max-width: calc(100% - 240px)!important;
}```

[vast delta]

why did i reply that?

[rugged echo]

its impressive that your mom knows css, but how is one line good lol

[vast delta]

xd

opinion?

[rugged echo]

weird, but I like the position of the member count