🎨-theme-development

[crimson skiff]

what the bs is this

how does a blur change the position of a goddamn element

[plain kelp]

Probably the blur forces it into a new rendering context

Dunno why that'd change position though

[smoky belfry]

discord CSS moment

they fucked up so much with visual refresh
even without custom CSS some stuff is broken and ultra laggy

[chilly knoll]

is this fine

/* Permission viewer icon */
.menu_c1e9c4 [id="guild-header-popout-perm-viewer-permissions"].item_c1e9c4  {
    display: flex;
    gap: 12px;
    align-items: center;
}
.menu_c1e9c4 [id="guild-header-popout-perm-viewer-permissions"].item_c1e9c4:after {
    position: relative;
    content: " ";
    width: 20px;
    height: 20px;
    background-color: var(--interactive-normal);
    mask-size: 100%;
}
.menu_c1e9c4 [id="guild-header-popout-perm-viewer-permissions"].item_c1e9c4:after {
    -webkit-mask-image: url() ; 
}

[chilly knoll]

is there a way to make the boxes on the right only appear in places that have no icon

[crimson skiff]

use the has selectors ig

[chilly knoll]

i think i did it

.menu_c1e9c4 [id=].item_c1e9c4 {
    display: flex;
    gap: 12px;
    align-items: center;
}
.menu_c1e9c4 :not(:has([class^=iconContainer_]))[id].item_c1e9c4:after {
    position: relative;
    content: " ";
    width: 20px;
    height: 20px;
    background-color: var(--interactive-normal);
    mask-size: 100%;
}
.menu_c1e9c4 [id="guild-header-popout-perm-viewer-permissions"].item_c1e9c4:after {
    -webkit-mask-image: url() ; 
}

ok still displays in way too many places

like here for example

would i need to manually hide all them

[vestal field]

backdrop blur apparently resets the origin of position fixed or some shit like that

[clear siren]

yeah I tried backdrop blur on menus, made some of them unusable

couldn't find a fix

[crimson meadow]

https://github.com/BlueSchnabeltier/wtvrsll

(blatant self advertisement)

[full pebble]

is there any option to make spacings like theyre with app icon? i want to remove it but it leaves its margins somehow, even when i make display: none highest container

i just want to hide the apps button but to keep buttons in places where they should normally be

[crimson meadow]

i just did it

pretty easy

[full pebble]

can you show

[crimson meadow]

    display: none !important;
}```

heh

[full pebble]

oh !important

right

[crimson meadow]

yeah, some thing u need to override

[full pebble]

thank you

[crimson meadow]

it isnt really good practice

but works

[crimson meadow]

no problem

[cosmic vault]

i cant seem to find the variable behind the color in the gaps when loading or get the class via the selector
any help here

[chilly knoll]

love it when i end up adding random borders to stuff

thiscatisd

[cosmic vault]

nevermind!!!

[cosmic vault]

sometimes it doesnt look bad

i really enjoy custom icons

mm

[chilly knoll]

mm?

[chilly knoll]

same

[chilly knoll]

sometimes yeh

[cosmic vault]

sounds
nothing of conversational importance

[chilly knoll]

oh right

[cosmic vault]

shit is going quite well i'd say

that reminded me

i need to disconnect my wifi again for something

[chilly knoll]

that looks cozy

[cosmic vault]

its basically my old theme brought to the new layout

i really like the way that the new title bar looks with it

i just

absolutely hate the title bar whenever i touch vesktop

or linux

[chilly knoll]

did u make it from scratch or was it based off a certain colour palette

[chilly knoll]

thiscatisd

[cosmic vault]

scratch

[chilly knoll]

nice

[cosmic vault]

inspired by tokyo night and catppuccin

[chilly knoll]

it looks nice

[cosmic vault]

ty! i really love it

the original codebase was a solid 1/10

now its actually readable

i had to rewrite everything

[chilly knoll]

horror

[cosmic vault]

it beats working with the original codebase

i was in horror when visual refresh was forced

i coded for 5 hours

i am NOT a fast individual

[chilly knoll]

im kinda glad i didnt start my theme until visual refresh

[cosmic vault]

my theme predates visual refresh

quite a lot

i was just bored and like

soooo

what if i made my own theme

and i ended up really liking the way it turned out despite having very low expectations

[chilly knoll]

lol

was a good decision in the end

[cosmic vault]

for sure
got me a lot more confident in my theming/small-plugin abilities and i really liked it and some other people ive shown it to have also really liked it (and use it daily!)

[chilly knoll]

yeh thats nice

[cosmic vault]

https://github.com/Tryflle/tryfletheme

the codebase disaster is still there too lol

i didnt use any css snippets for the original but i 100% did on the rewrite, otherwise id take a lot longer to do it

[chilly knoll]

true

is next the new one

[cosmic vault]

i had written some of the stuff but they had mild flaws

[cosmic vault]

yeah

[chilly knoll]

are the colours different to the old one

[cosmic vault]

its been like

idk how long

and we still dont have a proper name

🔥

[cosmic vault]

no

[chilly knoll]

lmao

[cosmic vault]

the only inconsistency apart from unthemed assets is icon-primary

and thats something i cant do much about

[chilly knoll]

tryfle isnt a bad name for your own theme imo

[cosmic vault]

true

[chilly knoll]

name it after yourself

[chilly knoll]

sadge

[cosmic vault]

i DID steal this smaller chatbar snippet and its got a problem that i dont know how ill even think to fix

type a multiline message and it'll look like this

then regularly like that

how do i even

how do i fix that

[chilly knoll]

horrible

lol

[cosmic vault]

probably not a very good snippet to steal but i cant do much better tbf

its like a 3px difference though and it sets me off

its only when you make a multiple line message too

its so dumb

also i kinda love this stupidity

i know how to fix it its just entertaining to me

[chilly knoll]

did u try asking the person u got it from to fix

[chilly knoll]

the text is almost unreadable lol

[cosmic vault]

nah
if im real i stole it from someone sending a revert theme here and saying use if you want

lool

[chilly knoll]

skulley~4

[cosmic vault]

i like the new layout in all aspects except the thicc textbar, small icons and the nameplate

[chilly knoll]

i mean maybe the person who made it will fix it tho

[cosmic vault]

maybe
but i forgot who it was

[chilly knoll]

understandable

[cosmic vault]

all i know is their code was short and it worked

[chilly knoll]

guh

[cosmic vault]

  .channelTextArea_f75fb0 {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 20px;

    .inner__74017 {
        margin-top: -6px;
        margin-bottom: -6px;
        margin-right: 10px;
        --custom-channel-textarea-text-area-max-height: 58px;
        --custom-channel-textarea-text-area-height: var(
            --custom-channel-textarea-text-area-max-height
        );
    }

    .slateTextArea_ec4baf {
        margin-left: 4px;
    }

    .scrollableContainer__74017 {
        overflow: hidden;
    }

  .channelTextArea_f75fb0.channelTextArea__74017 {
    border: 0px;
  }
}

[chilly knoll]

if they sent the theme maybe search for .css or sum shit and hope u find

[cosmic vault]

i cant even find it through that

😭

im also probably going to a couple more pixels to the spacing between the textbar and the messages

its a little too small

[chilly knoll]

rip

[chilly knoll]

how does the spacing look rn

[cosmic vault]

needs a few more px

[chilly knoll]

yeh a few more pickles would be nice

[cosmic vault]

because prior

YEAH I REALLY DOFNT KNOW WHATS UP WITH THIS SIZE REVERT

specifically on the textbar and only the textbar

it just moves around

it does its own thing

its very subtle

[chilly knoll]

looked better

[cosmic vault]

embed failure

[chilly knoll]

[cosmic vault]

yeah that was pre visual refresh

https://cdn.nest.rip/uploads/9f40ca3a-6b0d-47e3-8bcb-927c858ae33d.mp4

did venbot really delete the nest link lol

thank you nest

[chilly knoll]

the text and plus icon being aligned wrong after typing is so horror

[cosmic vault]

YEAHHHH

[chilly knoll]

trolldayruined~1

[cosmic vault]

i really dont know what i can do about it either

if i force it then it breaks actual functionality

[smoky belfry]

is it just for me that this message just break the height ?

[cosmic vault]

oh yeah that happened for me too

lol

[smoky belfry]

i think it tries to embed smth

[chilly knoll]

me three

[smoky belfry]

but doesn't and increase height still

[cosmic vault]

discord 🚀

[smoky belfry]

because discord forgot how to do HTML and CSS

[cosmic vault]

i still prefer it to the thicc ass bar

thicc ass bar just feels wrong

sorry venbot for sharex being annoying

[smoky belfry]

why tf do they use F*in absolute with fake elements and inline styles when they could just have used relative 🤦‍♂️ they literally trying to reinvent the wheel

[smoky belfry]

lmao
me when i can't upload on discord cause too big literally using my VPS

[cosmic vault]

i just have sharex bound to nest

i also have e-z but i just... i dont like ez

their domain names are all fucked up

nothing silly like ilovecats.online

[smoky belfry]

me when my domain name is literally <my username>.ddns.net

i have setup some auto-renewal magic

literally free

[cosmic vault]

anyywway

if anyone has any idea how to fix this
PLEASE tell me

[smoky belfry]

likely smth related to dynamic height due to characters or smth ?

how bad did you patch the chat bar ? you can answer yes

[cosmic vault]

the thing is the height doesnt revert

[cosmic vault]

that's the css

[chilly knoll]

cant u make it thinner with css lol

[cosmic vault]

yeah thats what im doing

[chilly knoll]

i mean the snipped u used looked nicw tho

[cosmic vault]

if you dont touch the other stuff then it adds a scrollbar

and thats even more disgusting

[chilly knoll]

lmao

[cosmic vault]

whoever at discord thought it would be a good idea to add a blur around whatever gif you hover over in the gif picker deserves to go on a marathon on a super inconsistent lego brick trail

and then they deserve to get bed bugs and forget their earbuds wherever they go

and a 38 hour lecture about how stupid of a design decision that is

and why css #gif-picker-tab-panel [class^=result_]:hover::after { background: none !important; }
is our savior

[smoky belfry]

i mean it is a way to highlight

[cosmic vault]

OUTLINE?

like they did previously 😭

[smoky belfry]

tho some selection around it works too

XD

[cosmic vault]

like ah yes

let me just

blur it

[smoky belfry]

i mean for me since visual refresh, the whole app is blured

[cosmic vault]

actually its more of a highlight now

prior it was straight up a blur

still.
OUTLINES

[smoky belfry]

the combo of colors and smth else basically makes text hard to read for me, they have some kind of glow

[cosmic vault]

i have barely touched stock theme since like

2020

[smoky belfry]

they force me to not use their app so that i can let my eyes sleep

[cosmic vault]

except on mobile

on mobile i really dont care though

[smoky belfry]

same
but now fuck it, i have to change it

[cosmic vault]

specifically on tablets

it looks finbe

[chilly knoll]

same

well maybe not exacly 2020 but early 2021

[cosmic vault]

tablet

i really dont mind the way it looks on mobile with a big screen

even though its not too dissimilar

[minor raft]

they removed the visual refresh experiment so im forced w the new layout and the theme i used broke
any good themes that work with visual refresh rn?

[smoky belfry]

discord's theme works kinda fine but has some issues and is very laggy /hj

[vestal field]

screenshot?

[vestal field]

midnight

[minor raft]

[crimson meadow]

i enjoy it

[vestal field]

so its like

3 revert snippets basically?

looks good tbh idk what u did with the borders

[crimson meadow]

and making the chat look better, uncentering the title, rounding the icon in the title removing unecisarry icons and fixing some padding and alignment stuff

[crimson meadow]

wdym?

[vestal field]

normal refresh doesn't look like this right

[crimson meadow]

cuz i did it

[vestal field]

yea that's what i meant

[crimson meadow]

yeah, its not just 3 revert snippets thrown together

and im also still working on it

this is like the base

try it out, and tell me what u think

[vestal field]

should probably make the user panel like

not rounded and floating

idk

[crimson meadow]

i actually kinda like that part of it

[vestal field]

fair

[crimson meadow]

i dont wanna revert the whole thing, i wanna fix whats there

yk

only the icon rounding thingy on the left is stolen, the rest i did

this was my main concern

the chat bar

it was way to thick and ugly

[vestal field]

u should use my chatbar snippet

#🎨-css-snippets message

[smoky belfry]

No it doesn't you have to do it

[crimson meadow]

but its thick

and ugly

[brave herald]

did you make any edits to your theme? the one that makes refresh better

[crimson meadow]

yeah

gimme a sec

[brave herald]

ok

[crimson meadow]

https://github.com/BlueSchnabeltier/wtvrsll

check it out

i made it like auto update and shit

just look at the install guide

[brave herald]

do i have to use wtvrsll.theme.css or can i just @import the wtvrsll.source.css in my quick css

[crimson meadow]

id advise you just use the wtvrsll.theme.css

you can use the source too

but i wouldnt

[brave herald]

why not

all the theme does is just import the source

[crimson meadow]

cuz i wanna be able to disable my themes and also have like the description and name show up

but thats just personal preference

[brave herald]

ok

[crimson meadow]

i fixed a few things and tinkered with it a bit

let me know how u like it

[brave herald]

what all did you change?

i like it just wondering

also i found a bug

[crimson meadow]

that is?

[brave herald]

1 sec

[crimson meadow]

send a screenshot too

[brave herald]

i will

[brave herald]

server icons in folders are too big

[crimson meadow]

nope

[brave herald]

huh

[crimson meadow]

conflict with ur themes

[brave herald]

ok
i'll take a look

[crimson meadow]

atleast i think so

[burnt sky]

just to make sure does any of the CSS require a plguin for folders? that could make the difference

[crimson meadow]

no

pure css

[burnt sky]

compare your appearance tab

that makes a big change

[crimson meadow]

wdym

[burnt sky]

different scaling etc compact mode spacious etc

[crimson meadow]

mine is completely default

i havent touched 1 thing there

[brave herald]

i have everything on default

[burnt sky]

but they could of changed it

[brave herald]

probably a theme conflict but i only have like 5 other styles
i'll just play around with disabling some

[burnt sky]

just compare settings just incase cause the theme works fine on my end when i tried it

[crimson meadow]

do you like it?

[brave herald]

when i remove all my other styles and just have your theme i still have the issue @crimson meadow

[burnt sky]

its alright went back to the one i spent time putting together sincce the update

[crimson meadow]

ctrl and r

try that

[brave herald]

still

[crimson meadow]

whats in ur quick css?

[brave herald]

i'll send it in one second but the chat bar whatever is SUPER messed up with your theme

[crimson meadow]

what res monitor?

[brave herald]

/* extra spacing below most recent message (more like old UI) */
.channelBottomBarArea_f75fb0 {
  margin-top: 0.5rem !important;
}

/* Members list spacing/padding */
.memberInner__5d473 {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

/* some list thing padding */
.listRow__9d78f {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* Non-nitro profile background color */
.outer_c0bea0 {
  /* background-color: black; */
    background-color: var(--app-background-frame) !important;
}

/* user area */
.visual-refresh section[aria-label="User area"] {
    width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);;
    left: var(--custom-guild-list-width);
    bottom: 0px;
    border-radius: 0px;
    border: none;
}

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

/* right click menu border */
[class*=menu_][class*=flexible_] {
    /* border: 1px solid #696779; */
    border: 1px solid var(--input-border)
}

[brave herald]

1920x1200

[crimson meadow]

weird ahh res

send a screenshot

[brave herald]

happens on my pc too though
with my 1080p and 1440p monitors

[crimson meadow]

no front

[brave herald]

laptop

[crimson meadow]

.

[brave herald]

screenshot of the chat bar bug?

[crimson meadow]

the entire thing

just discord

[brave herald]

i'll show you both

i can't scroll in the chat bar (i have to use arrow keys) and the icons move even when under character limit

[crimson meadow]

that was with the old version

i fixed that

[brave herald]

i have this in my quick css idk what to say 😭

[smoky belfry]

likely a cached moment

[crimson meadow]

probably

ugly ahh

[smoky belfry]

yeah

[crimson meadow]

fixed

[smoky belfry]

discord doesn't know how to do CSS

[crimson meadow]

    font-variant-numeric: normal;
}```

as easy as that

[brave herald]

i closed discord and relaunched in tray, i did ctrl+r, latest link is in quick css

[smoky belfry]

try to remove the link

and then add another random one

and then replace the random one by the link

[brave herald]

wdym

[burnt sky]

im using a vertical monitor so i have to make stuff to work for me
you can check it out on my github its a bunch of stuff i tossed together from snippets here an there an few changes i made myself

[ionic python]

Hello, is there a aero theme?
Or alternativly something like this:

[median ermine]

is there a way to increase the size of the + sign

[crimson skiff]

guess what the fix is, hardcoding the right and bottom styles. And even then i cant blur the actual dialog

[echo frost]

is that windows?
or a Linux distro using windows icon

[crimson skiff]

first option

[echo frost]

whoa what are you using

[crimson skiff]

finding a way to change the windows icon to something else

[crimson skiff]

windhawk + yasb

can give you the list of mods i use in windhawk in a different channel if you want

[echo frost]

ew why is yasb in python

[crimson skiff]

whats wrong with python bruh

[echo frost]

sure
probably better to send in dms than here

[echo frost]

cringe + slow

[crimson skiff]

if it works it works + who tf cares

[echo frost]

ig maybe it's actually written in c and then every c file is called which adds delay but is way faster than actual python

pretty sure that would be considered c in the github language breakdown thing though

[crimson skiff]

make it yourself Dunno

[echo frost]

maybe I will

(I won't)

[valid needle]

i'm either dumb or transparancy just does not work anymore
like I've set the actual body element's background color to transparent, and set the app's display to none, and still no luck

[echo frost]

are you trying to make it show your windows background (or whatever os you use)

[valid needle]

ig yeah

[echo frost]

you need to turn on that feature in vencord settings

[valid needle]

it is on

[echo frost]

oh

maybe that broke then?

[valid needle]

that's my guess

or i'm missing something obvious

[echo frost]

try doing * { background: transparent !important; }

[plain kelp]

Transparency works fine for me in firefox at least

And there's nothing that's changed on the electron side lately, is there?

[valid needle]

Oh weird the dev tools make the transparency not work lol

when i closed it works fine

OK well that's more or less problem solved

[vestal field]

ugh borders not being consistent 1px is so annoying

i guess im gonna have to resort to box sizing border box but that somehow fucks up the server list sizing

[feral mirage]

i tried searching a few terms for the last 20 mins and couldn't find what i was looking for. there's this experiment you can enable at tier 3 or something, to make the "Download Apps" button on the sidebar fill the gap below. does anyone have the name of it? i cant find it. i promise i tried looking first lolol

[burnt sky]

don't blame yeah i keep trying to fix the padding here but breaks each millennium update

[vestal field]

i dont think there is any good solution here tbh

if i choose to use box-sizing then i have to manually fix the widths of all the server list items

if i dont use box-sizing then the alignment will be 0.3px off

if i avoid the whole thing altogether by putting the user panel in the grid layout it breaks plugins

[light wren]

I've got something similar although rudimentary that works for now. I've got no idea how to make the bar on top blue to match taskbar though.
https://cdn.discordapp.com/attachments/1187070208964296805/1362367677124841482/Yar4T8t.png?ex=68022345&is=6800d1c5&hm=c70d25362383bdc117080c37148bfdabf1d3d28cd48b8961b2064cd20bb0157f&

It's this but edited
https://github.com/SlippingGittys-Discord-Themes/WinClassic/
not by me though, i think I asked for help here but i don't remember!

[hollow spire]

finally fixed this

1:1 the same as before the stupid update

[pine needle]

share please

[hollow spire]

unsure how well it will work with other themes/resolutions

.bar_c38106
{
    background: #1e1f22 !important;
    z-index: 102;
}
.bar_c38106 .recentsIcon_c99c29
{
    position:absolute;
    top: 30px;
    right: 46.5px;
    .icon__9293f
    {
    height: 24px !important;
    width: 24px !important;
    }
}
.bar_c38106 .anchor_edefb8
{
    position: absolute;
    .icon__9293f
    {
    height: 24px !important;
    width: 24px !important;
    }
    top:30px;
    right:6.5px;
}
.toolbar__9293f
{
    margin-right: 78.5px;
}```

@pine needle

[pine needle]

thank you!

[olive gyro]

hi
is there a way to have the user pop-up show what the user set it to themselves on discord?

im currently using a clearvision theme that I wanna start making edits for

ive sussed out that its this section, so i suspect i have to do something to fetch the parts of the popup in question?

[olive gyro]

i cracked open the main.css for clearvision and wow this is big lol

[spare mural]

you arent supposed to

clearvision is made in scss

https://github.com/ClearVision/ClearVision-v7

you are looking at bundled and minified css

[olive gyro]

ohhh

that makes more sense

[half crystal]

fuck you, its all modals

[crimson skiff]

bro saw my snippet and woke up to kill

[half crystal]

and kill i will

[hollow spire]

[chilly knoll]

is having these two as 2 separate themes fine or should i combine them
https://mudaranrhiod.github.io/DT/vencord/solar.css
https://mudaranrhiod.github.io/DT/vencord/solarmoreicons.css

or maybe combine em and make it so i can disable the more icons if thats easy to do

[burnt sky]

@chilly knoll btw you missed an section

[chilly knoll]

i fixed that i just havent pushed

[burnt sky]

kool

[chilly knoll]

does anyone know how to theme the top grey bar on the right? ive been trying to theme it without changing the colour for it on the left sidebar and i fking cant lol

[ionic python]

thank you! sadly a bit broken with the new redesign, but def. the right style!

[light wren]

the version I have works just fine right now (i had to disable the bar on top cause idk how to remove the discord minimize maximize etc) if you want I can dm it

[onyx mesa]

how do i get the var for the left border color on embeds, for example youtube with the red border

[half crystal]

i dont think it is a var, i think its hard-coded

[onyx mesa]

i could use :has()

but i shall not

[chilly knoll]

Is has bad practise

[viral jasper]

So, is there a way that i can fix this single issue that i have with my discord atm?

the issue is when i full screen a stream, there's a bar of space at the bottom that i can only fix when i zoom in.

i'd suggest this in the #🎨-css-snippets channel but i don't have permissions to talk in there.

[upper isle]

i'm using an adapted snippet to remove the new title bar, but now i cant drag the window
is there a way to have the lower appbar be draggable

[ionic python]

i'd love to!

[lunar garden]

is it just me or the spotify controller plugin changed or tweaked its css recently?

[full pebble]

im using this script to make server icons 48px back again but DMs are broken

[lunar garden]

can someone tell me what are the correct classes for this css code?

&:has(.vc-spotify-button-row .vc-spotify-pause) #vc-spotify-progress-bar [class^=sliderContainer_] [class^=slider_] [class^=bar_] [class^=barFill_] {
        background-color: transparent;

        /* wave animation */
        &::after {
            content: '';
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='45 -13 360 64'%3E%3Cpath d='M4 19q45-33 90 0c31 22 60 22 90 0q45-33 90 0t90 0 90 0' style='fill:none;stroke:%23000;stroke-width:28'/%3E%3C/svg%3E");
            height: 9px;
            -webkit-mask-size: 30px 9px;
            transform: translateY(-2.5px);
            animation: barwave 4s linear infinite;
            background: white;
            position: absolute;
            width: inherit;
            top: calc(25% - 1.2px);
            overflow: visible;
        }
    }

[upper isle]

@vestal field do you have a snippet for moving the typing users above the chat bar

im struggling to remove the background color
idk where the fuck its coming from

[upper isle]

why aren't my color vars being used? I put them in a :root selector
they're still being overrided by .visual-refresh

[crimson skiff]

you mean the scrollbar?
you can use &::-webkit-scrollbar

[crimson skiff]

higher specifity, using .visual-refresh :root has a higher specifity and this overwrites :root

[crimson skiff]

can try either #🎨-css-snippets message or #🎨-css-snippets message

[barren jewel]

anyone know the class or have made a snip to make the scroll bars in the emoji/gif picker actually visible

[upper isle]

i see thanks

[chilly knoll]

this bit

[real quarry]

@cloud sigil do you have a verison of Declutter that doesn't hide the menu of buttons seen from hovering a message

just realized it was Declutter that was hiding that menu which i really miss :(

or could i override declutter hiding that menu by any chance

[cloud sigil]

Yeah, just add an display: flex !important to your custom css w/ the class name. I don't remember which

Cuz I also don't know which menu you're talking about rn lol

[crimson skiff]

.bg__960e4 maybe? but midnight's gaps show it, so any change done to the colour affects every gap in midnight

[vestal field]

#🎨-css-snippets message

[real quarry]

this

[cloud sigil]

that the uhhhhh

hover over message?

[real quarry]

yes

gonna be one of these i think

ok i found the rulecss [class*="buttonContainer_"]:has([class*="stickerButton_"]) { display: none !important; }

[cloud sigil]

in your custom css just add that, but change none to flex?

or block

I don't remember

[iron smelt]

:has horror

[upper isle]

oo thanks
does it cause the chat to jump up when you start typing or is there permanent padding

[vestal field]

permanent padding

[upper isle]

alr

[hollow meteor]

why is my icons so small?

[upper isle]

guh anyone know

[vestal field]

-webkit-app-region: drag;

i think

[upper isle]

oh sick that works
thanks

[crimson skiff]

just use

#app-mount {
  -webkit-app-region: drag;
}
```should work

[echo frost]

help @crimson skiff why my clicks no register anymore????

[crimson skiff]

you can drag the window though

[echo frost]

actually register is too complicated of a word

[crimson skiff]

thats what matters

[crimson skiff]

why my click no click

[echo frost]

help why my clicks no work anyumore?!???

[crimson skiff]

click not clicking

wait is it just me or does my message have a higher padding between username and message than yours

like the gap between message and username is massive for me

[crimson skiff]

its the same for you?

[echo frost]

try disabling your themes

it's the same for me on my computer with my themes

[copper oak]

workin on a theme and I'm stumped on a proper way to make transparent backgrounds with bubbles that merge multiple messages, little help?

For example I want all messages in succession to just merge their borders, I have a groupStart that exists but there's no groupEND which is my issue, so messages edn up doing (image2)

green to make it easier to see my issue

[pure cairn]

Maybe a :has checking if the following message contains a pfp/header + one for messages that don't

[copper oak]

that could work, def didnt think of it

I tried nth-child and a couple :not()s so that might actually be sadge if it's the fix lmao

[pure cairn]

As for multiple messages, like 3+ you might want to add another selector to the headerless one checking for the element below

[copper oak]

issue is that there's nothing new I can think to latch onto, every message has the same class and message-content tags

[pure cairn]

What's the class for single messages and username header?

[copper oak]

it works fine for 1-2 but I need it to work for more than that which is why I'm confused, wasnt there a groupEnd function for messages?

lemme go yoink it

messageListItem__5126c is what holds the backgrounds

[pure cairn]

I don't remember seeing such a class while I was tweaking stuff

[copper oak]

I searched through the discord and I may just be going insane, or just assumed if there's a groupStart there has to be a groupEnd

[pure cairn]

But you could use

.message1:has(+ .message2:not(:has(username)) {
  ... 

}```

```css
.message1 + .message2:not(:has(username)) {
  ... 
  :not(:has(+ .message3:not(:has(username)))) {
   ... 
  }
}```

Or something similar

Tbh I don't even remember if :has(+) even works

Also, a whole bunch of :has() horrors

[copper oak]

I never really thought about running with a +, god that's so jank though

rip performance lmao

[pure cairn]

Yop

[pure cairn]

This post might get my snippet posting permissions revoked ngl

[copper oak]

for good reason lmaooooo

[half crystal]

Ive done worse lmao

[pure cairn]

Yeah your latest snippets are powered by the purest energy

But they're fun

[half crystal]

Yeah, most of them are shitposts
I dont understand the husks on the full screen emoji picker, that can be genuinely useful

[pure cairn]

Too big and could cause lag

Also looking for an emote would be like finding Waldo

[copper oak]

even if you scale the emojis with

that's too much for me imo

[pure cairn]

Yeah

[half crystal]

Lag? What's that?

[pure cairn]

If it runs at 1 fps it's still running, I don't see the issue

When it's not running anymore, that's where I draw the line

[copper oak]

until i bsod it's okay

zero issues here!

[pure cairn]

Absolutely

[half crystal]

Electron is a perfectly stable, low-resource native app framework with nearly no downsides! everyone should use it! /s

[copper oak]

well I've managed part of it

but by god

.messageListItem__5126c:has(.avatar_c19a55){
  border-radius: 12px 12px 0 0;
}
.messageListItem__5126c:not(:has(.avatar_c19a55)) + 
.messageListItem__5126c:not(:has(.avatar_c19a55)):nth-child(odd) + 
.messageListItem__5126c:not(:has(.avatar_c19a55)) {
  border-radius: 0 0 12px 12px;
}

I should be shot for this

still need single messages but that could prob just be overrode as a default

[pure cairn]

[pure cairn]

You could

[copper oak]

wait I'm so dumb, nth-child can do math can't it?

[pure cairn]

No nvm

You used a better logic

[copper oak]

couldnt I just select it by + 1 of the first message?

[plain kelp]

nth-child can do kx+m expressions

[copper oak]

I think that would be :nth-child(n + 1 of divName) yeah

[quick shell]

yo

im making a theme

but have a problem where --header-primary themes too much things, is there a solution (or sth that can split)

[echo frost]

what the fuck is that selector

[copper oak]

What happens when theme attributes doesnt have a group end function lmao

Ive cleaned it up tho, now uses nth with math

[patent niche]

ima have to relearn css for this

[pure cairn]

I'm curious about what you ended up using as selectors, I never tried with nth-child math

Tbh I didn't even know you could do that lmao

[soft fjord]

how would i add a dop shadow to bottom of this?

[chilly knoll]

sometimes when i do .something: { color: var(--some-var) ; } it doesnt show the colour but if i use a hex code instead of var() it works

is this normal lol

i wanted

.wrapper_f61d60
    { color: #DFBE80; }

to use --text-link lol

[soft fjord]

is there a way to make this so the top padding increases/decreases if slow mode is on and when people type and dont type, etc?

[gilded radish]

apparently not cause from what I was told it would make chat jump up and down

[soft fjord]

well chat jumping up and down would be what is intended through that?

[gilded radish]

I dunno tbh I didn't make the snippet

[burnt sky]

@chilly knoll loving the new settings icons, guessing you haven't come up with anything for hypesqaud or delete server yet?

[chilly knoll]

i addded delete server, is there any other icons ive missed

[burnt sky]

lemme look around

[chilly knoll]

also hypersquad for me 😭

[burnt sky]

members in server settings

[chilly knoll]

i fixed that

forgor to push whoops

[burnt sky]

did you push the changes ?

lol

[chilly knoll]

not yet lol. ill push later when i do more icons

[quiet adder]

that's good i like it

where can it get it

i added that green dot that indicate that the user is in voice call

.panels_c48ade{position:relative;left:var(--space-sm)!important;width:56px!important;height:57px!important;display:flex!important;flex-direction:column;overflow:visible!important;border:1px solid var(--border-subtle)!important;border-radius:30px!important;transition-duration:0.35s;z-index:50000;pointer-events:all}
.panels_c48ade:hover{width:300px!important;height:auto!important;border-radius:15px!important;display:flex!important;flex-direction:column;filter:drop-shadow(7px 7px 7px rgba(0,0,0,0.12));transition-timing-function:cubic-bezier(0.165,0.84,0.44,1)}
.panels_c48ade:hover .wrapper_e131a9{height:auto!important}
.visual-refresh [class^="panels_"]{overflow:visible!important}
.visual-refresh [class^="panels_"]:has(.container_e131a9)::after{content:"";position:absolute;top:-6px;right:-6px;width:14px;height:14px;background-color:#43b581;border-radius:50%;border:2px solid var(--background-primary);box-shadow:0 0 0 1px rgba(0,0,0,0.1);animation:pulse-call 2s infinite;z-index:60000;pointer-events:none}
.visual-refresh [class^="panels_"]:has([aria-label*="Unmute"]):has(.container_e131a9)::after{background-color:#f04747;animation:pulse-muted 2s infinite}
.wrapper_e131a9{height:0;overflow:hidden}
.visual-refresh .panel__5dec7{display:none}
.visual-refresh [class^="panels_"]:hover .panel__5dec7{display:block;animation:fadeIn .25s ease-out forwards}
.visual-refresh [class^="panels_"]:not(:hover) [class^="container__"] [class^="buttons__"]{opacity:0!important}
.visual-refresh [class^="panels_"]:hover [class^="container__"] [class^="buttons__"]{opacity:1!important;transform:scale(1)!important;transition:opacity .2s ease-in}
.sidebar_c48ade,.container__3baec,[class^="base_"],[class^="content_"],[class^="app_"]{overflow:visible!important}
.container__2637a{padding-bottom:0!important}
.scroller__99e7c{margin-bottom:0!important}
.bottom__7aaec{bottom:0!important}
@keyframes pulse-call{0%{box-shadow:0 0 0 0 rgba(67,181,129,0.4)}70%{box-shadow:0 0 0 6px rgba(67,181,129,0)}100%{box-shadow:0 0 0 0 rgba(67,181,129,0)}} 
@keyframes pulse-muted{0%{box-shadow:0 0 0 0 rgba(240,71,71,0.4)}70%{box-shadow:0 0 0 6px rgba(240,71,71,0)}100%{box-shadow:0 0 0 0 rgba(240,71,71,0)}} 
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}  

[half crystal]

minified

[burnt sky]

what a mess lol

[quiet adder]

4552milkshrugidk

[quiet adder]

ikr

[half crystal]

there's fucking layers to this
funny

[chilly knoll]

Why is using !important bad practise?

[quiet adder]

i'm still learnin and i thought of sharing it with u guys

.-.

[burnt sky]

it has to be used a lot for steam though

otherwise it won't overwrite

[half crystal]

no thats fine just
you dont fproof-select all base_, content_ and app_

[quiet adder]

what should i do ?

[upper isle]

a sign of poorly designed styles
unless of course you're making a theme to something external

[half crystal]

personally i dont use fproof because [ L A G ]

[half crystal]

do i dare post this to #🎨-css-snippets

[burnt sky]

oh god

[wild cedar]

hey my quick css doesn't working it just shows a blank page..

any fixes?

[burnt sky]

what you mean blank page?

[wild cedar]

a blank page..

nvm, i just had to let it load

[burnt sky]

sure took it awhile for it to load for you, how much stuff do you have in it lol

[burnt sky]

haha

[regal snow]

anyone know how i can remove the server name and put the inbox and help icons downnext to the zencord toolbox or somthing?

[half crystal]

#🎨-css-snippets message

[bold haven]

can i somehow remove that when i am hovering over a message it is brighter

[regal snow]

well ive tried that but the thing is i cant also make the topbar bigger that i can drag around when im using that

[half crystal]

:root {
    --background-message-hover: transparent!important;
}

[half crystal]

sorry, misinterpretation
use -webkit-app-region: drag; where you want stuff to be draggable (note: will stop stuff being clickable)

[regal snow]

is there a way i can add a little darker bar at the top or atleast more indentation and move everything down so i cant click the server list when trying to move discord window?

[half crystal]

.base_c48ade {
    -webkit-app-region: drag;
}

.content_c48ade {
    margin-top: 20px;
        -webkit-app-region: no-drag;
}

should work

[regal snow]

thanks

[red mirage]

Is there a theme to make the statuses look like the old ones?, Its colors are annoying

[half crystal]

if you know the old status colors id whip up a snippet (as i dont know the old colors myself)

[burnt sky]

i cant even remember them an i've been on discord for ages

[half crystal]

same

[burnt sky]

@half crystal one issue with your bubbles an the blue background are blue links making them hard to see

[red mirage]

It's on the phone

[half crystal]

.messageListItem__5126c[data-is-self="true"] .contents_c19a55>.messageContent_c19a55 {
      background-color: var(--brand-500);
}

[little swan]

I hope this is the right place to ask but How do you do a custom font?
For context i'm trying to mod an existing theme (personal use), it uses a pixel font and i'm trying to switch it out for one that supports more characters as it's creating pretty bad clashes.
i've been trying for over a day and i've gotten nowhere, I've already read docs and have tried looking for solutions via searching here and on the internet and neither have helped

[half crystal]

where is this font hosted? if its on gfonts on just on your pc its easy

[little swan]

i have the files downloaded

[half crystal]

install them

[little swan]

if it really is just this easy i am walking into the nearest lake lmfao

[half crystal]

[mask="url(#svg-mask-status-online)"] .status_a423bd {
    background-color: #259d5c!important;
}
[mask="url(#svg-mask-status-idle)"] .status_a423bd {
    background-color: #e3a637!important;
}
[mask="url(#svg-mask-status-dnd)"] .status_a423bd {
    background-color: #e33d43!important;
}
[mask="url(#svg-mask-status-offline)"] .status_a423bd {
    background-color: #8c8e9c!important;
}

[half crystal]

and then just

:root {
--font-primary: '<Font Name EXACTLY AS LISTED IN THE METADATA>';
}

[red mirage]

It doesn't work

[half crystal]

works on my machine

[red mirage]

It works but not as I want

[half crystal]

how do you want it then?

[red mirage]

I want it to work on everyone

not only here

[half crystal]

[mask="url(#svg-mask-status-online)"] .status_a423bd,
[mask="url(#svg-mask-status-online)"] {
    background-color: #259d5c !important;
    fill: #259d5c !important;
}

[mask="url(#svg-mask-status-idle)"] .status_a423bd,
[mask="url(#svg-mask-status-idle)"] {
    background-color: #e3a637 !important;
    fill: #e3a637 !important;
}

[mask="url(#svg-mask-status-dnd)"] .status_a423bd,
[mask="url(#svg-mask-status-dnd)"] {
    background-color: #e33d43 !important;
    fill: #e33d43 !important;
}

[mask="url(#svg-mask-status-offline)"] .status_a423bd,
[mask="url(#svg-mask-status-offline)"] {
    background-color: #8c8e9c !important;
    fill: #8c8e9c !important;
}

[red mirage]

thx bro ❤️

🌹💋

[little swan]

update: was not that easy
update2: okay it was (working with other fonts) i just have to figure out what's wrong with the specific font files ig

[fierce knot]

I want to use this to fix the theme I've been using (ClearVision), but I can't figure out any way to make the colors transparent so it will show my custom background. Anyone have any ideas?

[half crystal]

Hi! i made that snippet.
i suggest using clearvision's vars as clearvision changes a lot of stuff. if you wanted to do this though you could use rgba instead of hsl

[fierce knot]

I tried fiddling around with some variables but I couldn't figure out what ones to change to fix the colors that I need to.

have any pointers?

[half crystal]

well what do you wanna change?

[fierce knot]

things like the profile box, chat box, server panel, and settings screen background.

heres what they look like rn

they should be transparent and show my background image

and if I switch to a dark color theme, it just uses the theme's colors instead of being able to make these things transparent

[half crystal]

you should probably just have a dedicated snippet for this

@fierce knot

.channelTextArea_f75fb0,.themedBackground__74017, .panels_c48ade {
    background: transparent!important;
}

[fierce knot]

well, that fixes some things

I'll try n look for the names of the other boxes I need to change

[frigid zinc]

how can i request a snippet be sent into #🎨-css-snippets ? i've cooked something up

[half crystal]

#📩-modmail

[frigid zinc]

thx

[upper isle]

is there a more reliable way to match these buttons than aria-label?

[pure cairn]

svg path probably

[upper isle]

isnt that hella slow

[half crystal]

path

[pure cairn]

Perchance

Could be a bit faster if you make it like
.iconWrapper__9283f:has(>svg.icon__9293f>path[d^="add path here"]) or something, idk

My username says it all, don't trust me on performance

[fierce knot]

@half crystal this one might be a bit harder to figure out, but I'm wondering if you have any thoughts on this. I'm using [this](#1354621684115837098 message) snippet to align the chat box and add the typing indicator above it, but the transparency is inconsistent between the two, as .visual-refresh .form_f75fb0doesn't display over the messages, while the typing indicator .typing_b88801 .base_b88801 does. Any help is appreciated

[frigid zinc]

can't you look for it using the ancestors?

like .userProfile__xxxxxxx .iconWrapper__xxxx

[pure cairn]

That works too

[upper isle]

unfortuantely its a flat list

[civic steppe]

hey could i get some help i have gotten the oldcord theme but the font looks way too dim for what im used to does anyone know how could i fix it? like a css snipet or code that could fix my issue i can show what im talking about

[upper isle]

this seems to work fine

[pure cairn]

Already tried with nth-child or nth-of-type?

[upper isle]

i don't think thats reliable

if they add a new button it removes something else instead

[upper isle]

show

[pure cairn]

Yeah

[civic steppe]

the first image is text on oldcord on my pc the second image is from my phone

[frigid zinc]

is that bold text or normal text?

[civic steppe]

normal text on both

[frigid zinc]

huh that looks very bold on mobile

[civic steppe]

one is on my pc using oldcord(img1) and second is phone

it used to be that way on pc too but when the experiment went bye bye i picked oldcord and instantly saw the diference

is there any way to fix it

also sorry for interupting the conversation

[pure cairn]

You probably have to change something around in the theme variables

[frigid zinc]

i tried that, but the chat text for example just uses the default weight

[pure cairn]

Can you send a screenshot of what bold text looks like on both devices?

[civic steppe]

how many * is bold?

[frigid zinc]

two *

[pure cairn]

2 on each side

[frigid zinc]

i guess this could work? lol ```css

• {
  font-weight: var(--font-weight-semibold) !important;
  }

surely will not break anything

^clueless

[pure cairn]

[civic steppe]

phone 1 pc 2

[pure cairn]

It looks the same as regular text on mobile

Wth

[frigid zinc]

isnt this an accessibility setting?

[civic steppe]

ill check

[frigid zinc]

or appearance setting

also im pretty sure they're two different fonts

maybe oldcord just uses its own custom font

[pure cairn]

they are

small t isn't.. slanted (?) the same way as on mobile

no, slanted isn't the right term

[frigid zinc]

the circle in b also seems more round

like it has that little bump at the bottom

[civic steppe]

i can show the css of oldcord i have on it might help?

[pure cairn]

yeah

[frigid zinc]

yeah oldcord forces Whitney instead of gg sans

i guess that's why it's called oldcord

[civic steppe]

is there anything i can do to fix it?

[frigid zinc]

yes

[civic steppe]

which line of code?

[frigid zinc]

oh, you probably shouldn't edit the theme directly

[civic steppe]

oh?

[pure cairn]

I think it's just

[frigid zinc]

i think it's best if you imported it dynamically from the url so it auto updates

[civic steppe]

do i change it the @import format?

[frigid zinc]

yes

add it to your quick css

this should revert the font change? i think (this is how your quick css should look like) ```css
body {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--font-display: var(--font-primary) !important;
--font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[pure cairn]

body or :root I guess?

[frigid zinc]

you can also just add it as a theme link forgot thats a thing

wanted to use root but oldcord changes it in body

[pure cairn]

I see

[frigid zinc]

yeah this should work

oh wow it even uses old blurple lol

[fierce knot]

you know what, I could probably just fake it by making the colors 'look' the same instead of showing the actual background

hmm

[civic steppe]

uh

[fierce knot]

well now it's just got this ugly border in-between the two boxes

[civic steppe]

i feel it didnt change(?)

or i might just be a little blind about it

[lone nimbus]

is there a way to disable this new background thing in CSS?

[frigid zinc]

hasnt even rolled out to me

[lone nimbus]

ah yes there is a way

OK hold on I think I can actually put this together

[civic steppe]

is it just me or is it still the same (i added the code snippet the quick css)

the other code bellow is for the timestamps

[lone nimbus]

disable new discord background chat thing that no one wants

[class*="wallpaperContainer__"] {
  display: none !important;
}

[civic steppe]

hey did i do it correctly?

[civic steppe]

👆

[frigid zinc]

yep, idk why the weight didnt change tho

if you're feeling brave try adding this to your quick css ```css

• {
  font-weight: var(--font-weight-semibold) !important;
  }

it will probably break things tho

[civic steppe]

under font headline?

[frigid zinc]

under the body {}

like this ```css
body {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--font-display: var(--font-primary) !important;
--font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

• {
  font-weight: var(--font-weight-semibold) !important;
  }

[civic steppe]

oh in a separate {}

Perfe- wait

[frigid zinc]

yeah, it makes everything thicker

[civic steppe]

i dont mind that its just too squished xp

is there any way to unsquishify it?

[lone nimbus]

i think we'll need like js to disable it entirely

[frigid zinc]

squished?

[civic steppe]

wait

[frigid zinc]

pretty sure that's how the normal font looks

[civic steppe]

nvm XD im just being dumb xp

[civic steppe]

thank you a lot this new ui has been a nightmare after they removed the experiment

ok i fixed my issue

i had it on default instead of spacious

its slightly diffrent

[frigid zinc]

you could try this instead of my previous one```css
@import url("https://milbits.github.io/oldcord/src/main.css");

/* revert font */
body {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--font-display: var(--font-primary) !important;
--font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* make text bolder */
body {
--font-weight-normal: 500;
--font-weight-medium: 600;
--font-weight-semibold: 700;
--font-weight-bold: 800;
--font-weight-extrabold: 800;
}

a,
div,
span {
font-weight: var(--font-weight-normal);
}

should make it more consistent

[civic steppe]

let me take a comparison ss

new code (img1) old code (img2)

it seems slightly bolder on img2 but at the same time im not sure @frigid zinc

yea it is slightly more bold on img2

ill take a 3rd screenshot on my phone to add to the comparison

[frigid zinc]

maybe this ```css
@import url("https://milbits.github.io/oldcord/src/main.css");

/* revert font */
body {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--font-display: var(--font-primary) !important;
--font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* make text bolder */
body {
--font-weight-normal: 500;
--font-weight-medium: 600;
--font-weight-semibold: 700;
--font-weight-bold: 800;
--font-weight-extrabold: 800;
}

a,
div,
span {
font-weight: var(--font-weight-medium);
}

/* make codeblocks normal weight */
div.codeContainer__75297 *,
div.codeLine_ada32f * {
font-weight: var(--font-weight-normal);
}

if you want the codeblocks to be bold as well, you can remove that part

[civic steppe]

"new" old new new phone

[frigid zinc]

eh?

[civic steppe]

its comparison images

[frigid zinc]

you can also try removing the "revert font" part and see if that's more what you're looking for

[civic steppe]

it looks "better" (idk how to describe it tbh)

idk if the "is typing..." part has changed

it was looking like this

i took this just now with the changed code

[regal snow]

anyone know how i could move the inbox and help buttons down without the window controls?

[civic steppe]

ok it looks slightly diffrent

ok found another "issue" the emoji button and text looks wrong

its so rectangular eugh

[frigid zinc]

the quirks of oldcord

you'll have to wait for it to get fixed

[civic steppe]

man discord had their ui so perfect why ruin it because of investors

[urban moat]

not sure if you fixed this recently and i missed it but this doesn't affect the background that shows when someone turns their stream off. i couldn't find the specific class i'd need to affect

[dim geode]

anyone knows how to make these not round? i can't figure out what style i need to change as this activity thing doesn't show up in the browser version (am new to vencord)

[regal snow]

how do i move buttons

how do i move these dudes here

next to vencord tools

[chilly knoll]

how do i change the icon for reviewdb

[copper flame]

@velvet pawn i just made some insane shit for the catppuccin discord theme

fully toggleable vars from one 'option' var

[velvet pawn]

love

cookie sooo insane 😭

wait it supports rainbow threads now

?

[copper flame]

in a pr

[velvet pawn]

is it urs

[copper flame]

https://github.com/catppuccin/discord/pull/385

take a look at the other insane stuff ive done

[burnt sky]

what css usually makes typing laggy?

[copper flame]

lots of un optimized selectors or :has

[burnt sky]

hm okay

[valid needle]

I'm having some annoyances with the dev tool. I'm trying to find the variable or select the class that controls the color of most of the hover elements you see like when hovering on a channel for example.

Also the server search window just dissapears when i try to use the selection tool cus that counts as clicking off it 🙃

[chilly knoll]

@upper isle unhusk 😭

that was a very good question

[chilly knoll]

the colourful threads look so pretty

[chilly knoll]

afaik this might help #🎨-theme-development message

[valid needle]

Thank you i'll give it a shot!

[copper flame]

vp f8break

[cloud jolt]

F8Break

Pause the client when you press F8 with DevTools (+ breakpoints) open.

Authors

lewisakura

[upper isle]

sorry i was actually testing my theme colors

fake husk

[upper isle]

select the svg's path and override the d property with your own

[upper isle]

there's also the debugger button in devtools

[chilly knoll]

why tf does the same thing that themes a background theme a hover

and this doesnt theme the body lol

[echo frost]

oh
I did almost no testing on it, sorry

[chilly knoll]

is this fine for the report message modal?

i think i just messed up modals in other places now

[valid needle]

right i see

never thought to click it

[upper isle]

make the header background the same as rest of the background

[chilly knoll]

what like this?

path[d="13 20 11 20 11 8 5.5 13.5 4.08 12.08 12 4.16 19.92 12.08 18.5 13.5 13 8"] {
    d: path("M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l3.97 3.97a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28l3.97 3.97z");
}

cuz it doesnt work

[chilly knoll]

yeh thats what i wanted

took me ages

[urban moat]

you're ok ! is there a chance you could work on it ?

[echo frost]

I'm pretty busy right now with the end of the semester, sorry

[hazy frigate]

the new placement for the you're viewing older messages thing is horrible and is too on the nose, we got anything to put it back to where it was before or at least another part of the screen?

like dude i hate this

much better, thank you

[tidal heron]

if anyone wants to have a slightly better look for the new discord ui (sorry in advance if i cant post this here)
https://github.com/NotAmiru/QualityRefresh

[tidal heron]

https://tenor.com/view/kimba-crypto-cryptocurrency-lion-self-promotion-gif-5582798983899170152

[full pebble]

idk if anyone made it before but

/* jump to present button on right side */
.jumpToPresentBar__0f481{
    justify-self: end;
    margin: 3px 6px !important;
}

[frigid zinc]

fyi

[pastel bramble]

I liked the new chatbox better so I made this snippet for it. I can't post in #🎨-css-snippets unfortunately as this is my first contribution

.inner__74017 {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  gap: 0px;
  align-items: center;
  padding-left: 0px;
}

.uploadInput__0923f {
  grid-column: 1;
  grid-row: 2;
}

.attachWrapper__0923f {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.attachWrapper__0923f > button:nth-child(1) {
  margin-left: 0px !important;
}

.textArea__74017 {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.buttons__74017 {
  grid-column: 3;
  grid-row: 2;
  justify-content: flex-end;
  padding-right: 8px;
}

.uploadInput__0923f,
.attachWrapper__0923f,
.buttons__74017 {
  position: sticky;
  bottom: 0;
  background: var(--bg-overlay-floating,var(--chat-background-default));
  border-top: 1px solid gray;
  z-index: 10;
}

I also already know this one existed #1307091843741257798, but it was not satisfactory for me :3

[quick shell]

yo, anyone know how to get these themed?

[fickle falcon]

has anyone made the channels list collapsible yet

[echo frost]

@half crystal did you mean to call this favorites v2 not experiments v2? I think that looks like that #🎨-css-snippets message

[half crystal]

yes

[echo frost]

lol

wow still messed it up. discord uses american spelling of favorites
truly unusable

[half crystal]

THE BRITISH MONARCHY WILL PERSEVERE

[echo frost]

(don't actually change it, usa is cringe)

good

[echo frost]

(i can say that because i live there)

[hollow echo]

this isn’t in need of a fix, that styling is very much intentional

[frigid zinc]

it does kinda look like the reaction containers should be taller

[chilly knoll]

is it possible to recolour an icon in one place and not all places the icon is used on

discord changed the apps icon and its kinda messing the colours up

[onyx mesa]

you'd need to add a fill to the svg itself probably

[chilly knoll]

am i not already doing that

[onyx mesa]

oh!

sorry i miss read what you said

@chilly knoll you could probably select it by ID like:

#guild-header-popout-application-directory {
   color: red;
}

[chilly knoll]

would there be a way to do this for the one that appears on game activity status' instead? cuz it appears there and 2 other places (excluding the drop down menu i showed)

[onyx mesa]

that probably has an ID of it's own, can't check myself rn, not on pc

[chilly knoll]

should i screenshot

[onyx mesa]

in dms perhaps

[burnt sky]

@chilly knoll guessing your getting all those other icons done before pushing the ones that are missing on my end

[urban moat]

how would one theme the popup that shows up when you end stream (in call and in the mini-view)? i consider myself good with CSS but i can't find the class to target for that since it's so incredibly nested. i basically just want it to be black instead of a gradient

also generally theming with discord's SCSS variables and class names has me a little bit out of my element with something that should be as simple as selecting the channel names to recolor them, are there any good resources for theming discord?

[burnt sky]

hm trying to find the class for the X button as you see its not within the circle

if anyone knows it please lemme know

okay found it but holy shit is it hard to get adjusted to be centered

[shut ingot]

So the problem I'm having with snippet is

If I use the old chat bar css from @crimson skiff , so when I use it, the revert user area css from @polar bough gets default like it was before In the new ui

So like what do I do?

[crimson skiff]

old chat bar css?

[shut ingot]

This

@crimson skiff

[crimson skiff]

that isnt 'old chat bar' though

anyways, that should cause any issues, everything is seperated and nested into either .form or .scrollerContent

[shut ingot]

Oh, ok forgot how the old one looks, but I wanna use this, but the reverse user area is getting default when I use this

[crimson skiff]

it shouldnt? are you sure that specifically is causing the issue?

[shut ingot]

Yeah

I removed it

And the revert user area got back to normal

[crimson skiff]

as in the user area went back to the channel sidebar only?

without going into server sidebar

[shut ingot]

@crimson skiff

Look

[crimson skiff]

because your syntax isnt correct

why did you paste in an extra :root

it points the error buddy

[shut ingot]

Oh ok, I was using the css from the snippets

Idk much abt css

[crimson skiff]

its literally underlining red when you paste it

[shut ingot]

Which one

The 5th one

Or the 4th

@crimson skiff

[crimson skiff]

any

[shut ingot]

It worked thanks

[chilly knoll]

ur not accepting FR and my dms are off

[chilly knoll]

oh did i not fix those

ill push them today

couldve sworn i did

[onyx mesa]

i'll add you instead

[chilly knoll]

https://cdn.discordapp.com/attachments/1173279887985999985/1362907679198281728/togif.gif

@burnt sky is this icon for supress embeds fine

[echo frost]

test https://youtu.be/dQw4w9WgXcQ

oh it does have an icon

looks nice

[tired light]

Does anyone know what affects the background and tick color of this element?

[tired light]

Thank you!

How did you do the pause thingy?

Also umm, where and what do I put the part that affects the background color and text&tick color? So far anything I tried resulted in a transparent background

[crimson skiff]

vp f8break

[cloud jolt]

F8Break

Pause the client when you press F8 with DevTools (+ breakpoints) open.

Authors

lewisakura

[chilly knoll]

clone emojilooks so pretty /s

@burnt sky sorry hi again, should i add icons to buttons too? or nah

like these ones just before the text

[hoary stone]

I'm struggling to figure out how to change the text colour and then the background hover colour of the "Report Message" and "Delete Message History" buttons, I'm trying to make them look like how I managed to get the Delete Message button, but everything I tried for the other two just doesn't work.

On the left is how they look on the right click menu, with the right being the hover.

[crimson skiff]

after the selector, adding an extra :hover will make it apply to only the hover state

so whatever you have, copy paste, but add the :hover thing

[hoary stone]

I've got that, but it remains unchanged

[crimson skiff]

send the whole snippet for it here

[hoary stone]

/* Change text colour for the 'Report Message' option */
#message-report .label_c1e9c4 {
    color: #dd3336 !important; /* Replace 'red' with your desired color */
}

/* Change icon colour for the 'Report Message' option */
#message-report .icon_c1e9c4 path {
    fill: #c23234 !important; /* Replace 'red' with your desired color */
}

/* Change hover colour for the 'Report Message' option */
#message-report:hover {
    fill: #00ff00 !important; /* Replace 'red' with your desired color */
}

Oh wait, I got it.

Ugh, this always happens after I've spent hours struggling and then ask how to do something

For the delete message, it's just:

#message-delete:hover {
    background-color: #a02c30

but for the report message, it's:

#message-report.item_c1e9c4.labelContainer_c1e9c4.colorDanger_c1e9c4.colorDefault_c1e9c4:hover {
    background-color: #a02c30 !important;
}

[burnt sky]

@chilly knoll just woke up i would say leave those buttons alone that does stuff in settings
also delete server icon is still missing

[wanton linden]

can someone with a lot of css knowledge help me edit a theme with me, i have no knowledge of css so id have to be walked through what i need help with?

[plain kelp]

Have you considered learning css

[wanton linden]

I have not, mostly cause i usually dont have time because of school work

I just wanna know if something i wanna do would be possible/could be done easily

[chilly knoll]

why do i keep forgetting that 😭 ill add it like right now before i forget again

is there anymore missing icons

[burnt sky]

lemme look

[plain kelp]

https://dontasktoask.com/

[burnt sky]

yep edit a channel

[smoky fog]

vesktop setting, safety setup and automod
for me

[wanton linden]

I'm not even done formulating the thought I was gonna type out 😭

[chilly knoll]

ok wtf L239

wait nvm im retarded i named the solar icon file name to delete not bin

[wanton linden]

Bacically, I want to try to move over my profile icon, im using some custom css to collapse my profile card into just my profile and its not centered and covering my server list

[chilly knoll]

send ss if u dont mind pls

[chilly knoll]

ill do those now

[burnt sky]

kool

been spending the past 2 days trying to find whats in my css files thats causing the typing to be slugish

[chilly knoll]

what

[wanton linden]

my apologies, I made a thread with my issue and what I'd like help with if that helps

[smoky fog]

ah maybe later.. just start working.

[chilly knoll]

melt

[burnt sky]

i rounded it down to 2 css files, that have different stuff in it if i disable those typing is buttery smooth if i disable 1 its 50% smoother

[wanton linden]

@burnt sky when you get the chance could you take a look at this?

[honest perch]

from this root that changes color of pings only info-warning-foreground works (if its cuz of the new ui sorry didn't know)

[manic flume]

@vestal field problem in the midnight theme version 2.1.0 with zoom plugin

this function changes the tob bar

[polar bough]

again not my problem

[vestal field]

make github issue instead of pinging me

[manic flume]

I'm sorry, I didn't know

[mint tinsel]

hello anyone

[onyx mesa]

[shut ingot]

It's all fixed now

Np

[jovial arrow]

is there any way to like. compleeetely hide the "play again" and "activity cards" from ever reappearing? i disable them every time i switch accounts but i wish they'd leave me alone permanently </3

[burnt sky]

you mean on the memberlist?

[jovial arrow]

activity cards on the member list and "play again" above DMs when you load back in, yes!

[burnt sky]

try this

/* Hide Member List Activities */
[class*='membersGroup']:has([role=button]),
[class*='member'] [class*='container']:has([class*='badges']) {
  display: none;
}```

[burnt sky]

@jovial arrow ? does that fix what you needed

[jovial arrow]

sorry, i ran and grabbed food! it looks like it does, though, thank you! <3

[manic flume]

what's the theme/css for icons like that?

[burnt sky]

@import url("https://mudaranrhiod.github.io/DT/vencord/solar.css");
@import url("https://mudaranrhiod.github.io/DT/vencord/solarmoreicons.css");

thank @chilly knoll for those

[manic flume]

TYY!!

[chilly knoll]

sorry

[chilly knoll]

WAIT

how did u get the arrow that show next to the channel category to show before the category name not after

[burnt sky]

?

[manic flume]

it's one of the css-snippets

I'll look it up

[manic flume]

.containerDefault__29444 {

div {
padding-left: 0.5em;

div {
display: flex !important;
place-content: start !important;
flex-direction: row-reverse !important;
}
}
}

[burnt sky]

these pills? that are on the categories?

[pure cairn]

#🎨-css-snippets message

[burnt sky]

pretty sure im not using that in that photo you replied to me orginally on

[manic flume]

he was talking to me, you just didn't see it.

[burnt sky]

oh

lol

@chilly knoll btw did you push those updates?

[chilly knoll]

i think s

brtw i changed the links for solar
https://mudaranrhiod.github.io/VencordThemes/solar.css
https://mudaranrhiod.github.io/VencordThemes/solarmoreicons.css

the current ones will still work but u wont be able to install em afaik?

idk how github archived repos work

[burnt sky]

archives still work since you haven't hidden but yeah thanks for letting me know

[half crystal]

@chilly knoll vesktop settings

NRD_irl

[chilly knoll]

horror

i dont even have vesktop installed

if u can open console, inspect it then gimme the name it says for data-tab-id

[burnt sky]

only stuff missing now server delete server and channel settings

[chilly knoll]

i did those 😭

[half crystal]

self-explanitory

data-tab-id="Vesktop"

create event shit thyself

[chilly knoll]

oh

[chilly knoll]

how did i miss that 😭

[chilly knoll]

what icon should i use for vesktop

is laptop fine