🎨-theme-development

[vast delta]

from what katlyn said, this would mean it looks from every element named .class up the tree until it finds #app-mount, if it doesnt it will look up until the end

do specificity using !important or just with the parent element

[lofty gull]

@vast delta

in this case I don't believe there is an issue.

[vast delta]

so in casual english it says "well its probably not gonna be lagging anyways so it doesnt matter much"?

[glad urchin]

@vast delta

.guilds__2b93a .scroller__3d071 {
  display: flex;
  flex-direction: column;
}
.guilds__2b93a .scroller__3d071 > div:nth-child(1) {
  order: -2;
}
.guilds__2b93a .scroller__3d071 > div:nth-child(3) {
  order: -1;
}```

[mortal mantle]

I have never used #app-mount in any of my css, except for those I have copied from someone else

[vast delta]

this should work

[glad urchin]

ocd is fixed

[vast delta]

nevermind you are using the wrong selector cutie

[glad urchin]

oh

[vestal field]

but using an id would be faster than using a class though right (with the space selector)

[lofty gull]

"in this case, it's not an issue" that's what I'm saying

[vast delta]

wait what

[autumn hull]

anyway to fix that with using #🎨-css-snippets message ??

[mortal mantle]

which means, it would just stop at wherever I set the outermost specificity

[vestal field]

it matters if your theme is big

[vast delta]

yes but if it looks up from .class its gonna check the first parent, the second, the third, the fourth and stuff, with the parent it will just have the check the first one

[mortal mantle]

I may have caused some performance issues placing the outermost selector further out than it is actually needed

[glad urchin]

you have to edit that yourself
both are not compatible with each other

[mortal mantle]

but such difference is probably minimal to recognize

[glad urchin]

or

i could make the old message bar on top of typing but it woud look short

one sec

[vestal field]

the other day i added a div[class^="class"]:has(div[class^="class"]) div[class^="class"]

absolutely destroyed performance

[lofty gull]

I'll take a look at rewritting it, but Discord will need to give me some stuff to work with, I don't believe writing a > b > c > d > e > f is an improvement.

[vast delta]

@glad urchin OH I SEE WHAT YOU ARE TALKING ABOUT HAHA

i thought you were trying to switch online and servers

[vast delta]

first of all use theming attributes, they can only make it better :P

[mortal mantle]

my take is:

• if I can make sure that the element I'm picking is one of a kind, and would not affect anything else, then I would simply use it
• if not, I would try to look for the closest parent to it and simply add a >
• if the parent still is not specific enough then I will have to keep repeating the above step, but this time with a space

[lofty gull]

well what's the performance loss if you had nested it, it has a lot of [class^="class"] something which can't be good either

[vast delta]

otherwise, you can use the search function in your devtools to see if specific selectors select more

[vast delta]

LMAO YEAH

[vestal field]

well the goal was to avoid another class rehash given we got 2 of them in 2 days

but some guy told me his cpu went to 80% everytime he opened discord or something

[vast delta]

xd

[lofty gull]

ok I'm not familiar with 'theming' attributes, what are they?

[vast delta]

i can imagine

[vast delta]

its a plugin in vencord

[mortal mantle]

I don't mind rehashes, using wildcard selectors is just too risky

[lofty gull]

eh so no support if not enabled

[vestal field]

i cant find a way to get rid of :has() but using actual classes made it so much faster

[vast delta]

yeah but there is literally no reason to not enable them, when sharing your snippet just say "activate the themingattributes plugin when using this"

[vast delta]

what exactly was the line of code you tried to use?

aka what did you wanna select?

[glad urchin]

@autumn hull

[class^=typing_] {
  width: fit-content;
  border-radius: 0 8px 8px 0 !important;
}
[class^=jumpToPresentBar_] {
  margin-left: 0;
  margin-right: auto;
  border-radius: 0 8px 8px 0 !important;
}```

[mortal mantle]

[lofty gull]

idk, I will not use it if it isn't a default feature of Vencord

[glad urchin]

oh

[mortal mantle]

I create a theme with the mindset that the average end user would have already turned most plugins on

[glad urchin]

is this the future noq

[mortal mantle]

So I don't need to remind them again

[glad urchin]

after that update

[vast delta]

its a plugin built into vencord you have to turn on manually, but there is a search box so turning it on is like 2 seconds

[vast delta]

well as long as discord doesnt change anything fundamentally then it should work forever

[vestal field]

ok im not on my pc right now but basically i was trying to set the width of the top right searchbar to fit within the member list panel

i wanted it to be small when the member list was closed, but then expand to fit the member list when opened

[vast delta]

thats a good snippet, mind sending me when you are back?

[vestal field]

yeah

[lofty gull]

yeah idk I rather not

[vestal field]

i used to use aria-labels but i got complaints about it not working in other languages

[quaint mason]

whats that theme

[vestal field]

https://github.com/refact0r/midnight-discord

[quaint mason]

thanks

[mortal mantle]

damn every good theme has the modular style

[glad urchin]

modular is the future

[mortal mantle]

I actually stole the idea from some of themes I saw

[vestal field]

hey i was one of the early ones alright

[mortal mantle]

not my modular style, but the modular style in general

it's been around since the LG G5

[vestal field]

i see

i sorta copied zelk in the beginning

[vast delta]

yeah aria labels you should only use on language that isnt displayed or that cant change between languages

[mortal mantle]

What does German devtools call aria label

[vestal field]

well i mean thats basically what i did minus the > selectors

[autumn hull]

i do like how its flush with the chat box but it making the other stuff act all funny with having jump/old messages hand on the right side i don't like so will just stick to this thanks for trying to fix it bud

[mortal mantle]

Arie-Etikett?

[vestal field]

ill switch to using them in that part for performance

[glad urchin]

np

[vast delta]

still aria label most likely, the value in them changes if discord is set to other languages

[vestal field]

yep

[vast delta]

for example aria-label="Click to React" changes to aria-label="Klicke hier zum reagieren"

[mortal mantle]

maybe just include all aria-label from all languages

I have seen a theme do that in the past

[vast delta]

ive seen some wild stuff as well

[vestal field]

that is way too much work

[autumn hull]

tho this was posted and is the one i am using

/* /////////////////////////////////////////////////////////////////// */
/* fancy typing indicator */
:is(main,section)[class^=chatContent] > form > *:last-child[class^=typing] {
top: -24px;
margin-right: auto;
width: fit-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: var(--background-secondary-alt);
border-radius: 8px;
-webkit-box-shadow: var(--elevation-stroke), var(--elevation-medium);
box-shadow: var(--elevation-stroke), var(--elevation-medium);
}``` 
there a way to make this code go flush with the chat cause this proly would stop that glitch from happening

[vast delta]

someone type

oo you moved it to the top

i got a surprise for you

rotate the entire chat box on its head, then rotate its child on their head again

then typing should be on top

someone type please, i wrote this from memory idk if that worked lol

[dull musk]

bump

[vast delta]

oh shi

wait i gotta find my old snippet lol

[mortal mantle]

Too low effort for #🎨-css-snippets , try against later.

[dull musk]

hm?

[mortal mantle]

Your snippet does not meet the requirements to be uploaded there

[glad urchin]

can i upload the alternative i sent here :3

[dull musk]

I wasn't aware there are requirements, where can I find them?

[glad urchin]

there isnt any requirements tho

it has to be........not low quality

[dull musk]

I see, well it's quite simple. I don't know what makes it considered low quality

[quaint mason]

this theme

[autumn hull]

my eyes jk that is bad

[vast delta]

why is it so white lol

[dull musk]

that is unfortunate, do you have a suggestion on how to make it not low effort?

[quaint mason]

guys do

body{ filter: brightness(20);}

[vast delta]

yes i noticed lol

[vast delta]

incredible

[glad urchin]

fun

is this how

[vast delta]

this is what i would do

rotating the chat box itself and its children stops all the weird things with manually moving the typing indicator

[vast delta]

you didnt remove the old snippet

[glad urchin]

ii did

[vast delta]

sure?

[glad urchin]

yes

[vestal field]

basically have more lines of code and do something more significant

[vast delta]

https://cdn.discordapp.com/emojis/1166126645585915955.gif?size=512&name=nod&quality=lossless

[glad urchin]

[mortal mantle]

https://cdn.discordapp.com/emojis/1166476504964808814.gif?size=48

[dull musk]

I think the change itself is quite significant, embeds look so much better I can't even go back to the old embeds

[glad urchin]

wait...

oh

@vast delta much better

[vast delta]

:3

[mortal mantle]

I am worried about this selector

[vast delta]

[vestal field]

maybe apply the border to other things idk

[mortal mantle]

saw it somewhere in BD

[vast delta]

probably devilbro

[glad urchin]

true

gonna post that here

fix counter and fav

/* move serv. counter below */
.guilds__2b93a .scroller__3d071 {
  display: flex;
  flex-direction: column;
}
.guilds__2b93a .scroller__3d071 > div:nth-child(1) {
  order: -2;
}
.guilds__2b93a .scroller__3d071 > div:nth-child(3) {
  order: -1;
}```

[dusky hare]

what does it look like when someone isn't typing

bleh why didn't it ping @glad urchin

[glad urchin]

like this

the only thing it changes is those 2 bars to be stacked on top

[dusky hare]

no i mean, what does it look like when you're viewing older messages and no one is typing

[glad urchin]

oh

[dusky hare]

alright

i can get that added to the snippet and credit you if you'd like

[glad urchin]

sure

[dusky hare]

or you can post it as an alternative in the thread or channel

[glad urchin]

ill do thread

[vast delta]

katlyn do you have more information on selectors?

[dusky hare]

wdym

[vast delta]

you sent the pinned message so id think you know more

[dusky hare]

well I know a bit about CSS selectors xP

but I'm not sure what part you'd want more info on

[vestal field]

does performance take a hit if i do .childWrapper__01b9c:has(> svg)::before

because technically it only needs to check one level down right

[mortal mantle]

does this look weird

[vestal field]

no

[glad urchin]

beautiful

[sacred ice]

can anyone help me fix to mvoe spotify above the vc tab? ive had it working before but after new update it got fucked a little.

[vestal field]

/* rearrange toolbar */
a[href="https://support.discord.com"] /* hide help */
{
    display: none;
}
.search__07df0 {
    order: 1;
    margin: 0 4px 0 12px;
}
.chat__52833:has(.searchResultsWrap__9f374) .searchBar_e0c60b {
    width: 394px !important;
    margin-left: calc(var(--spacing) + 8px);
}
.chat__52833:has(.profilePanel__12596) .searchBar_e0c60b {
    width: 316px !important;
    margin-left: calc(var(--spacing) + 8px);
}
.chat__52833:has(.membersWrap__90226) .searchBar_e0c60b {
    width: 216px !important;
    margin-left: calc(var(--spacing) + 8px);
}```

[vestal field]

.panels__58331 {
    display: flex;
    flex-direction: column;
}
#vc-spotify-player {
    order: -1;
}```

[sacred ice]

ill try that

[vast delta]

good!

[vestal field]

better performance?

a[href="https://support.discord.com"] /* hide help */
{
    display: none;
}
.search__07df0 {
    order: 1;
    margin: 0 4px 0 12px;
}
.chat__52833:has(> div > .searchResultsWrap__9f374) > section > div > div > div > div > .searchBar_e0c60b {
    width: 394px !important;
    margin-left: calc(var(--spacing) + 8px);
}
.chat__52833:has(> div > .profilePanel__12596) > section > div > div > div > div > .searchBar_e0c60b {
    width: 316px !important;
    margin-left: calc(var(--spacing) + 8px);
}
.chat__52833:has(> div > div > .membersWrap__90226) > section > div > div > div > div > .searchBar_e0c60b {
    width: 216px !important;
    margin-left: calc(var(--spacing) + 8px);
}```

looks kinda dumb though

[mortal mantle]

my eyes

save me

[vast delta]

you dont need that

[mortal mantle]

this is the worst practice you could have done with css

[vast delta]

this is hard to "reverse engineer" if you forget what it does

[vast delta]

there is only one search bar loaded at a time with this selector

one is the one in my quickcss and the others are in the codeblocks you sent

[sweet tundra]

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

where is the aoi > luna

[vestal field]

i thought using > was faster than just a space regardless

[sweet tundra]

why are some people using [^] and others not at all

[vast delta]

^= means beginning with, its used for example when having an element that has the classes .chatContentWrapper_kfjdwd .wrapper_944834

[sweet tundra]

https://cdn.discordapp.com/emojis/1167453727523868744.webp?size=48&name=KurisuThink&quality=lossless

I see

(I dont get it)

[vestal field]

to avoid when discord rehashes their classes (.class-123 becomes .class-234)
if you use [class^="class"] then it works for both

[sweet tundra]

ohhh

[vast delta]

i dont know exactly but when using the space selector, the browser goes to every element that fits the right of the spacebar, in your case .searchBar_e0c60b and then goes up the tree, check every parent one by one until it finds whats on the left, in your case .chat__52833:has(.searchResultsWrap__9f374)

[vestal field]

so using > would limit how many times it goes up normally
but in this case there's already a specified parent so it would just stop anyway

[mortal mantle]

i'm blushing.

[vast delta]

In this scenario, using the tree selector over the space selector (not real technical names) would not be of much use

root
  - a1
    - b
      -c
        -d
          -e
  - a2

/*Space selector*/
:root:has(a2) e
find "e"
check if parent of e is :root
check if parent of parent of e is :root
check if parent of parent of parent of e is :root
...
check if parent of a1 is ":root"
  - check if parent of a1 has "a2"


/*Tree selector*/
:root:has(a2)>a1>b>c>d>e
find "e"
check if parent of e is d
check if parent of d is c
...
check if parent of a1 is :root
  - check if parent of a1 is :has(a2)

I dont know if this is exactly what the computer does, but from the information i have, this is a way it could be

[vestal field]

ok yeah that makes sense

so > is only helpful when there's no limit on the number of parents it could check

[sweet tundra]

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

[sweet tundra]

css lessons with @vast delta

[vast delta]

But if you had something like this

root
  - a1
    - b1
      -c1
        -d1
          -e(1)
  - a2
    -b2
      -c2
        -d2
          -e(2)
the numbers in () are just for referring to them, in the code they do not exist

Space selector
a1 e
check if parent of e(1) is a1
check if parent of parent of e(1) is a1
---
check if parent of b1 is a1

check if parent of e(2) is a1
check if parent of parent of e(2) is a1
...
check if parent of b2 is a1
check if parent of a2 is a1
stops

 
Tree selector
a1>b1>c1>d1>e
check if parent of e(1) is d1
check if parent of d1 is c1
...
check if parent of b1 is a1

check if parent of e(2) is d1
stops

it might not exactly do "check if parent is" but i think its easier to demonstrate using that

and with discords complex tree this is amplified

[vestal field]

ok thanks for the explanation lol

so > should be used when the rightmost selector is very broad

but if there's only one then there's no benefit

[vast delta]

for example if "e" was [class^=wrapper] right now on this window it would be about 125 times checking, so if you make each check end immediately at the parent it will be better for performance

[vast delta]

if there is only one thing loaded that is affected by the rightmost selector then it comes down to actually how exactly the computer handles it, which i do not know

[vestal field]

the way you described it seems accurate

[vast delta]

again, i dont know if this is the exact procedure, but it works with what i know of how computers handle css, which means this, or something similar, is the way it is done

[vast delta]

the way i described it definitely should work, if it is the way it is implemented is another question

[vestal field]

they could have like lookup tables for classes or ids though

but with generic type selectors i think it would have to be like the way you described

[vast delta]

i wish this information was easily just on the chromium website or something

[vestal field]

yeah

[vast delta]

i bet you the creators of that code would love to share the exact workings

[vestal field]

all i can find are a bunch of stackoverflow posts that say it goes right to left

[vast delta]

which definitely makes sense from what katlyn said in the pinned message

[vestal field]

yeah it would be more efficient

[vast delta]

i think some of the other way better informed people in this server said that you would have to go read the source code of the css (parser? is that the word?) to find out exactly

[vestal field]

some stackoverflow response also pointed out that its good for when the browser is loading html
because if the css parser went left to right it would have to wait for the browser to load everything

and if you go right to left you can immediately start the moment the rightmost element is loaded

[vast delta]

but what is a fact is that using the space selector, especially on such a complex tree, can quickly cause immense issues

[vestal field]

time to review all my css!

[vast delta]

our overlord ven once said "worrying about css performance is a waste of time, only go through it when it starts being heavy on performance"
in which he is definitely right when making a theme, but i think snippets should always be at least close to best performing possible since they are fundamentally made to be patched into anything possible

[vestal field]

yep
:has() can get scary though

[vast delta]

good example is my onekocord that i just uploaded today, it can land in an almost unmodified discord like mine usually is or it can land in something like aois, who mostly uses heavy theming and changes basically the entire client

[vast delta]

no idea how the : selectors work, like literally none

[vestal field]

im pretty sure :has() works the same way as normal
it just picks the parent instead of the child to apply the style

[vast delta]

i mean, :is probably checks just the element its applied to, but :has, no idea if it is right to left or left to right

[vast delta]

could be

actually, probably yeah

i never thought about that

:has is just a space selector but applies the rule to the left element, not the right one

[vestal field]

maybe :has can actually limit the search to just the tree under the parent though

[vast delta]

and ive been using it everywhere :O

[vast delta]

TRUE

:has is definitely better since it cant go from the rightmost element up to the root

oh but has can definitely be worse

for example :root:has() and having a billion elements in root with elements in them

[vestal field]

not sure this is true though
since :has() has worse performance than a bad space selector it feels like

[vast delta]

the chat element is a great example, its one element with a child for every message currently loaded, which each has at least a child for the message, one for the avatar and one for the name and then more and more

[vast delta]

it actually could yeah

but has is SOOOO incredibly useful

[vestal field]

well actually my experience with :has being bad performance was on that chat element
so maybe it actually is the same

[vast delta]

i think there is actually no way to style a parent based on its children except for has

[vestal field]

i should try doing a .chat__52833 div and see what happens

[vast delta]

one single selector usually doesnt do much i think

you could try :root *

:P

[vestal field]

well i mean if :has can limit the tree search then
.chat__52833 div
should be slower than
.chat__52833:has(div)

[vast delta]

.chat div will check every single div up to the top until it finds .chat

.chat:has(div) will probably just check each div in .chat

i heard somewhere that :has() and stuff are calculated after other selectors

[vestal field]

it just depends if the :has() is scoped to the selector before it or not

it should though

[vast delta]

you have better words than i do

btw i tried :root * and it doesnt significantly impact performance, even though it should check thousands of elements, 5680 +/- 10 to be precise

actually +/- about 100 or 200 because of text nodes

[vestal field]

ohhhhh wait now i know why :has() got so bad when i used it earlier

[vast delta]

i think you had a bunch of things thrown together that were super laggy

[vestal field]

because i put :has([class^="class"])

so it basically would have to check every element AND do some string manipulation for each one

[vast delta]

holy shit this one is BAD

[vestal field]

yeah

[sweet tundra]

wha it do

[vast delta]

i tried the holding down a letter in chat test

[vestal field]

add it to your quickcss and enjoy the lag

actually this one is probably worse

:has([class~="w"]) {
  color: red;
}```

[vast delta]

and from not having that selector to putting it in it got like 5 times worse

[vast delta]

if you wanna make it worse use *=

~= checks from the end of the string

[vestal field]

oh true

[vast delta]

*= checks everywhere in it

i chose ^=w because of wrapper, a lot starts with wrapper

though c and m are also a lot probably

content and message

c is 477 currently

m is 317

w only 131 lol

WHAT

WHY DO 966 CLASSES START WITH b???

[vestal field]

how are you testing this

[vast delta]

ctrl f in your dev tools

you can put in any selector to test how many elements are selecting by it

it most definitely wont work

but it will count

as expected, it is a text node

or the text of an element, who cares lol

you gotta make sure to have the search bar for elements active, so just click any element and then do ctrl f

i think its a really handy tool when trying to figure out why things are heavy on your performance

[vestal field]

does it search everything even when they are collapsed

[vast delta]

yep

it will open the entire tree when you go to it

[vestal field]

ok good

[vast delta]

only thing it cant check is things like elements that you see in settings, since they only load when settings are open (thankfully)

knowing discord, they could have easily made settings just invisible when closed

which would be cool for theming purposes, like making a little hover space to open a tiny window to change your displayname for example

[vestal field]

might have some performance limitations though idk

keeping the setttings loaded all the time

[vast delta]

i know

which is why i said thankfully

[tender hedge]

i know this is probably not the right place to be asking this but, is there any way i can replace the windows titlebar of apps to mac os?

[vestal field]

you can't replace this titlebar

but you can replace this one

[tender hedge]

yeah i know that thats what i already have

[vestal field]

div[class^='typeWindows'] {
    height: 20px;
}
div[class^='winButton'] > svg {
    display: none;
}
div[class^='winButton'] {
    background: none !important;
    top: 0;
    width: 20px;
    height: 20px;
    margin: -2px 4px 0px 0px;
}
div[class^='winButton']::after {
    content: '';
    height: 12px;
    width: 12px;
    border-radius: 12px;
}
div[class^='winButton']:hover::after {
    filter: brightness(0.8);
}
div[class^='winButton']:active::after {
    transform: scale(0.9);
}
div[class^='winButtonClose']::after {
    background-color: hsl(350, 50%, 50%) !important;
}
div[class^='winButtonMinMax']:nth-child(3)::after {
    background-color: hsl(150, 50%, 50%) !important;
}
div[class^='winButtonMinMax']:nth-child(4)::after {
    background-color: hsl(50, 50%, 50%) !important;
}```

try this

[tender hedge]

i know u can somehow edit the normal windows one to look similar

i already have mac os

titlebar on discord

[vestal field]

wait so are you on mac

[tender hedge]

nuh uh

[vestal field]

what are you asking for exactly

[tender hedge]

mfw i already told this yesterday

i was asking if its possible

to even make the windows titlebar

the stock one

[vestal field]

like the white one?

[tender hedge]

yeah

[vestal field]

for discord?

[tender hedge]

no

other apps

[vestal field]

probably not

[tender hedge]

well it is but it doesnt look good

[vestal field]

at least on windows you can get the default windows titlebar with vesktop

[tender hedge]

ig

but because of this discord theme i now like mac os titlebar more

💀

[rugged echo]

what the fuck is that class

[vast delta]

a class that would never be in discord

i am the ultimate rehasher

[rugged echo]

it would be funny if it was on discord

[near pumice]

fix to #🎨-css-snippets message

/* makes profile panel thingy look very neat*/
:root .panels__58331 {
    background: transparent;
    border-radius: calc(15px - 5px);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(56, 31, 31, 0.11);
    overflow: hidden;

}
.container_ca50b9 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    height: 80px;
    padding: 0px;
    margin: 0px;
}
.container_ca50b9 button:hover {
    color: var(--interactive-hover);
    background-color: var(--background-modifier-selected) !important;
}

.container_ca50b9 .flex_f5fbb7 {
    grid-column: 1/-1;
}

.container_ca50b9 button {
    background: #3333;
    border-radius: var(--radius-secondary);
    width: 100%;
    height: 35px;
}

.container_ca50b9 .avatarWrapper_ba5175  {
    width: 220px;
    height: 38px;
    margin: 3px;
    padding-left: 4px;
    border-radius: 10px;
}

[vast delta]

do whatever you want with this <3

[tender hedge]

grammar error moment

select the an icon moment

[vast delta]

YES

im tried

[vestal field]

cool

unfortunately i need to see the number sometimes

[vast delta]

i could make it bigger the higher the number is maybe haha

[vestal field]

that's possible with css?

[vast delta]

idk

i could try

[vestal field]

definitely seems like js is needed

[rugged echo]

is it possible to get the current banner color? there is one theme that removes it on full profiles and I don't know how to revert it back unless I edit the source, I did that but I wanted to ask if I could just use some code at the bottom of the file

[vestal field]

which banner

oh profile

well it depends on how the theme removes it

[rugged echo]

its doing this lol

.profileBanner__8414b {
    background-color: initial !important;
}

[blissful plank]

as the discord update messed up things, is there any new snippet that can remove these 3 things (upload button/gif/sticker)? cant find any working code in #🎨-css-snippets , thank you in advance!

[vestal field]

do you want to collapse them or just straight up remove them

i remember aoi's theme had a collapsible thing there

[blissful plank]

yea iirc i saw that snippet, but i really prefer cleaner look so id wish they're hidden

[vestal field]

.buttons_ce5b56 {
display: none;
}

[blissful plank]

used, and the emoji icon's gone instead of the upload button

[vestal field]

my fault i have reading comprehension issues

.attachButton_b1db83,
.buttons_ce5b56 > * {
    display: none;
}
.buttons_ce5b56 > .expression-picker-chat-input-button:last-child {
    display: flex;
}```

[blissful plank]

yikes it worked! (im dum bout code this stuffs)
thank you so much for this!

[hazy frigate]

Vencord equivalent of BD's CollapsibleUI?

[rugged echo]

whar

I think there was something similar, probably outdated because of the new classes, but you also need to remove the minimun window size

[vast delta]

could do that in like 6 rules probably

put width to 0 for everything you want gone, add !important because specificity and then use a pseudoelement for hover

[simple kiln]

@import url("https://lazuee.github.io/css-snippets/discord/sidebar-dm/import.css");
@import url("https://lazuee.github.io/css-snippets/discord/channel-list/import.css");
@import url("https://lazuee.github.io/css-snippets/discord/member-list/import.css");

[granite crown]

moved the "jump to present" bar to the right but now it covers over the scroll bar is there a way i can make the scroll bar fit when jump to present is there

whatever i tried it makes the entire chat disappear cause im new to this

[glad urchin]

margin-right

[slim pond]

for those that were looking for fixes:

[mortal mantle]

noice

[granite crown]

anyone have a css snippet to get rid of these 2 shit buttons

[mortal mantle]

use inspect element and do it yourself

[granite crown]

cant do it on canary crashes, blank on opera,chrome already tried wouldnt ask otherwise

[solid ore]

[class^="channel_"] > div > [href="/shop"] /* Shop Button above DM List */
{
  display: none !important;
}```

[granite crown]

thank you so much

[solid ore]

i reccommend https://d3sox.me/complementary-discord-theme/hide-nitro-upselling.theme.css

[solid ore]

is it possible to make a shortcut within discord to open quickcss without having to go to the settings tab? like maybe via rclick settings menu?

[mortal mantle]

enable the vencord toolbox plugin

then you would be able to open quickcss from the top toolbar

[solid ore]

thank you!

[mortal mantle]

the only way to reliably open inspect element is via vesktop

the issue with opera (and probably brave as well) has been there for ages

[magic cove]

how do i install colorways?

[mortal mantle]

you will likely have to build vesktop yourself with that plugin enabled

[blissful plank]

tried but it seems it got messed up after the discord got updated 😦

[solid ore]

im p sure the css in the link has been updated

[blissful plank]

thank you!

[solid ore]

how can i make the hovered/lightened area take up the full width & height of the container?
i've changed ur last block of code a bit to get it more 'blocky'

{
    width: 220px;
    height: 38px;
    margin: 3px;
    padding-left: 10px;
    border-radius: var(--radius-secondary);
}```

[mortal mantle]

use my config for that:

[class^=nameTag_][class*=canCopy_] {
margin-left: 5px
}
.container_ca50b9 {
display: flex;
flex-direction: column;
height: fit-content;
gap: 0px;
padding: 0;
margin: 0;
background: transparent !important
}
.container_ca50b9>.avatarWrapper_ba5175 {
width: 100%;
height: 50px;
padding: 0 16px;
margin: 0;
box-sizing: border-box;
border-radius: unset
}
.panels__58331 .container_ca50b9 .flex_f5fbb7 {
width: 100%;
justify-content: center;
gap: 0px
}
.container_ca50b9 button {
background: transparent;
height: 40px;
width: 100%;
border-radius: unset;
box-sizing: border-box
}
[class^=actionButtons_] {
display: flexbox;
order: -1;
box-sizing: border-box;
gap: 0;
padding-top: 0
}
[class^=actionButtons_] [class^=button_][class*=buttonColor_] {
height: 40px;
background: transparent;
}
.panels__58331 {
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
margin: 4px;
border-radius: 8px;
position: relative;
}

you can change the border-radius to 0 if needed

[blissful plank]

is there an updated snipper where u can hide the server banners and the create invite links in channel/vc?
thanks in advance

[toxic yew]

[aria-label="Create Invite"],
[aria-label="Invite to Server"],
[class*=animatedContainer_]:has(>[class*=bannerImage_]),
[style="height: 84px;"]
{display:none}

[blissful plank]

thank you!
seems the code for the invite link's not working but the banner one's fine.

[solid ore]

thanks!

[toxic yew]

i assume you use english
if not then change it to your language

[blissful plank]

im using english as my system/discord's language tho

[slim patio]

anyone has a somthing to remove this?

[hazy frigate]

😮

[vast delta]

rehash

[vast delta]

scroll up for a nitro hiding theme

[mortal mantle]

it's good wdym

I still haven't finished converting wildcards to normal classes

[vast delta]

wilcards to bad selectors*

[grand surge]

posted this in support earlier then realised this existed lmao

dont know if this is a question i should ask here or not but i was wondering if there was CSS for the buttons on the settings menu like there is in ROUNDMOLED (i sent a picture) to other themes? I really like the idea but i prefer using AMOLED-CORD more and it doesnt have it, so i was wondering if its a specific import or code you had to use
Image

[vast delta]

you can look at the roundmoled code to see if the css for the buttons is just imported somewhere

ive seen someone else make those buttons

or you can send the link and i will look at it

[solid ore]

how would u improve to make it more resilient and still only use the necessary classes?

[vast delta]

also use the parent classes, so for example if you wanna use [class^=wrapper] you do [class^=a]>[class^=wrapper] so it doesnt select the wrapper inside other elements

[autumn hull]

is there an always animate css for av's/effect and such and that?

[vast delta]

if you wanted to select only the wrapper in listItemWrapper you would do [class^=listItemWrapper_]>[class^=wrapper_]

[grand surge]

ive looked at the roundmoled code

[vast delta]

?

[grand surge]

and its just like 4 lines of imports

idk how to open those

[vast delta]

:P

[grand surge]

2 years ago

😭

[vast delta]

"will add stuff tomorrow" - 2 years ago

[grand surge]

none of the optional stuff is enabled for me anyways

it could be in the main css

but its scary

[vast delta]

it wouldnt do anything anyways

it is in the main css*

[dark dragon]

Those settings icons are the devil bro ones I think, you'd be better off making your own with the Vencord ThemeAttributes plugin

[grand surge]

does devilbro do stuff for vencord

[vast delta]

and there it is
https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css

yep its devilbro

dont use this, it will probably immediately set your computer on fire

[grand surge]

o

[vast delta]

HOLY FUCK

THIS MAN

[grand surge]

LMAO

[vast delta]

I DONT GET HIM

he makes me wanna cry...

[autumn hull]

there is a plugin that says it does this but moving av's don't move unless mouse is over it same with other things

[grand surge]

he has a link for every icon

[flat shuttle]

https://github.com/MiniDiscordThemes/SettingsIcons but it's broken rn
@teal cave check prs 🙏

[vast delta]

yeah he should lol

[vast delta]

what is an av?

[autumn hull]

avatar/display picture bud

mine moves but when mouse is over

[vast delta]

say avatar

and you want it moving permanently?

[dark dragon]

The alternative to that would be inlining the svgs, the bad part of that snippet is all the stupid selectors that had to be used to work around not having proper tab selectors natively

[glad urchin]

devilbro jumpscare

[autumn hull]

homie im 35 so av is the same thing lol

[vast delta]

"that had to be used" is a lie.

[grand surge]

damn you a father yet?

(curious)

[autumn hull]

yes i am to a beautiful daughter

[grand surge]

oh no i see it

yeah

[vast delta]

yeah boy mention that love

[grand surge]

amazing

well done bor

[vast delta]

https://minidiscordthemes.github.io/SettingsIcons/main.min.css

still has old selectors

[grand surge]

wait

wait

cant i just enable both themes at once

yooooooooo

[flat shuttle]

yes i said it's broken, that's why i mentioned salt

[grand surge]

YOOOOOOOO

nice

[vast delta]

enjoy your performance

[grand surge]

intel i3-7100u

its dead anyways

pc's graphics card broke

ordered a new one a month ago...

yeah nah ive done it

i just used to same import roundmoled did

it works

thanks for the link guys https://cdn.discordapp.com/emojis/1155918238442606713.gif?size=48&name=hypershiggy&quality=lossless

[magic cove]

the one icon missing

[vast delta]

im gonna make settingsicons but without the sass stuff

[vast delta]

it wasnt updated for a month

[grand surge]

no

we dont talk about it

i didnt even see that

[magic cove]

there seems to be a bug

unless its not a bug?

when you click on a setting

[grand surge]

dont thinks its even there

[magic cove]

the icon changes

[grand surge]

what

no?

think its just happening to you

my icons dont change

[dark dragon]

aria-labels change based on language, and the order of the things in the settings menus isn't always the same. He wanted something that could support a wider range of people, and in this case that resulted in stupider selectors

[grand surge]

before and after

same

[magic cove]

before after

[vast delta]

cutie we are talking about devilbro

[magic cove]

before and after

[vast delta]

can someone send me the script to update classes?

[flat shuttle]

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

[vast delta]

ty

fixed

and now i will give it good selectors

[solid ore]

works fine for me

[magic cove]

okiii

[grand surge]

wtf is all this yap

is that ptb

[vast delta]

skill

[grand surge]

yeah no small 15 year old iq no worky

[vast delta]

some dev stuff

[grand surge]

hotspot?

you get free wifi?

[mortal mantle]

average devil bro

[magic cove]

is it fixed via https://github.com/MiniDiscordThemes/SettingsIcons ?

[vast delta]

nop

it uses old selectors

ill send you my link when i am done

[vast delta]

@magic cove https://raw.githubusercontent.com/vencordcss/settingsicons/main/settingsicons.css

wait i didnt upload it

lol

[magic cove]

lmfao

[hazy frigate]

yo i put thison, what does it do fr?

[vast delta]

the settingsicon variable was basically a turn off button, like WHY

just set one of the sizes to 0

i fucking know why

i know why this code was bullshit

HE

[vast delta]

link should work now (tm) @magic cove

[magic cove]

thank you

[vast delta]

tell me about any issues you find

[magic cove]

works perfectly fine now

theres a few things that are unthemed

but its okay

just these

[vast delta]

yeah those didnt exist in the code at all

i didnt remove a single one

[magic cove]

ah okay

its alright dw

[vast delta]

@magic cove might break now since ill rename the repository to lowercase

if it does, dont mind

just make it all lowercase

[simple kiln]

check sidebar-dm, channel-list, member-list repo

[magic cove]

okay

[upbeat axle]

[solid ore]

is this a theme or css?

[vast delta]

theme and css is the same

a theme is more to say "this is a full experience", snippets are more like little addons

[solid ore]

so itll work if i put it in quickcss the same as if i put it in a local theme?

[vast delta]

you will have to use @import url(); in quickccss

that tells the code to use it as a url

[solid ore]

yeah but if i j copypaste the code

[vast delta]

local themes is a file

[solid ore]

ik, im saying in quickcss if i copy paste the code at ur import link

[dull musk]

is it possible to detect if a user is offline/dnd/online/idle with just css?

[solid ore]

wat do u wanna do w it

[dull musk]

add a border around their pfp

[vast delta]

a border around their pfp?

[solid ore]

u mean like radial status?

[vast delta]

UNACCEPTABLE

impossible

https://github.com/coolesding/shiggycord/blob/v3/base/radialstatus.css

[dull musk]

I think this might be outdated

wait, is it

[solid ore]

it was updated 3 days ago?

[vast delta]

no

you used the wrong link

[dull musk]

i think so too

I am just trying to see how it looks but I can't

oh I got it to work

yea that was what I am trying to do. Thanks, I'll over and see how you did it

[dull musk]

It seems that if a user is on both a pc and phone at the same time it doesn't work, in case you did not know

[vast delta]

yeah i know about all that stuff, its annoying to deal with

[dull musk]

I bet

[sweet tundra]

@mortal mantle whoa thats me

https://cdn.discordapp.com/emojis/998717624001253396.webp?size=48&name=MenheraPlead&quality=lossless

[mortal mantle]

https://cdn.discordapp.com/emojis/1155918238442606713.gif?size=48

[sweet tundra]

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

[mortal mantle]

Cute

[south pewter]

any snippit to get rid of the scroll bar on the online friends tab on browser?

[slim pond]

what theme is that

[vast delta]

take whatever element is called scroller there and add :webkit-scroller-bar or something

[solid ore]

how can i edit the chat mention's border radius and opacity from the RoleColorEverywhere plugin?
I'd like it to match the username's e.g. picture, using:#🎨-theme-development message

[south pewter]

material design

its broken tho but i fixed it on my repo

(most of the theme not all of it)

https://github.com/Trolo-1200/Discord-Client-Mod-Trolo/blob/main/Vencord/MaterialDesignGreen.theme.css if you wanna use it

[eager heart]

just how you would do mentions usually

[sweet tundra]

I have to come up with a cool theme

[eager heart]

rolecoloreverywhere is just applying the color to the mentions

that's all

[solid ore]

ohh mb

ive been able to do it but not make the opacity any more than the default?

.mention
{
  border-radius: 5px;
  background-color: currentColor; 
  opacity: 1.4; 
}```
is the exact same as

.mention
{
border-radius: 5px;
background-color: currentColor;
opacity: 1;
}```

[mortal mantle]

Question is, do you want the element to transcend to the multiverse

[solid ore]

i mean the default opacity isnt 1, it's like 0.1 or smthng and just treating it as 1

if i put 0.4 i get this

at 1 it's still less than the username's background

[mortal mantle]

If you want even more color, either mix the background with white using color-mix, or add a saturation/brightness filter

[sweet tundra]

more aoi color

[mortal mantle]

more blue ?

or more lavender

[solid ore]

with hsl? doesnt work

[vestal field]

color mix is a thing now?

[autumn hull]

you want the color to pop more?

[autumn hull]

looks fine here tho i do have another css i think its @mortal mantle i am using so adds to it if i recall... change the opacity and should be able to get it

[solid ore]

with usernames its perfect, its mentions i wanna change

[slim patio]

any1 has a css snipit for removing these 2 icons?

[vast delta]

open devtools, click select element at the top left corner of it and click the icon, boom, you can copy the selector and add display:none to it

you see a weird empty space where it used to be? go up the tree until you find the element that contains the entire thing, which is placed next to the other icons, boom that one removes it like it never existed

[slim patio]

ty

[autumn hull]

im sure could use that code, would just need to grab the class info for the mention and should be able to change the opacity from it... im still new but will see what i can do.. if not im sure someone here with more experience will chime in

[upbeat axle]

/* always show member list */
[aria-label="Hide Member List"] {
  display: none;
}

change to Show Member List if you have the list hidden always, you can also have both to hide the button no matter what

[aria-label="Notification Settings"]
{ 
  display: none;
}

this should work for notif settings too

these should work even if discord changes the element typesl ike they do sometimes

[slim patio]

i got it working but ty anyways

[upbeat axle]

yeah sorry i read after lol i recently made stuff for those too tho

with the method they said too that can break easily on update or even the page changing bc it usually tranverses the entire DOM to get the single element you clicked

[slim patio]

so far its working well

but if anything happends ill use this code

[upbeat axle]

nah dw not saying it will break just be cautious with css selectors bc they can break easily and the simpler/shorter they are usually the longer theyll work, im glad its working tho so far :)

even if they do change stuff too you can just recheck the selector too lol

[slim patio]

ok ty for that info

[upbeat axle]

im trying to fix a plugin that turns the @ in mentions into the users pfp

but idk the html doesnt seem to contain the user id now

[solid ore]

how can i make an element use a user's highest role color? i can't find any variable

[mortal mantle]

you cant

[solid ore]

oh :/

well thanks anyway

[edgy sentinel]

you can with js

[solid ore]

how

[edgy sentinel]

sorry typo

i meant js

[solid ore]

no clue how that works

and i dont care enough abt wat i wanted to do to learn tbh

ty anyways tho

[fathom shadow]

anyone in here able to help me with removing the discord logo in the top left?

https://cdn.discordapp.com/attachments/1168687234829004870/1168687243800625182/image.png?ex=6552abd0&is=654036d0&hm=3adeaca9b13929c449a29150265529960f4a04ff0cd0eeed3b6e0aac864bb8e5&

i got the background changed but idk how to either remove or make the logo transparent

[clear siren]

.tutorialContainer__890ea svg {display: none;}

[vestal field]

wouldn't this remove the circle around it as well?

[fathom shadow]

yeah kinda

[clear siren]

uhh maybe, and it also will not show a thing if you have messages

[fathom shadow]

i cant even use the button now lol

[vestal field]

do .tutorialContainer__890ea .childWrapper__01b9c svg {display: none;}

wait i forgot nitro icons use images so you should also add .tutorialContainer__890ea .childWrapper__01b9c img {display: none;}

[vast delta]

[night drift]

.wrapper_d281dd is the element with the click event listener

you could do an attribute selector with the svg path 💀

[fathom shadow]

this worked, might not be the cleanest but it does the job lol

[vestal field]

its necessary because im pretty sure tutorialcontainer is the first unique element above the icon

[clear siren]

isn't there still the issue that you won't have a badge on the icon if you get a dm

[vast delta]

its not necessary at all

[vestal field]

if you use a lower element it will apply to all servers without an icon

[night drift]

[d="M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z"]{display:none}

tested it and it works

[fathom shadow]

what just drop that in the css file?

[night drift]

sure

[slim pond]

declutterbar be like (I forgor that position fixed existed)

[fathom shadow]

Ah.. didnt realise i could do that it it would've been wayy easier lmao

[slim patio]

how do i remove this

[night drift]

where is that

[night drift]

you want to hide the image?

i would have to get something like that to show for me

[vast delta]

[class^=panel_] {display:none}

[hasty seal]

is there anyway to get the pfps in the chat square again i have them square everywhere else but not the chat itself?

[vast delta]

will do every border radius (hopefully)

--rs-small-roundness: 50%;

[hasty seal]

it worked! thank you so much

[little agate]

/*nuke france*/

[vast delta]

.o

[tribal junco]

Hi unestrogenisedding, welcome to .fmbot.
To use this bot you first need to add your Last.fm account.

Please use the </login:928593006293037113> command. The bot will then send you a link so you can connect your Last.fm account.

[vast delta]

:O

[glad urchin]

:O

[slim pond]

what am I even making????

[grand surge]

anyone know the class of whats behind the textbox? i tried to inspect element but ive only been able to change the buttons for gif and all that and the placeholder text

[clear siren]

assuming you want to remove the background or what is it you want to do exactly

[grand surge]

yea, the background

like change the opacity

[clear siren]

.scrollableContainer__33e06 { background: whatever; }

[grand surge]

this makes the messagebox invisible though

[clear siren]

oh now I see what you mean

[grand surge]

srry im not good at explaining anything fr

[vast delta]

lol

[clear siren]

yeah not entirely sure what you want to do, you want the surrounding area to be black like above?

[grand surge]

no, i have a picture and thats why its black so im trying to make behind the textbox to be clear

[clear siren]

doesn't my code do exactly that?

[grand surge]

it made the textbox itself to be clear

like under it and behind it is what im trying to make clear

[clear siren]

ok so I assume the background is set on .messagesWrapper_ea2b0b

[fresh plank]

.form__13a2c{
background-color: transparent!important;
}
try this

[clear siren]

that element shouldn't have a background

[grand surge]

i dont think this changed anything

[clear siren]

but what I think is happening is the background is set on messageswrapper when it should maybe be set in .chatContent__5dca8

[grand surge]

background-color: transparent!important; did nothing so i tried opacity: 0.1 and it did this

changed the opacity of the whole thing

[clear siren]

your background image just doesn't extend far enough because you set it on .messagesWrapper_ea2b0b presumably, set the background you want in .chatContent__5dca8 instead

[grand surge]

ohhhh

thank so you much

i feel stupid now

for the past couple hours ive been looking for the wrong solution

thank you kot and nvhhr

[grand surge]

so will this have the picture behind it?

[clear siren]

no unless you change the selector

[grand surge]

one specific will do the background for the whole client?

like from left to right

[clear siren]

I set my background on body

then it will be on the bottom of the whole client

[grand surge]

then mine just doesnt set

[clear siren]

but you will need to clear some backgrounds that are overlaid on top

[grand surge]

ohhh

[clear siren]

:root { --background-primary: transparent !important; } for an example

there's also background-secondary and background-tertiary

[grand surge]

so basically u gotta be a css god to make themes?

[clear siren]

no but there's just a whole lot of elements laid on top of eachother with them all having backgrounds and stuff so it makes it sometimes trial and error

[grand surge]

ah gotcha

[clear siren]

with those css variables you can most easily change colors and such

you can see them all in the devtools and just set new values in :root

[grand surge]

i really thought it was gonna be as simple as dev tools and hovering over an element to get the name of it

[clear siren]

well that is part of it but usually the thing you hover over or click is the last descendant of a big tree and the thing you actually needed to modify was somewhere in the middle of that tree

don't be discouraged, just keep experimenting, I know it'll click at some point

[grand surge]

i guess ill keep trying for now

but im prolly too dumb for this

ty btw

[grand surge]

so i found that .content__23cab will let em change the background of behind chat and by the channels. I can set a background image to this just fine, but when i do a different image its just repeats so i use background-repeat: no-repeat; and background-size: cover; but then the full background is just black.

why does one image work fine for the background but the other repeats and when it has no repeat its just black

[upbeat axle]

woah

[grand surge]

i have no clue how i did this...

[dull musk]

the contrast of text to bg looks kinda bad but otherwise it looks pretty nice!

[grand surge]

i did it on accident but thx 🤣

[dull musk]

lmao

[grand surge]

im in photoshop fixing the text tho

curious as to what it looks like lol

[grand surge]

wait

u talkin bout the green text

or the big text?

[dull musk]

the green text in the text area. Blends in a little too well

[grand surge]

ah

yea your right

[grand surge]

this look any better?

[dull musk]

hmm, try making it very slightly thicker

[grand surge]

wait u being fr or no?

[dull musk]

talking about this

[hallow comet]

yo that looks dope sofar.

[grand surge]

thank you fr

[grand surge]

ohhhh

ill fix that rn

[clear siren]

gj @grand surge I knew you can do it

[grand surge]

this look better?

[grand surge]

appreciate it

🫡

[clear siren]

I still have a few things to improve on

[grand surge]

wtf

that looks so good

ur actually goated

any way i can level these?

[clear siren]

#🎨-css-snippets message

[grand surge]

oh ty

W

[grand surge]

which is better

[gilded cloak]

You should use Classic Client Theme to darken the rest of the colors to match your background

[clear siren]

high frequency noise looks better, the stretched just looks smudgy and pixelated imo

[gilded cloak]

#🎨-css-snippets message

[slim pond]

still trying to improve the declutterbar snippet, but discord just doesn't want to make it work

At least I made this look a bit more like spotify

[mortal mantle]

ayy you got the whitename plus

[mortal mantle]

I would like to steal that progress bar

[sweet tundra]

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

I'd like to steal your cute theme

[mortal mantle]

but it's public already ....

GPL v3 license

[sweet tundra]

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

css scary

[mortal mantle]

c++ more scary

[glad urchin]

TRUE

[slim pond]

it's on the spotify thingy snippet rn

[sweet tundra]

aoi least scary

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

[mortal mantle]

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

[vast delta]

what if

css snippet that makes the layout EXACLTY like spotify

we have the servers with its names already

spotify has four sections, just like discord

[sweet tundra]

what if aoicord

[glad urchin]

soon

[sweet tundra]

or unestrogeniseddingcord

[glad urchin]

soon

[mortal mantle]

wait 10 more years

[vast delta]

shiggycord real

[mortal mantle]

Modular is basically aoicord

[slim pond]

then, is cyan dablucord?

[mortal mantle]

yes

thats why i only maintain one theme

[sweet tundra]

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

[mortal mantle]

v2.0.2 should already bring performance improvements

[sweet tundra]

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

does that mean I can finally use it

[mortal mantle]

that idk

but I can already see typing lag be reduced marginally

[haughty totem]

:root:root
love it!!:D

[vast delta]

funny thing is, it should actually work

div:is(*)

[grand surge]

I'm new to css, I assume this goes here, but what's the best place to learn css for general knowledge?

[haughty totem]

well as a reference for looking up specific things, mdn is (usually) at the top of Google results for good reasons. Prefer over w3schools

as a course for starting from 0, i assume it’s also not bad, but idrk

[mortal mantle]

i have never touched w3schools

[clear siren]

yeah MDN is the best

most css tutorials/guides assume you're making the website so they are kinda not so good

[mortal mantle]

these are the pages i need for css

except the 5th one

[gilded cloak]

It needs higher specificity than discords base css

Or something

I remember adding it for a reason

[clear siren]

yeah that works

I just put !important in everything

[mortal mantle]

[clear siren]

even pseudoelements I create or properties that discord would never use.. !important always

[haughty totem]

[mortal mantle]

ven forked my github.io ????

[haughty totem]

yes

[mortal mantle]

changelog preview for v2.0.2

[haughty totem]

web.dev was recommended in both biggest programming discords and lgtm:
https://web.dev/learn/css/

pasting the rest from .gg/code :
http://howtocenterincss.com/
https://www.taniarascia.com/overview-of-css-concepts/
CSS Reference: https://cssreference.io/
CSS Selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

CSS Grid tutorial (watch till the end and you'll learn everything you'll ever need to know): https://scrimba.com/g/gR8PTE
Games to learn X interactively:
CSS Grid: http://cssgridgarden.com/
CSS Flex: https://flexboxfroggy.com/
CSS Selectors: https://flukeout.github.io/

[grand surge]

Thanks hun

[haughty totem]

mhm

[haughty totem]

i can’t find #4 Learn To Theme on that site – could you send the link?

https://salternator.tumblr.com/post/714617860145774592/ive-gone-and-made-another-retro-theme-for
@teal cave idk if this is more hilarious or impressive, but nice job!!

[teal cave]

Thanks :3

[teal cave]

MiniDiscordThemes is my site / github org btw, the page you're looking for is https://minidiscordthemes.github.io/learntotheme
I kinda stopped writing since the BetterDiscord theme docs are more useful for most people imo, so just take this as a sort of document of my personal setup.

you can see I did not spend more than 3 seconds thinking of a site description

[haughty totem]

what is this layout

nah it’s a good page, arguably better for power users as it can be quickly overviewed and gets to the point, i feel like. The bd guide is quite verbose, which should be great for complete newbies, but at a glance i found it kinda hard to find things quickly.

if you’d care to link the bd guide nearish the beginning of your page, i think your page would make a perfect linkable :^)

(possibly the middle of the bd guide is is also pretty linkable, as only there is where it starts to get practical: https://docs.betterdiscord.app/themes/basics/creating )

[solid ore]

is this already in declutterbar? if yes it's not working for me

[slim pond]

different snippet

@import url("https://dablulite.github.io/css-snippets/SpotifyActivityRedesign/import.css");

[slim pond]

funny thing, you need to use that for discord's variables

[mortal mantle]

I could just change them normally with just one root

[grand surge]

make it 3

[tall ether]

make a whole programming language that uses only :root

[sweet tundra]

I'm rooting for it

[slim pond]

why

[mortal mantle]

Spotify cord

[haughty totem]

the cord has been spotified

Modular for Vesktop
confusion, how would a theme be specific to vesktop? Except the title bar i suppose?

[sweet tundra]

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

[toxic yew]

color-mix() abuse

[haughty totem]

abuse ’xD

you don’t think it’s covered by fair use? :3

[sweet tundra]

https://cdn.discordapp.com/emojis/586694600991703161.webp?size=48&name=angry_gay_noises_FB&quality=lossless

dont talk bad about modular theme by aoi

grrrrr

[toxic yew]

i exaggerated

[haughty totem]

it uses color variables only defined by vesk?

[clear siren]

normal discord has old chromium that has no support for color-mix

[haughty totem]

oohhh

normal discord is the abusive one if you ax me!1

well i’m hella gay about it alr supporting :has() tho

[mortal mantle]

yes, abuse

it just works like a miracle

[haughty totem]

_consider them colors mixed!_🔥

[mortal mantle]

blue discord because aoi literally means blue

[sweet tundra]

blueberry.aoi

now I understand aoi.berry

https://cdn.discordapp.com/emojis/998717624001253396.webp?size=48&name=MenheraPlead&quality=lossless

[mortal mantle]

i dont like blueberries that much sorry

[sweet tundra]

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

I didnt say that

[mortal mantle]

no no i ... i ...

[haughty totem]

apology accepted

[glad urchin]

i accept you

[edgy sentinel]

we need to kill aoi

[mortal mantle]

i will kill myself instead to save you the work

[sweet tundra]

I will stop you

with headpats

[mortal mantle]

damn ..

[sweet tundra]

not enough?

hugs too then

[mortal mantle]

Fine.....

https://cdn.discordapp.com/emojis/1151016038390046820.webp?size=48

[vast delta]

how do I apply?

[sweet tundra]

https://cdn.discordapp.com/emojis/773886387720159252.webp?size=48&name=Akko_hug_FB&quality=lossless

[sweet tundra]

https://cdn.discordapp.com/emojis/1069219770651660419.webp?size=48&name=pat_FB&quality=lossless

[torn zinc]

can i apply ?

[vast delta]

no

you can apply for me to hp you

[sweet tundra]

[torn zinc]

w<

[rugged echo]

is this a good css? like I try to not use that kind of classes but using * sometimes fucks up other stuff

[clear siren]

it's css

can't say how good that is but it's valid and if it does what you want then it's good

[rugged echo]

yeah it works apparently, it could break but idk

[clear siren]

let's hope discord doesn't mangle all classes again too soon

but I made all my classes into attribute selectors so at least hash changes won't break mine

[haughty totem]

personally i would try to make the selector unambiguous via context (ancestors etc.) instead of hash; but experienced themers use the hashed classes ig: example from Gibbu: https://github.com/DiscordStyles/SoftX/blob/main/src/theme/chat/_call.scss

[lunar hamlet]

**_call.scss: **

#app-mount {
    .voiceCallWrapper_a36a80 {
        padding-bottom: 0;
    }
    .wrapper_bd2abe.minimum_ebf000 {
        height: 300px;
    }
}

[clear siren]

I wouldn't use gibbu as an example, no offense but their code is wack

hashed classes are easiest to use but can randomly change

with attribute selectors there is a chance you select more than what you wanted so you need ancestors sometimes

normal class selectors are also more performant but in the vast majority of cases it's negligible

[rugged echo]

idk what are ancestors, you mean the classes before I guess
and I forgot about the # thing but there is no much difference probably

[clear siren]

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

[haughty totem]

#example selects by ID, which is (well should be and usually is) unique among the whole DOM, so that’s for modding when you can find one in the vicinity

[haughty totem]

oh ok good to know^^

ima check Tropical then

ah Tropical & Gibbu are collaborators so then that’s maybe not the best independent sample

i’ll check DevilBro then ||||

[rugged echo]

even worse

[teal cave]

Devilbro's CSS is genuinely atrocious, to be fair though it's not his main thing

[rugged echo]

I saw something about id on devtools I think, like data-id

[rugged echo]

what about his plugins?

[teal cave]

No comment 🙊

[haughty totem]

unrelated

[rugged echo]

idk either but I don't remember anyone praising devilbro for that

[haughty totem]

(well except that both are html attributes)

<exampleelement id="example_id">

[haughty totem]

that man does not get much love for his code. Not much at all

[haughty totem]

got another recommendation?

[clear siren]

I don't

I wouldn't even use my code as an example lol

[brittle juniper]

body {
  cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAxMLEAAQCBAD8/vwAhIKEAPz+BACEggQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIiIAAAAAAAAAAAAAAAAAAmVSAAIiIgAAAAAAAAAAAiJVIiIiZlIAAAAAAAAAIiZiViZmZiIgAAAAAAAAImZmYlYmZmZmIAAAAAAAAmZmVVJWYiImZmIAAAAAACZlVVVWVWZmYmZmIAAAAAZlVVVVVlVVVWJmZiAAAAAGVVVVVVVmUzViZWZiAAAAZVViJlVVVlM1YlVWYgAAAGVWIAZVVVVTNSZSJmIAAABlYgAkZVNVM1JlZSZiAAAAZWIAIWVTMzVVVWUmYiIAAGViACBGVTM1VVJVJiJiAAAGViJERlVTNVUlVmYiYgAABlYgAAJlVTNVVWVmJmIAAABlYgACRlVTVVZVYmYgAAAAZWIAAgRlVVVVVmIiAAAAAAZWICREAmVVVVYgAAAAAAAGViAAAAJGVVVmIAAAAAAAAGUgAAACBGVVYgAAAAAAAABlIAAAJERlVmIAAAAAAAAGUgAAAAAAZVYgAAAAAAAAZSAAAAAAAGVWIAACIiAAAGIAAAAAAABlNiAAJmZiAAAAAAAAAAAAZTYgAmVVYgAAAAAAAAAAAGU1YiJlVWIAAAAAAAAAAAAGU1ZmUlVgAAAAAAAAAAAABlUzNVVWAAAAAAAAAAAAAABlVVVWYAAAAAAAAAAAAAAABmZmYAAAAAAAAAAAAAAAAAAAAAAAAAD/8P///+Dg//+AAP/8AAH/8AAB/+AAAP/AAAB/gAAAf4AAAD8AAAA/BgAAPwwAAD8MAAAPDQAAD4AAAA+HgAAPw4AAH8OgAD/hCAH/4fgB//H6A//x8AP/4/8H/8f/B4fP/wcD//8GA///AAP//4AH//+AD///wB///+B//////w=='), auto;
}

[mortal mantle]

Wharrr

[clear siren]

very cool cursor

[exotic nexus]

Love this cursor

[clear siren]

works on real browsers

[exotic nexus]

I just copied it from the css and it didn’t work lol

[vestal field]

try not to use attribute selectors without an element type before it, because it will check every single element

so div[class^="themed_"], section[class^="themed_"] is better

[clear siren]

does it really matter though

[vestal field]

not if its just one snippet

but you should care about performance because it definitely adds up

[clear siren]

unless your css is like 3000 lines of them the computation is like a millisecond on a good system

[vestal field]

good system... not everyone has a good system

[rugged echo]

I haven't seen anyone using div before, at least on themes, but I remember some people doing body or button, I guess thats what you mean, for now I don't have a lot of lines

[vast delta]

it'll first check the attribute selector and then the element, check pins

which means it is worse because it then has to check if it is div

[vestal field]

wait

oh im getting it mixed up

my bad

forget what i said

[vast delta]

and you have to remember that people will use parts of your code with other code, especially with snippets

so if you always use the best or pretty good performance when writing CSS, you or others can probably throw more stuff together without compromises

[vestal field]

i gave up on attribute selectors because half the classes are .container anyway

[vast delta]

lmao

container, wrapper or content

[vestal field]

fr

i just label every single class i put in so i know where it is

[dark dragon]

I think you're misreading that. Selectors are right to left, but it traverses the DOM normally. In the case of section[class^="themed_"] it checks each section element for the attribute, then goes back and confirms it's a section element again wrong

[rugged echo]

its everywhere, and then there are weird class names

[haughty totem]

those sub ms still not worth it if it decreases readability imho

hardly worth writing div when that is every second element

[haughty totem]

label? dym with a comment?

[haughty totem]

whar, it checks for <section> twice? That doesn’t seem reasonable, are you sure?

[mortal mantle]

me when I just use normal hashes to eliminate all the struggles

[haughty totem]

me when your struggles come when dc drops the rehash 😛

[mortal mantle]

one click with the hash replacement tool

[haughty totem]

truish (but)

[dark dragon]

Yepyep, Katlyn explains it in that image by saying it loops over the children of the outermost selector wrong

[clear siren]

smoke the hash and forget struggles

[mortal mantle]

Discord is already built on hashes, why does one have to go through the struggle of reinventing selectors

[haughty totem]

hash solution to hash problems

[mortal mantle]

hash brown very good

[haughty totem]

texture like sun?

[mortal mantle]

I don't usually comment on my css so it's all a mess now

[haughty totem]

nop, i think you’re misreading it. (i’m not sure tho.) Katlyn uses a descendant selector ( ) in her example

[dark dragon]

Oh, I was reading it in reverse. That makes more sense

[haughty totem]

I was reading it in reverse
like the css algo

[exotic nexus]

the best snippet of all time: eepy

/* eepy */
.vc-toolbox-btn svg {
  display: none;
}

.vc-toolbox-btn {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  animation: sleep 1s infinite;
  background-image: url("https://vencord.dev/assets/oneko.gif");
  /* background-size: 24px; */
  background-position: center;
  filter: brightness(75%);
}

@keyframes sleep {
  0%,
  50% {
    background-position:-64px 0
  }
  50.00001%,
  to {
    background-position:-64px -32px
  }
}

.vc-toolbox-btn:hover, .vc-toolbox-btn.selected_be2668 {
  animation:2.5s 1 forwards wakeup
}

@keyframes wakeup {
  0%,
  20% {
    background-position:-160px 0
  }
  20.00001%,
  40% {
    background-position:-192px 0
  }
  40.00001%,
  60% {
    background-position:-224px 0
  }
  60.00001%,
  80% {
    background-position:-96px -64px
  }
  80.00001%,
  to {
    background-position:-96px -96px
  }
}

[haughty totem]

hehe nice

[clear siren]

that is nice

[haughty totem]

you’re nice

[exotic nexus]

mind if i get snippet dev so i can post this in #🎨-css-snippets

[sweet tundra]

yours css is smelly

[mortal mantle]

[clear siren]

I took your code and made it my own

[exotic nexus]

what is that formatting

[clear siren]

I know I am a war criminal

[exotic nexus]

eep

[rugged echo]

who does that wtf

[clear siren]

I dunno it just makes it so much easier for me to read and I've been doing this kind of formatting for like 15 years

[hardy heart]

psycho

[clear siren]

this is why I rarely share css except oneliners

[hardy heart]

lol

[exotic nexus]

https://kinsta.com/blog/css-best-practices/

[clear siren]

no