#๐ŸŽจ-theme-development

1 messages ยท Page 70 of 1

pure cairn
#

and they updated it yesterday so they most likely just used regex as well and fixed all of it in a minute

humble jay
#

ok i think its this, gotta turn it on

pure cairn
#

yep

#

I never do, but I mean

#

eventually if they reroll class hashes there is a very small possibility the old hash gets used again

warm bramble
#

they should make up their minds

pure cairn
#

they have to show potential buyers that they're working on their platform

warm bramble
#

true lmao

half crystal
clear siren
#

if you have f8break plugin enabled yes

wanton stirrup
#

oh sh!t I got round icons back

pure cairn
warm bramble
#

this is how my theme looks like its pretty simple and nice to use (i dont own the theme)

wanton stirrup
#

now I just need one more thing

pure cairn
wanton stirrup
#

I had css for spacing here, I need to retry new code or old code but I can't find either now

#

I forgot the naming

warm bramble
pure cairn
late lichen
#

how do i get my switches back?

wanton stirrup
#

ah wait a sec

#

remove gap

pure cairn
wanton stirrup
#

old snippet worked lol omg

#

I've fixed both of my issues now, damn I was sweating for a moment there

late lichen
#

uhh, i think you are missing display: none; on .separator_aa63ab

pure cairn
#

looks like a simple

.buttons__74017 {
  gap: /* set anything less than 8px */
}```
pure cairn
#

you

wanton stirrup
#

oh

pure cairn
#

between the app launcher and the send message arrow

#

there is a small separator

wanton stirrup
#

ah

#

I can't remove the separator

pure cairn
#

why not?

wanton stirrup
#

because I don't know what I'm doing I guess

#

good thing ctrl+comma opens options because at one point I hid all the buttons, couldn't click the gear

#

I'm not into development, I'm just a user trying to get his sh!^ back the way it was, but I never had the separator removed before

pure cairn
#

you don't have to remove it if you don't want to

wanton stirrup
#

true, but I got curious how it would look and if I'd like it or not

cosmic vault
#

sadly havent had this blessing

#

in fact all of the class updaters break my theme more

#

i guess its time for manual

#

github exists

#

to me its just looking like my variables being in .visual-refresh, .visual-refresh .theme-darker isnt cutting it anymore

#

๐Ÿ˜ญ

#

that is exactly the issue

#

wildcard fixes like 99% of it

#

not oing that though

pure cairn
chilly knoll
#

what's a wildcard

cosmic vault
#

yeah

#

they just changed theme-darker to theme-dark

#

or my settings changed

#

idfk

cosmic vault
chilly knoll
#

oh

pure cairn
cosmic vault
#

that's less broad than a wildcard

pure cairn
#

you're using * as a selector?

chilly knoll
#

so * { }?

pure cairn
#

truly insane behaviour

cosmic vault
#

yeah

#

it was just as a test

#

not prod

#

dw

chilly knoll
#

hallo ken

#

regular colour looks good today

chilly knoll
cosmic vault
chilly knoll
#

why do u have no support here too

chilly knoll
pure cairn
#

read from there

pure cairn
#
  • is contains, ^ is starts with, $ is ends with
chilly knoll
#

ive never seen this one before

#

not again

chilly knoll
#

so [classname=""]

pure cairn
#

it has to be the exact classname

#

with hash

chilly knoll
#

oh

pure cairn
#

so it's the exact same as using .classname

chilly knoll
#

yeh

pure cairn
#

so pointless

chilly knoll
#

makes sense

#

thanks

pure cairn
#

np

cosmic vault
#

well class updater didnt fix my quick css

#

:(

#

whatever

pure cairn
cosmic vault
#

server list revert is also borked

chilly knoll
pure cairn
cosmic vault
cosmic vault
chilly knoll
pure cairn
#

use this instead

#

unless your theme is using attribute selectors

cosmic vault
#

aware.

#

my theme itself i just finished updating

#

just quickcss is left

pure cairn
#

open your text editor and paste it in a new file

#

then replace with regex and paste it back to discord

cosmic vault
#

the built in editor has regex replacement support

#

and it worked now

#

just confused that class updater has a commit that says it updated but like nothing changed

pure cairn
cosmic vault
#

yes

#

for quickcss

pure cairn
cosmic vault
#

im NOT theming the settings modal rn

#

i cba

#

it'll stay unthemed for like

#

forever

#

until i eventually do

pure cairn
#

oh yeah I know about that button

#

I didn't know you could use replace there

cosmic vault
#

the replace tool looks indentical to vsc

#

ctrl h

pure cairn
#

lmao

cosmic vault
#

that's the hotkey for like every ide i know

#

i just tried it

#

sure enough

pure cairn
#

yea it works, never used it once

cosmic vault
#

me neither

pure cairn
cosmic vault
#

but it looks identical to vsc

pure cairn
#

yep

pure cairn
north rapids
#

can someone give me a good font?

cosmic vault
#

discord should theme discord to look like my discord

pure cairn
chilly knoll
cosmic vault
#

๐Ÿ™

#

i use whitney still

pure cairn
cosmic vault
#

i use cabin font on mobile

pure cairn
#

it's easy on the eyes

cosmic vault
#

use home video

#

๐Ÿ™

chilly knoll
#

Whitney is almost as horrible as comic sans imo

cosmic vault
north rapids
north rapids
cosmic vault
#

whats wrong with witney font

#

seriously

cosmic vault
cosmic vault
#

its the old discord font

#

use ultrakill font

#

best discord experience

chilly knoll
cosmic vault
lament trench
cosmic vault
chilly knoll
cosmic vault
#

well how else are you supposed to capitalise?

lament trench
#

why would you want your text to be all caps

chilly knoll
cosmic vault
chilly knoll
#

mb I'm slow

lament trench
#

oh

#

the emoji makes sense now lol

cosmic vault
#

this is whitney

chilly knoll
#

OH

pure cairn
#

did you really just get that now

chilly knoll
#

yeh

#

๐Ÿ˜ญ

pure cairn
cosmic vault
#

no issues with whitney

#

g

chilly knoll
cosmic vault
north rapids
#

what kind of font did I find lol

chilly knoll
lament trench
#

oh ok

pure cairn
#

comic sans my beloved

north rapids
#

Plus Jakarta Sans

#

Is nice

brazen sundial
#

i like me some Outfit every now and then

chilly knoll
cosmic vault
#

this is the most readable font

north rapids
north rapids
pure cairn
brazen sundial
lament trench
cosmic vault
#

i purposely did that

#

it got in the way otherwise

chilly knoll
brazen sundial
#

LOL fair enough

cosmic vault
#

even more readable

pure cairn
#

love me some good Wingdings

chilly knoll
north rapids
brazen sundial
#

i loaded your theme cause i cba to deal with the guild bar madness and that was something that threw me off lol

cosmic vault
#

i love meloso but its a bit big

pure cairn
#

I had a snippet which turned all codeblocks into that

cosmic vault
chilly knoll
chilly knoll
#

want me to find em?

brazen sundial
#

seems nice but i dont liek the spacing

cosmic vault
chilly knoll
#

meleoso has always look3e pretty on discord imo

lament trench
#

i like what catppucin uses idk what its called though

cosmic vault
#

that looks nice

lament trench
#

also i love the new switches discord added

pure cairn
#
@import url('https://raw.githubusercontent.com/Krammeth/css-snippets/refs/heads/main/Codeblocks.css');
#

enjoy

cosmic vault
#

this font is a little bit freaky but not quite freaky

brazen sundial
#

wtf

cosmic vault
#

allriiiiiiight

brazen sundial
#

wonder what went wrong

cosmic vault
brazen sundial
#

LMAO

cosmic vault
pure cairn
#

it's meant to be that way

brazen sundial
#

at least i can read

brazen sundial
#

๐Ÿ˜ญ

cosmic vault
#

this font is called vladimir script

#

holy fucking cursive

#

this is unreadable

chilly knoll
#

it should have all the variants

lament trench
north rapids
cosmic vault
chilly knoll
north rapids
cosmic vault
#

oh my

#

too much spacing

brazen sundial
cosmic vault
#

idfk why

#

prob a skill issue tbh

chilly knoll
cosmic vault
#

yeah

chilly knoll
#

rip

#

i remember trying to find one woth less spacing back in bunny and that was the best I found

cosmic vault
#

idk the only thing that seems to look right for me on discord is whitney

#

i mean figtree also looks good

#

but i dont typically touch the font on desktop

chilly knoll
#

fair enough

chilly knoll
hazy swan
#

did they again change classes?

#

my whole Discord is messed af

limpid mirage
#

bruh they reverted it

#

classname_fgy7g8t544h -> a8s7d09a87s0dh78s-classname -> classname_fgy7g8t544h

hazy swan
#

fockin' hell

#

any reverter or sth?

#

sorry, i just woke up

hazy swan
#

thanks

trail willow
#

Hi! I scrolled back a tad but there's a ton of messages and I can't tell if this has already been answered. I have my own custom theme installed, I made it with theme editor a while back and now idk how to fix it. My vencord is updated and repaired, and the theme is technically active. I tried the links suggested in the support channels for fixing the .css file but none works.

pure cairn
#

Send a screenshot of how the theme file looks

trail willow
cosmic vault
#

no ide...

soft bane
#

Lmao funny seeing you here kell, i'm having the same issue ๐Ÿ˜‚

pure cairn
#

Those are only imports

#

So you won't have any effect on them with the updater

#

Also, why is it importing the same titlebar snippet thrice?

trail willow
#

no idea smarty

#

so, another question... what if I don't remember what the original theme is

pure cairn
#

It's the first import

#

Frosted Glass

trail willow
#

thankssillycat

pure cairn
#

Np

zinc lava
#

also updated the BetterFolders fix

 .vc-betterFolders-sidebar~section.panels__5e434 {
  left: calc(var(--custom-guild-list-width)*2  + var(--space-xs));
  width: calc(100% - var(--custom-guild-list-width)*2 - var(--space-xs)*2 ) !important;
}```
supple sparrow
# cosmic vault

hey Tryfle could you share your quickcss? besides the font the ui and icons are nice ๐Ÿ˜„ mine are broken since latest discord update ๐Ÿ˜ญ

cosmic vault
#

my qcss is like 90% commented out

#

and my font is not apart of it

#

nor is my theme

#

my qcss is stuff like spotify modal and shit for my nameplate

cosmic vault
supple sparrow
desert palm
#

anyone know why my server icons are like this? is the old ccs for the icons broken?

cosmic vault
#

the old one is broken yeah

desert palm
#

thtas annoying

#

anyone made anything new?

cosmic vault
#

they just used classupdater on the old

#

i did that and it like 90% works

#

folders are just fucked

#

and i have no idea how to fix that

desert palm
cosmic vault
#

google

#

syndishacks discord class updater

pure cairn
desert palm
#

i did that and it didnt fix it

supple sparrow
# cosmic vault https://github.com/tryflle/tryfletheme

if I want to change the purple color back to the default discord one "ashes" what could i edit from your quickcss? I love that all icons and ui is so proper to read and the purple is very fancy but after all i would like to keep discord a bit more natural in some occasion ^^ ty

cosmic vault
golden ibex
#

I'm having a hard time finding the parameter in dev tools to align the profile popup shown when I click on my avatar on the user area. Is it possible at all?

alpine tangle
#

not a theme developer, but all who are, yall are angels for dealing with the fucked update. that is also a given for vencord developers

pure cairn
chilly knoll
#

points for it not being amoled slop either

hazy frigate
#

discord finally broke this husk

warm bramble
#

its pretty simple theme

chilly knoll
#

isnt that good

#

its easier to keep everything consistent

pure cairn
golden ibex
hazy frigate
pure cairn
#

oh wait I forgot to add the !important

#
.layerContainer__59d0d>.clickTrapContainer__59d0d>.layer__59d0d[id^="popout_"]:has(>.fade_faf9c0>.popoutContainer_ce8328) {
  left: 10px !important;
}```
#

there you go

left thicket
#

for those trying to fix themes, here is a tutorial:
open visual studio code or similar (though this is for vsc
and paste this in find: \.([_0-9a-f]{6})[0-9a-f]{10,11}-([A-Za-z0-9_\-]+)
and paste this in replace: .$2_$1

in the tutorial i remove \. from find
and . from replace

to update class selectors as well

if anyone was wondering as well,

basically just add _ to the end of a class, then paste the first 6 characters of it to the end, then remove everything to the left of the dash, including the dash

Also the online class updater isnt up to date as of writing, so it will not work.

pure cairn
#

sorry

golden ibex
#

oh lol, yep that fixed it, thanks!

pure cairn
#

np

hazy frigate
pure cairn
#

well yeah, I know it works
I tested it beforehand xD

#

np

cosmic vault
plain mango
#

no clue if this is the right spot to ask, but smth in my frankenstein of custom css code had this part of the sidebar be above the title bar, but it broke and im not. sure where in my hodgepodge that code is? and im not sure if it can be fixed but i figured id see if anyone knows abt it here apologies for th brighter background lol

#

if needed i can prolly find an older screenshot of what it USED to look like somewhere in a server of mine

#

aHA i did find an older screnshot mwahaha

#

i think its smth to do w th guildbarrevert import i have if i had to guess

pure cairn
#

Yes, multiple people asked about it yesterday

plain mango
#

ahh gotcha okay

prisma lynx
#

is there a list of all css classes in the client?

smoky belfry
plain mango
#

thank you soso much if you can its p much the only thing bothering me

#

minus the image attachment icon being uncentered but ill live

#

snagged some code i saw to revert th icon back to th older one, but its kind of off center n nothin i tweak in my code does anything that im aware of

smoky belfry
#

why revert that icon tho ?

plain mango
#

dunno, i like th lil circle more

#

plus th new one is also off center for some reason

#

shrug its not that much of a bother for me

smoky belfry
#

the change is so minor for me that it's not worth it to put energy changing it

#

the guild header sucks tho and makes experience worse

#

so that does make small energy to fix worth it

plain mango
#

yeah nods

smoky belfry
#

UI should always serve UX and not the opposite

#

the modern world has started to forget it tho...

plain mango
#

yeeeahhh, which sucks a lot

smoky belfry
#

alright this should be it @plain mango

[class^=container] {
    > [class^=header_] {
        border: unset;
        padding: unset;
        > [class^=headerContent] {
            > [class^=guildDropdown] {
                padding-left: 16px;
                padding-right: 16px;
                height: 48px;
                width: 100%;
                border-radius: 8px 0px 0px;
            }
            > span { display: none; }
        }
    }
    > [class^=headerEllipseBackdrop] {
        left: 0;
        right: unset;
    }
    > [class^=headerEllipseForeground] { border-radius: unset; }
    > [class^=headerGlass] {
        opacity: 0 !important;
        width: 100%;
        left: unset;
        border: unset;
        [class^=bannerVisible] > & { height: var(--custom-channel-header-height); }
    }
}
#

it's as minimal as it can be

plain mango
#

tried it, doesnt seem to work w me, but it may be my own frankenstein coding breaking it, lemme try it on its own

smoky belfry
#

maybe i should release it as a snippet if people want it

wintry cape
#

You want to move the whole section up?

smoky belfry
plain mango
#

yeah p much

wintry cape
#

Like this?

plain mango
#

ik its some part of the guildbar revert i have set to import but its not updated w discords current stuff they broke

wintry cape
#

Ignore the searchbar thing

plain mango
#

nooot quite let me get a better sc hold on

wintry cape
#

You want the sidebar moved up right?

#

With server channels etc

smoky belfry
#

i can look if i can just make it go higher

#

doesn't seem that hard

plain mango
smoky belfry
#

but since discord love to fucking use absolute everywhere i can imagine where it descend into madness

plain mango
#

this was p much waht it looked like

wintry cape
#
.sidebar__5e434 {
  grid-row: top / end;
}
plain mango
#

didnt work for me scratches skull

smoky belfry
#

and this wouldn't work anyway

wintry cape
#

Huh

plain mango
wintry cape
#

Look

smoky belfry
plain mango
#

push comes to shove i can wait till the import is updated, just not sure when itll be updated

wintry cape
smoky belfry
#

sidebar is not a thing
sidebarlist is

wintry cape
#

Maybe this has to be included:

.vc-betterFolders-sidebar-grid {
  grid-template-areas:
    'guildsList betterFoldersSidebar channelsList titleBar'
    'guildsList betterFoldersSidebar channelsList notice'
    'guildsList betterFoldersSidebar channelsList page';
}

.sidebar__5e434 {
  grid-row: top / end;
}
smoky belfry
#

this is how you'd modify it

wintry cape
#

The sidebar is needed aswell tho

smoky belfry
#

yes maybe

plain mango
#

mm, nope still didnt work, even w/o th css i usually use

smoky belfry
#

oh wait

#

does exist, but it's not the channel list

#

it's the channel + folders

wintry cape
#

I said it's the whole thing

smoky belfry
#

bruh

#

i love being fucked with sleep cause exams

#

can't read

wintry cape
#

No worries

#

I forgot the other part aswell

plain mango
#

make sure to rest when you can

smoky belfry
#

they need to change base

#
grid-template-areas
"guildsList channelsList titleBar"
"guildsList channelsList notice"
"guildsList channelsList page"
wintry cape
#

Oh

#

Yeah depends if you use the plugin or not i guess

wintry cape
plain mango
#

its a nightmare collection of random bits n pieces lol

smoky belfry
#

and then sidebar

plain mango
#

not sure if i cna send it properly

smoky belfry
#

and it should mostly work

#

lmao bruh swapped to discord from devtools and it broke

#

my god

#

i hate discord

wintry cape
#

Nice haha

smoky belfry
#

you can see the titlebar, libvencore being moved

wintry cape
#

Sometimes it also randomly breaks for me

smoky belfry
#

right after where the sidebar should be

wintry cape
#

Yeah

plain mango
#

yeah discord loves to jus break things for fun

#

ive come to notice

#

anyways let me see if i can try n send my css hodgepodge

smoky belfry
#

if you want my best tip, it's very simple

#

learn CSS yourself

#

genuinely

#

you're the person which is the most likely to do what you want

#

CSS isn't even hard

plain mango
#

its smth ive been workin at slowly, i just suck w reading stuff lol

smoky belfry
#

dealing with discord bullshit is

#

also there's no need to overcomplicate things
be as simple as you can

#

and do the least changes you can

plain mango
#

oh it did

#

colour me surprised

#

i should preface i just grab random bits that i see around, so if theres a lot of doubled over stuff yeah i just threw in stuff to make it work

wintry cape
#

I just broke my own css

#

Lol

#

I have to disable it rq

dark schooner
#

Oh boy, love opening discord to everything being broken.

plain mango
#

yeeep they changed some stuff again, iirc th classes ?? or whatever theyre called

#

thats all i could gather anyway

dark schooner
#

So was there a workaround for the revert user area? Trying to find a way to make it smaller again as I can't stand it covering servers.

plain mango
wintry cape
#

It overrules i think

plain mango
#

ohh

#

i have no clue what that is truth be told

wintry cape
#

Is what you have

plain mango
#

nods

dark schooner
wintry cape
#

But your classes are outdated some

#

Bonnie

plain mango
#

yeah that would make sense, i pretty much just copypasted diff bits of css floating around th server so

#

some stuff is bound to be outdated

#

since i mixed it w some older css i already had

wintry cape
#

Now it works and it broke my discord lol

echo frost
#

discord pushed an update yesterday that changed the css classes

wintry cape
#

I know, but he had normal and outdated classes

#

What is this

plain mango
#

oh lord i have no clue

spring sleet
#

oh man my icons are just . Gone. so thats dope i dont know what to do with that

wintry cape
#

That works, but now my discord looks really weird

#

(It's the css)

#

Looks like this now

smoky belfry
#

me when i can just switch back from [class*=] back to [class^=]

#

people be wild for not having done like me

wintry cape
#

It's not good for performance

#

In the end

smoky belfry
#

^= is fine

#

and actually *= was fine too

wintry cape
smoky belfry
#

and if it's a full theme sure use ids, but then you have the id migration thing

plain mango
wintry cape
#

Okay

#

I do use it, so it looks a little different for me then for you

#

Just so i know

plain mango
#

nods, yeah i dont have it enabled so

#

oh yeah i should also state im trying to keep the inbox at least, it helps me w navigation and whatnot

plain mango
#

YEAH like that

wintry cape
#

What is the point of this?

#

The button is really strange

#

It's centered now

plain mango
#

oh i have no clue

#

thats not on my stuff so idk

#

unless smth busted on my end which is possible

wintry cape
#

It is your snippet

plain mango
#

oh then smths tweakin i guess

wintry cape
#

You had 10px bottom padding important with a height of 4 px

plain mango
#

oh thats weird

#

might have messed w smth i didnt know did anything if i had to guess

smoky belfry
#

first css lesson :

#

never use important

#

unless truly there is no way

bleak mica
#

discord seriously go back to the old style of classnames AGAIN???

wintry cape
#

Yes

bleak mica
#

will they make up their mind lmfao

wintry cape
#

Use this ^

bleak mica
#

i use attribute selectors so i have to go it differently anyway but thank you

wintry cape
wintry cape
#

I also placed the second import url you had on the top instead of halfway the css file

#

It's 1kb smaller then you sended

plain mango
#

YIPPEEYAHOOOOO it works !! thankyou so much ur a life saver lol

wintry cape
#

Your welcome

tranquil whale
#

why is everyone still fixing stuff just use utc

bleak mica
#

oh they did more than just change the classnames it seems

smoky belfry
#

oh my fucking god discord
WHY THE FUCK ARE THEY USING THE 32BIT INTEGER LIMIT TO MAKE A FUCKING BORDER ROUND

tranquil whale
bleak mica
tranquil whale
#

available for equicord to build too

#

can add to moonlight and is in replugged

bleak mica
#

still doesn't fix for people running unmodified

#

Userstyles exists

tranquil whale
#

whatever

quartz wolf
#

Discord fucked up the classes again, didn't they T_T

bleak mica
#

they reverted them yeah

#

among other things it seems

quartz wolf
#

wait so now they're back to how they were before they got fucked before?

#

Or are they just messed up again

bleak mica
#

same format as before

#

className_abcdef

quartz wolf
#

oh cool so I can just switch back. That's nice at least

bleak mica
#

idk if the hashes are the same or not though

#

i would assume not

quartz wolf
#

Looks like they are!

#

My pre-change CSS is working fine, as far as I can tell

bleak mica
#

patiently waiting for oldcord to update

wintry cape
#

@neon snow Use this to update your classes.

tranquil whale
#

i dont get why people dont just use utc

#

like the regex is

const getName = (i) => {
const classNameRegex = /(\w+?)([\w\d$]+)/g;

const classSuffixHashRegex = /[_\d$]/;

return utc_${classNameRegex.exec(i)?.[1]};
};

neon snow
#

i mean i did realize they essentially just reverted it

#

the old one worked

neon snow
#

like it went from .channelTextArea_f75fb0 to .f75fb00fb7356cbe-channelTextArea and now back to .channelTextArea_f75fb0 ๐Ÿ˜ญ

wintry cape
#

Yes

plain mango
# wintry cape

minor question on this is there a way to make the user area go back to being more squished and small again? if not thats chill honestly i can live w it, it being wide and covering the sidebar is just a bit annoying

my apologies guh css is a nightmare for my brain to comprehend lolz

#

also just noticed the folders get busted woops

wintry cape
#

It's not the icons. it is the background btw

#

Let me see

plain mango
#

aaaah, yeah i noticed everything got smaller n it messed w some stuff

#

sorry for bein a bother lol, im just way out of my element here so help is v appreciated

wintry cape
#

I think i fixed it now

wintry cape
#

But you might want to lower the chat bar and or userpanel

plain mango
#

ahh yeah i can see why you mentioned that, top n bottom seem a lil squished on my end but its fine honestly

#

jic you need to see what i mean, honestly this is fine lol th bars n minor gradient at th bottom doesnt bother me too much it at least works thats all i care abt lol

#

yknow jus realized that image sucks . hold on

#

okay thats. better. my bad again, like i said b4 these r no issue tbh jus figured id point em out in case shrug

#

th bottom orangey red is my windows search bar dont mind that snorts

wintry cape
#

You want it all the way to the top?

plain mango
#

yeah, unless it busts smth in which its no biggie

#

all th way to th top all th way to th bottom was how i had it, but discord loves to just break

#

as per usual

wintry cape
plain mango
#

hrm, is there a way to make it flush with the bottom again or would it just be easier to keep it floating? i can work w it floating no issue, th rest looks great actually

wintry cape
#

You just want it at the bottom?

plain mango
#

yeah, if possible

#

if not dw abt it

wintry cape
plain mango
#

OHH i didnt see it if its in th one you sent recently

wintry cape
plain mango
#

my bad i cannot read css anything for th life of me, not that well anyway lol

wintry cape
#

The last 2 variables in ":root {}" that start with --

plain mango
#

ohhh okay, tysm !! genuinely ur a life saver lol

plain mango
wintry cape
#

You can just change the pixels and it would work

plain mango
#

ahhhh okok, nods

tidal heron
#

dont suppose anyone has a minimal ish user panel that works with the new variables

nimble sun
#

I assume it works with the new stuff because I just updated lol

smoky belfry
tidal heron
#

i did however just fix the Simplified Panels Area snippet

#

i did manage to get it back to this but tbh i think i just need a snippet that makes the buttons smaller and just "cleans" it up

tidal heron
#

idm the size n shit just the big ass buttons

echo frost
#

I made a bit more of a user friendly guide for how to use the regex

#

might be good to pin?

#

You can do this in quickcss or vscode (or some other code editor)
press ctrl+f to open find
press the .* symbol or alt+r
paste \.([_0-9a-f]{6})[0-9a-f]{10,11}-([A-Za-z0-9_\-]+) in
press toggle replace on the left (ctrl+h)
paste .$2_$1 in
press replace all (ctrl+alt+enter)
-# regex from #๐ŸŽจ-theme-development message

pure cairn
#

I would also add the one for attribute selectors

tranquil whale
#

im making a plugin to add better dev tools to discord anyone intrested

echo frost
#

wdym better devtools?

tranquil whale
#

alt click something for class names

echo frost
#

like alt click to copy class names?

#

what are the utc classes

#

is that from equicord?

tranquil whale
tranquil whale
tranquil whale
echo frost
tranquil whale
#

I hate standard dev tools

prisma stirrup
#

could anyone help me fix my theme ?

#

I used to have a background image

tranquil whale
prisma stirrup
#

I tried with your class updater and it didn't work

prisma stirrup
tranquil whale
#

send me code and let me try

#

i have a fex class updaters

prisma stirrup
tranquil whale
#

use class updater in my bio it works

prisma stirrup
#

I did.. ?

#

Or I used it wrongly

tranquil whale
#

U gotta make a GitHub repo to replace that import link

prisma stirrup
#

gimme a bit

tranquil whale
#

Abd on left sidebar put those files in the GitHub repo and replace import links

echo frost
#

or just use the imported css in your quickcss without importing it

prisma stirrup
#

So just to make sure

#

I should create a github repo, create the CSS exactly as the one from this link, and import it from my repo instead of this repo link?

tranquil whale
#

Use the code in the desktop sub tab

prisma stirrup
#

yeah

echo frost
tranquil whale
#

Gotta replace import link though

echo frost
#

well remove the import link too yeaH

#

you don't need to replace it though

tranquil whale
#

Look at your image theres a desktop.css sub tab

echo frost
tranquil whale
#

I checked earlier no updates to it

prisma stirrup
#

Oops, did an oopsie I think

#

Discord became unresponsive

#

On pc

#

okay let me try again

#

Okay I've uploaded the updates .css on github

#

like this ?

prisma stirrup
#

Thanks now it works

jade totem
#

does a theme based on the Cinnamon DE exist yet?

mellow merlin
#

how does one start making a theme?

gleaming vortex
mellow merlin
#

ty

steep drum
left thicket
gleaming vortex
left thicket
#

ty INNOCENT

#

i wanna post css snippets but it doesnt let me since i dont have the role

#

also my css is prolly bad LOL

tidal heron
#

anyone know what could possibly cause these random movements in the channel/category list

pure cairn
#

Are you using one of my buttons snippets?

#

Yeah it might be due to the channels one

#

It happens when you change size to the invisible elements at the top

tidal heron
fair cipher
#

did discord revert this back

#

like we cant be deadass right now i have .name__hash instead of like the ._hash-name on all my elements i think

#

thanks ily

echo frost
#

btw, two underscores are just because the hash has an underscore

fair cipher
#

oh i see

echo frost
fair cipher
#

i never really understood the change anyway, what was wrong with the shortened hash

echo frost
#

ig they were worried about a shortened hash conflict?

#

idk why they put the hash at the start though

fair cipher
#

i guess that could make sense

echo frost
#

it's 6 with i think 17 characters?
which would be 1,419,857 possibilities i think?

#

although it seems like the underscore can only be at the start of the hash

#

so idk

pure cairn
inner bloom
#

Hello, was wondering how to change that green to gray i cant figure out the class

#

also i can not make these persistent for the life of me

#
.pointerEvents__44b0c {
    fill: #555; /* green */
}

.icon_c9d15c path {
    fill: #555; /* new color, e.g., red */
}
#

this is what i got rn

#

pointer events is for online offline etc and .icon... is for the playing icon or listetning etc

narrow hinge
#

I donโ€™t update the site every time there are class updates, the changes come from a separate repo that I update every few days btw

tranquil whale
#

just use class updater in my bio

inner bloom
#

damn that fixed my theme

#

ily

subtle sedge
#

@tranquil whale stop advertising your vibe coded class updater please

#

you already got automodded once

pure cairn
#

Lol

narrow hinge
tranquil whale
tranquil whale
subtle sedge
#

yes

#

that's too much

tranquil whale
#

Oh god didn't realise

#

Sorry

subtle sedge
#

it's alright

frigid zinc
#

my favorite discord feature

willow wigeon
#

a theme i'm developing

#

just realized i have oldcord on lol

onyx mesa
visual fiber
#

remove back Forward Buttons

  display: none;
}```
iron smelt
#

I actually like the arrows, they help with navigation

echo frost
echo frost
iron smelt
onyx mesa
#

i feel like most mice got forward/back buttons nowadays

crimson skiff
iron smelt
# echo frost ?

I think they were referring to the two buttons on the side of most every mouse made nowadays

pure cairn
#

That's what people use those buttons for?

smoky belfry
crimson skiff
smoky belfry
#

i guess my quickcss automatically get rid of them

smoky belfry
#

am i the only one to want role icon urls in themeattribute ?
it'd be so neat

frigid zinc
onyx mesa
#

also it might not even solve the issue, it did for me but it might not for you since MPO is an Nvidia thing first off, so if you're using AMD or so on

onyx mesa
#

noticed this DM list border issue, only happens if the person has a long status

#

the issue is part of your compact button snippet @pure cairn

pure cairn
#

it might be something I added because I removed scrollbars on my end

#

I don't remember honestly

#

yea I think it's this part

onyx mesa
#

adding min-width: 0 here seemed to fix it on my end

pure cairn
#

noted, I'll fix it later

#

thanks

echo frost
#

nice one discord

cosmic vault
#

average

oak plover
#

me when i split my css into 5 thousand files and i can't be arsed to figure out the order of any of it

last kestrel
#

Thank you! This worked for me to get the guildbar (mostly) back to the way it should be. I think the server folders might be a touch wonky, but I'll take it!

crimson skiff
clear siren
#

put it in the display:none

pure cairn
#

Real

crimson skiff
#

just thought i could perhaps make use of it

supple gull
#

@mental stirrup i think this is yours?

mental stirrup
#

unfortunately I do not have access to my computer and can't push any changes to the GitHub, you can find a fix on the thread (#1354502862390038528 message)

supple gull
#

oh alr thanks

#

yeah that works

#

appreciate it

winter palm
#

been tryna figure out how to get rid of this little yellow spot, any1 got any ideas

#

cant figure out the class its got

echo frost
#

actually that's used in other places

#

there definitely used to be a specific var for this

brazen quartz
#

there is, it's just not used there

echo frost
#

but do .mentioned__5126c::before { background: blue; } or something

echo frost
winter palm
#

tanks!

echo frost
winter palm
#

there used to

echo frost
#

actually maybe not

rotund field
#

does anyone know how i can achieve transparency on discord similar to the attached image? cant seem to find any themes that have transparency but don't significantly alter the way discord looks

echo frost
rotund field
#

only ones i could find were either broken or have a significant amount of modifications

echo frost
rotund field
leaden hinge
#

WIP - no external imports, no online themes, all from scratch and only 200 lines with comments so far. Still messing with the trailing cotnainer's style to get it to fit properly and then I nee to do a pass on all the titlebar variants. Using anchor positioning to eliminate all of the hacky padding, simplifies the compact header to just:

[data-fullscreen="false"] {
  &>div[class*=bar]>div[class*=leading] {
    anchor-name: --vc-anchor-leading;
  }

  &>div[class*=bar]>div[class*=trailing] {
    anchor-name: --vc-anchor-trailing;
  }

  [role="button"] {
    -webkit-app-region: no-drag;
  }

  [aria-label="Channel header"] {
    position: fixed;
    position-anchor: --vc-anchor-leading;
    top: 0px;
    left: anchor(--vc-anchor-leading right);
    right: anchor(--vc-anchor-trailing left);
    width: auto;
  }
}

(note: this isn't finished so it has problems seen in the screenshot)

echo frost
#

I'm pretty sure I've seen it but not positive and not sure where

rotund field
rotund field
viral jasper
#

why is the update and toolbox icons so small for me

smoky belfry
#

wait i just noticed i have the same with the update button despite my CSS

#

wtf has discord done

smoky belfry
smoky belfry
#

guys i got a neat trick to push the saturation to 100

#
filter: saturate(2147483647%);
#

you can thank me

smoky belfry
#
[class^=bar] {
    z-index: 3001;
    padding: unset;
    > [class^=leading] { display: none; }
    > [class^=title] {
        position: relative;
        padding-left: 4px;
        > [class^=title] {
            gap: 4px;
            > [class^=icon] {
                height: 16px;
                width: 16px;
            }
        }
    }
    > [class^=trailing] {
        gap: unset;
        > [class^=clickable] {
            height: 16px;
            width: 16px;
            padding: 3px 12px;
            margin: unset;
            &:hover {
                background-color: var(--interactive-background-hover);
                color: var(--interactive-text-hover);
            }
            > [class^=badge] {
                height: 5px;
                width: 5px;
                bottom: 4px;
                right: 13px;
            }
        }
        > [class^=button] {
            height: 16px;
            width: 16px;
            padding: 3px 12px;
            margin: unset;
            &:hover {
                background-color: var(--interactive-background-hover);
                color: var(--interactive-text-hover);
                > [class^=icon] {
                    background-color: unset;
                    border-radius: unset;
                    > path { filter: saturate(2147483647%); }
                }
            }
            > [class^=icon] {
                height: 16px;
                width: 16px;
                overflow: visible;
            }
        }
        > a[href="https://support.discord.com"] { display: none; }
        > [class^=winButtons] {
            gap: unset;
            > [class^=winButton] { width: calc(var(--custom-app-top-bar-height) * 2); }
        }
    }
}
viral jasper
#

Sure, i'll use it

lofty yew
#

anybody knows why this happens and how to fix it? dims the space behind the panel over the channel section whenever i scroll up and the server banner becomes visible, seems to also happen to the summary bar

echo frost
#

probably would need your css to figure that out

clear siren
#

at least when I had glass discord on windows it wouldn't work at all; on linux it works kinda

winter warren
#

i guess then the only option would to use a semi transparent frosted image as background

echo frost
#

that wouldn't blur it though

burnt sky
#

does anyone have the snippet that makes server icons round

left thicket
tranquil whale
#

It has it in the code somewhere

smoky belfry
lofty yew
#

humm iโ€™ll try to figure out but prol has to do with the transparency there

echo frost
# burnt sky does anyone have the snippet that makes server icons round

I use this

.folderPreviewGuildIcon__48112 {
  border-radius: 50% !important;
  font-size: 6px !important;
  line-height: 16px;
}

/* Round and animated server icons */
.blobContainer_e5445c foreignObject:hover,
.blobContainer_e5445c.selected_e5445c foreignObject,
:is([data-list-item-id="guildsnav___home"],
  [data-list-item-id=guildsnav___favorites]
).selected__6e9f8 .childWrapper__6e9f8,
:is([data-list-item-id="guildsnav___create-join-button"],
  [data-list-item-id="guildsnav___guild-discover-button"]
).selected__5bc7e,
.stack_dbd263>div[style="opacity: 1; height: 40px; transform: scale(1);"] .selected__6e9f8>img {
  border-radius: 27% !important;
}
.blobContainer_e5445c foreignObject,
:is([data-list-item-id="guildsnav___home"],
[data-list-item-id=guildsnav___favorites]) .childWrapper__6e9f8,
:is([data-list-item-id="guildsnav___create-join-button"],
[data-list-item-id="guildsnav___guild-discover-button"]) {
  transition: border-radius 0.2s linear;
  border-radius: 50%;
}```
onyx mesa
#

what happened this time

#

nothing happened, vencord just refused to import my repos

echo frost
#

why did they change files
it looks so weird

#

also it broke copyfilecontents :(

#

and the scrollbar

tranquil whale
#

F discord

gilded jasper
#

doesn't seem to be working anymore? At least it definitely doesn't work for the thread/notification settings/pinned messages/show member list, which are at the top right

narrow hinge
pine needle
#

i was wondering which should i use?

path[d="M18.09 1.63c.4-.7 1.43-.7 1.82 0l3.96 6.9c.38.66-.12 1.47-.91 1.47h-7.92c-.79 0-1.3-.81-.91-1.48l3.96-6.9Zm.46 1.87h.9c.3 0 .52.26.5.55l-.22 2.02c-.01.16-.17.26-.33.23a1.92 1.92 0 0 0-.8 0c-.16.03-.32-.07-.33-.23l-.21-2.02a.5.5 0 0 1 .5-.55ZM19 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"] { fill: #f9e2af; }

or

[class$=icon__2ea32] path[d^="M18.09 1.63c.4"] { color: #f9e2af !important; }

iron smelt
halcyon crypt
#

is it possible to move the download button from the menu next to the change language and view whole file buttons, or replace one of them?

minor panther
#

idk if there's smth wrong with my computer or maybe with vesktop, but discord seems to have switched the placement of this from the right to the left

#

is there css to fix it if possible

#

or is it an experiment that i can find in settings

#

or smth else

minor panther
#

uhhhh wtf lol

#

is anyone else having this problem

smoky belfry
#

I'll share it tomorrow

minor panther
#

ok :]

#

ty

chilly knoll
#

is it cuz of the class (the .icon__ is a class right)

echo frost
#

oh yeah i'm having it too

#

oh wtf the sticker is as wide as the message for some reason

echo frost
# minor panther ok :]

โจ.clickableSticker_abd7a8 { width: fit-content; }โฉ is probably what julien meant

smoky belfry
#

Yes

#

I think there was another way but that one is valid

gilded jasper
echo frost
#

so โจ..., .toolbar__9293f {...}โฉ

gilded jasper
#

ok nvm, found

#

(for reference if anyone else is as noob as me, it becomes like this:
โจ```css
div[class^="buttons"], .toolbar__9293f {
gap: 0!important;
}

gilded jasper
onyx mesa
#

how do you mess this up and then roll it out live

#

why is the hole sticker selection stretched through the whole message

chilly knoll
narrow hinge
#

Lol

smoky belfry
river pecan
#

oh wtf, didn't realize till now

tidal heron
#

is there a way to do this with less โจ:hasโฉ selectors?
โจโจCSS /* Swap Clan Tag and Role Icons */ [class^="headerText"] { display: inline-flex; & > span:has([class^="roleicon"]){ order: 2; } & > span:has([class^="chipletContainerInner"]){ order: 3; } & > span[style="display: none;"]{ order: 4; } & > .vc-message-decorations-wrapper { order: 5; } & > span:has(> [class^="newMemberBadge"]){ order: 6; } & > span:is([class^="botTag"]){ order: 7; } }โฉโฉ

tight nimbus
#

why are you using an attribute selector for classes instead of just using the class selector?

#

wait why are you using โจโจ:isโฉโฉ there?

both โจโจspan[class^=โ€œbotTagโ€]โฉโฉ and โจโจspan.botTagโฉโฉ would work fine (and actually probably faster)

tight nimbus
tidal heron
#

it swaps the icon role and clan rag

#

usually the clan tag would be directly after uname

tight nimbus
tidal heron
#

also it wasnt me who made it so no idea why its using certain things

#

i think it was @pure cairn

tight nimbus
#

appropriate name, lol

pure cairn
#

I don't do :has horrors anymore

tidal heron
#

just found the post as u sent it lol

tight nimbus
#

okay technically this should work, but it's significantly less readable and more brittle than just using โจโจ:hasโฉโฉ
โจโจ```css
/* Swap Clan Tag and Role Icons */
[class^="headerText"] {
display: inline-flex;
& > span[class=""]){
order: 2;
}
& > span:not([class]):first-child{
order: 3;
}
& > span[style="display: none;"]{
order: 4;
}
& > .vc-message-decorations-wrapper {
order: 5;
}
& > span:has(> [class^="newMemberBadge"]){
order: 6;
}
& > span[class^="botTag"]{
order: 7;
}
}

tidal heron
#

reduce the lag i have

pure cairn
#

swap the attribute selectors to class names

#

it'll help

tight nimbus
#

yeah removing โจ:hasโฉ isn't the way to go (at least here where you really need it)

tight nimbus
#

(to be clear I use classes for vencord bc discord's html is set up to use classes, I just mean in my own projects I just make the html semantic enough where I can use other selectors instead of classes)

pure cairn
tight nimbus
#

oh?

pure cairn
#

โจ.card__39ec2:has(> .header__39ec2 > .headerText__39ec2 > .platformIcon__39ec2[style="mask-image: url(\"/assets/f6833ce4dd20c1fb.svg\");"])โฉ

#

things like this

#

nowadays I try to use :has() only if there is no other way to properly select something specific

leaden hinge
tight nimbus
#

oh good to know thank you

leaden hinge
#

Things like this are why browsers continue to eat more memory though - they are basically keeping a hashmap of all of each element's potential matches to accelerate CSS, JS etc. This obviously gets very big, especially in projects with hilariously bad DoM optimization like discord. (They could really do with less nesting.)

#

We've got like 12 layers of nesting on chat messages, of which there are potentially thousands. That's not ideal.

tight nimbus
#

idk seems fine

#

cut to that clip of the crypto guy say +2TB/year isn't bad

tidal heron
pure cairn
#

โจ.headerText_c19a55โฉ instead of โจ[class^=headerText]โฉ etc

plain mango
#

i think some part of my frankensteined copy pasted css has decided to add a weird space between my name and the text i send when they used to be flush one on top of the other scratches skull ruh roh

#

ah nope nvm found th issue n fixed it

river pecan
#

i need help with fonts

tight nimbus
#

you're not importing the runescape font

tight nimbus
tight nimbus
#

I'm a bit snippy tonight โ€” you're all good

river pecan
#

okay! ๐Ÿ™

#

also just made sure and it's the only font that somehow doesn't load

#

i might need to replace the file

tight nimbus
#

I mean maybe try replacing the file in case it's corrupted?

#

I checked the http response and the mime type is correct

#

and the css syntax is correct as well

river pecan
#

it's funny how the font actually works in few other places but not here

#

lmao

tight nimbus
#

oh wait that's weird

river pecan
#

i'll update on situation soon

river pecan
tight nimbus
#

you're not importing it inside a selector right?

river pecan
#

i dont think so

tight nimbus
#

hmm

#

if it works elsewhere it shouldn't be a file issue

#

you don't have it downloaded locally do you?

river pecan
#

it's all here

tight nimbus
#

I'll take a look at it tomorrow (is there a reminder bot here?)

sturdy trenchBOT
#

No currently running reminders.

maiden sandalBOT
#

Ok, reminding in a day: check Teeenoob's code <@โ€‹1239734818489499670>

#

Ok, reminding in a day: <@โ€‹1239734818489499670> estrogen

tranquil whale
#

how do i set my name to be rainbow in messages like a custom role color applied by theme

#

do i use has selectors or what

pure cairn
#

Use the ThemeAttributes plugin and use [data-is-self="true"] or whatever it's called in the selector

echo frost
#

or you can use your id

tranquil whale
#

Like use has selectors?

echo frost
#

no

#

ig you could also use data-author-username

#

but id better

tranquil whale
#

Idk how xD

echo frost
#

attribute selector

#

โจ[data-author-id="683171006717755446"] .username_c19a55 {...}โฉ

#

that with my id

tranquil whale
#

The just set colour?

#

Using background or

echo frost
#

color

tranquil whale
#

Ill tinker

echo frost
tranquil whale
#

why aint this working

#

[data-author-id="1173155162093785099"] .contents_c19a55 .username_c19a55 {
color: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000);
background-size: 200% 100%;
animation: rainbow-slide 5s linear infinite;
}

@keyframes rainbow-slide {
from { background-position: 0 0; }
to { background-position: -200% 0; }
}

tranquil whale
#

@echo frost can you pls help me ๐Ÿ™

echo frost
#

i thought you did css
look in devtools and see what the problem is

tranquil whale
#

thats my one downside

echo frost
#

use it

tranquil whale
#

i remake existing snippets

tranquil whale
pure cairn
#

You should learn the basics first

tranquil whale
#

it works i had theme atributes off lol

#

test

tranquil whale
#

test

tranquil whale
#

went into the rabbit hole

tight nimbus
#

jesus

smoky belfry
frigid zinc
# tranquil whale works

Certainly! Here is a modified version of your CSS snippet, which fixes the gradient not showing up. I've also added helpful comments to each step of the process. Let me know what you think! ๐Ÿ˜Š

shell ginkgo
#

anyone know how i can make typing indicators look nice with softx ?

tight nimbus
#

what is happening with my channels lmao

tight nimbus
plush river
#

Not sure if this is the right place but I made some alternate colorway Vesktop icons (due to my fragile masculinity) in Icon Composer for macOS, figured I'd share them here in case anyone else would find them useful.

vestal field
#

pink is peak

pure cairn
#

because iirc it's one of the minor issues it causes

shell ginkgo
tight nimbus
late lichen
#

discord scroll panels...

pure cairn
#

yeah it happens whenever you change size to something in a scroller

tidal heron
#

am i tripping or did they randomly just make glowing names and the nitro nameplate animated?

odd badger
#

did u find a fix

maiden sandalBOT
#

@tight nimbus, reminder from <t:1770005147:R>: check Teeenoob's code <@โ€‹1239734818489499670>

#

@tight nimbus, reminder from <t:1770005246:R>: <@โ€‹1239734818489499670> estrogen

onyx mesa
tight nimbus
river pecan
tight nimbus
#

weird

onyx mesa
#

sometimes you just see the wildest stuff

pure cairn
#

Nah that's just the icon for the original iphone

hallow umbra
tight nimbus
winged arrow
#

hello! does anyone know what the tag for the edit message box is ? ive got 2 themes that when enabled move the box outside of the window