🎨-theme-development

[rocky quarry]

yep that works ty

how does this work path[d*="M-1.4420000"]

[clear siren]

it finds the <path> element with the attribute d which includes the string M-1.4420000

the d contains the vector coordinates for the icon

(all svgs are just coordinate instructions on how to draw a shape)

[rocky quarry]

cool ty

[dark dragon]

You can just redefine --interactive-normal lower down in the DOM rather than setting the fill on that path specifically. On the panels class would probably work fine

[clear siren]

yeah that works too

[rocky quarry]

i have no idea what this means

im honestly just throwing css together from my very basic understanding of it

[dark dragon]

I just mean setting the value of the --interactive-normal on an element on an element lower down in the DOM than :root.

I'm not at my computer so I can't get you the actual classnames, but where before you were probably doing something like

:root {
    --interactive-normal: green;
}

You'd instead do

.panels {
    --interactive-normal: red
}

[pure cairn]

huh, did discord change class names again?

a few of my snippets broke

[digital smelt]

i believe it was just the classes for profile popouts

[pure cairn]

mhm yeah, makes sense

thanks

[digital smelt]

yep ofc

[tender hedge]

i found what makes the clickable server hitbox stretch

apparently i have to select 2 elements for it to be clickable

thanks discord

discord would be so much more optimized if the developers didnt add 10 layers of css that do basically nothing anyway

[oak plover]

discord when they contain a whole ass element in an svg so they can use a mask instead of border-radius

[bleak gust]

yes real

[teal cave]

absolute pain and agony

[vestal field]

top 10 discord design decisions

[echo frost]

is this new (the scrollar slightly overlapping with chat input

I don't think it has any use
It can be fixed with this

.form_d8a4a1:after {
  display: none;
}```

[teal cave]

for some reason mine has turned into the default scrollbar for no discernable reason

[echo frost]

I think that's unrelated
I'm talking about this

[teal cave]

ah

gotta say I don't like this

[dark dragon]

Are you using web? iirc chrome no longer supports the ::-webkit-scrollbar selectors, that might be the issue

[vestal field]

#🎨-css-snippets message

[teal cave]

Using vesktop, google's own docs don't reveal much https://developer.chrome.com/docs/css-ui/scrollbar-styling

Just checked on web, the chat scrollbar is fine but the thin scrollbars on channels and members list is fucked

Whar

[dark dragon]

Ah, it's not that they're no longer supported, but that if you use either of the standard properties on an element it completely overrides the webkit ones as far as I can tell

[teal cave]

Ah gotcha

Was hoping it'd be better on Firefox but nop

[dark dragon]

try safari

[echo frost]

💀

oh i was thinking that was internet explorer for a second

but

[teal cave]

I don't have mac device

[echo frost]

can you even use that on windows

[terse dew]

anything can be used on windows if you try hard enough.

[teal cave]

though I should get one, like absolute toaster 2nd hand laptop, for the sole purpose of testing stuff without going into nightmare territory of mac emulation

[dark dragon]

Probably wouldn't be too hard to find people just straight up giving away older iMacs

[terse dew]

Where do y'all live? because that isn't how it works here.

[dark dragon]

Australia the older ones don't really have any use to most people here. It's too much effort to update them for most people

[teal cave]

Thanks for the tip

ok maybe this is only worth £10

it can't run discord app lol

[dark dragon]

Yeah, they're essentially e-waste as soon as they stop receiving updates. You can probably find a more modern one for roughly the same price. I know here you can generally just find them in people's hard rubbish

[teal cave]

Unfortunate it's that way, I fixed and sold a similarly old Vaio all-in-one a couple years ago, thing was actually not bad with linux mint installed and could run 64 bit programs lol

[rocky quarry]

how do i do this

[teal cave]

Do what?

[rocky quarry]

use that scrollbar

or at least turn the rounded corners off on mine

[teal cave]

Wait for Discord to break their usual scrollbar styling

.auto__020ac {
  scrollbar-width: auto;
}

is what's been added

[rocky quarry]

doesnt do anything when i add it to my quickcss

[teal cave]

no idea what I meant by this

It's been sitting in my to do list for at least a year

[pure cairn]

You want to do what

[long sundial]

that looks horrible

[slim pond]

today I woke up and chose violence against discord's green

default:

my strangely desaturated version

[slim pond]

this hurts my eyes

this takes contrast to a disgustingly extreme level

[pure cairn]

[brisk iron]

vesktop is electron
electron is chromium

[slim pond]

Wasn't the whole scrollbar thing meant to be a bug?

[autumn bobcat]

Wth is poppins

[manic chasm]

yo

i wanta backgroudn for my discord

but

when i make one

and make duiscord transparent

it also makes important things transparent

like images

how do i make it not do this

{
    opacity: 0.85;
}

doesnt work

[frigid garnet]

too lazy to make the codeblock but

#app-mount {
opacity: 0.975;
}

[manic chasm]

what

no like

i want everything except images to be transparent

[frigid garnet]

this doesnt make images transparent

[manic chasm]

how

[manic chasm]

it does the opposite

i can see the background better in iamges

[frigid garnet]

idk same doesnt happen on me

[tender hedge]

still havent found out how i can make the server list look like arc browser tabs

found how to make the clickable range bigger

but to have it function correctly is hard

[real quarry]

how easily could someone make a css snippet to hide the ToS popup

it went something like "wE cHaNgEd ThEm lAsT MoNtH"

[exotic nexus]

Doesnt it just go away

[real quarry]

nah u gotta press agree or some normie BS

[exotic nexus]

Then press agree

Then it will go away forever

[real quarry]

fineeeee

[pure cairn]

Me when my account gets compromised and logged on from another location, without me knowing, because I had a snippet that hides pop ups
(I didn't want to press agree)

https://tenor.com/view/miserable-crying-sad-tears-black-guy-gif-12326280655494835815

Sorry, the intrusive thoughts won

[limber steppe]

how do i edit this part of discord?

everything is transparent but this side

[terse dew]

which theme are you using?

you probably have to do something like

.profilePanel_e2cafe {
background: var(--background-secondary); }

[terse dew]

@limber steppe

[limber steppe]

sorry just got home will try in a bit, thank you

[nimble spruce]

You know if Discord supports :nth-child(An+B [of S]?) I can't seem to get it to work

[clear siren]

it should work

but you can probably do some selector tricks to get the same effect

like .class ~ .class ~ .class selects the third sibling of that class in a tree

regardless of other elements

wait no

that will not work proper but you get the idea, depending on your use case you can do quite a lot of logic using combinators and :has() :not() etc

but that :nth-child(<nth> [of <complex-selector-list>]?) syntax is supported from chrome 111 upwards and discord stable should be on 120

[onyx mesa]

anyone know how i could add icons to the "Permissions" and "Server Info" options for the server settings tab?

[iron smelt]

a ‘lock’ for permission and a ‘book’ for server info

[limber steppe]

hello, this ended up working, thank you!

[terse dew]

np

[rocky quarry]

anyone know how to enable old style arrows on scrollbars

i have the selectors

[fading wigeon]

wdym

if you mean something like 9x style ones https://github.com/Cynosphere/w9x/blob/master/src/scrollbars.css

(do note this doesnt care if it should render the scrollbar or not)

[rocky quarry]

no that makes my scrollbars big and remove the actual scroller

this is how i have it rn

[fading wigeon]

if you copypasted it directly, it has variables referenced externally which is why it "removes" the scroller

[rocky quarry]

smth like this is what i want

[fading wigeon]

yes, i gave the pieces

[rocky quarry]

so how am i meant to use it

[fading wigeon]

its up to you to retrofit it to what you want

[rocky quarry]

can i just copy paste what i need into my quick css

and is there anything absolutely necessary from that

[fading wigeon]

css variables are the only things missing from that which you would need to change or be removed

you can remove the box-shadow from the thumb and buttons

[rocky quarry]

when i put it in my quickcss it starts saying this

[clear siren]

smth like this is what they should be by default now that discord updated electron and ::webkit-scrollbar pseudoelements are replaced by standard css scrollbar properties and discord hasn't fixed their css

do you have a theme applied

[rocky quarry]

fakenitro theme

and a lot of squaring stuff

[solid ore]

discord stable has the new electron now too?

[clear siren]

yeah discord stable should be on chromium 120

[solid ore]

;-;

[rocky quarry]

yeah ive no idea how to use that to add buttons

[clear siren]

I use this

/* make profile text scrollable */
[class*=lineClamp2Plus_]
 { overflow-y: auto !important; 
  scrollbar-color: oklch(1 0 0 /.3) transparent !important;
  scrollbar-width: thin !important; }

makes the scrollbar nicer

[solid ore]

important getting overridden??

[clear siren]

you have another rule with a more specific selector that is also !important

maybe?

I have no clue but go to the computed tab and filter for scroll

[fading wigeon]

longstanding bug, ignore it

the editor quickcss uses (monaco) hasnt been updated to support has or css nesting

and microsoft isnt updating it for whatever reason

[rocky quarry]

either way cant seem to enable arrows with that code

im not great at css

[solid ore]

i disabled all my qcss (except for that snippet) and themes, still doesnt work

😭

[clear siren]

huh

well I dunno then, I'm on vesktop and my regular discord I've kept stock for now

[solid ore]

lemme try on vesktop

[rocky quarry]

i tried this code css ::-webkit-scrollbar-button:single-button { background-color: #bbbbbb; display: block; border-style: solid; height: 13px; width: 16px; }

[bleak gust]

sounds like monaco editor outdated jank

[rocky quarry]

but it fucks the scrollbars badly

[clear siren]

hmm according to MDN chrome only started supporting the new properties on 121 and regular discord stable is 120 afaik so I dunno about anything anymore

[solid ore]

yeah it works on vesktop for me

[clear siren]

I thought stable also had messed up scrollbars but apparently not

but it will also have the new properties take effect soon I would believe

so we're kind of in this weird scrollbar limbo atm

[rocky quarry]

managed to get this which is extremely ugly

bits like this

ideally looking for smth like this

oops

this

[sullen lantern]

anyone know the line of code in quickcss for messages in channels

[vestal field]

wdym

[sullen lantern]

the message you send in a text channel

in quickcss

[vestal field]

wtf are you asking for

the class?

[sullen lantern]

nvm

[vestal field]

wtf this is a thing now?

no way they finally added a way to vertically center block elements

[radiant epoch]

am i retarded or shouldnt this work?

[clear siren]

is that at the top of your css

[radiant epoch]

no i figured it out

had one thing above

[echo frost]

Does anyone know what color the command thing used to be?
https://discord.com/channels/1015060230222131221/1230337739522703392

[teal cave]

Extremely pog if true (which browsers?)

[glossy aurora]

looks like everything except for opera, but firefox has it as a preview

[dark dragon]

I'm still just going to translate them bitches

[gloomy dirge]

My Big Ogs, I have an issue with messages I am mentioned, his ass is NOT supposed to look like that, when I hover over them its all good & love tho. I wanna help to overwrite that ugly ahh and make it look clean

[rocky quarry]

how do i use a font i have installed

ive been trying this

[frigid garnet]

WHAT

u cant use files with

@import url

its imports files from internet

omggg

[dark dragon]

Did you actually install the font, or did you just download it? If you installed it, you should just be able to use it normally, just ensure you're naming it correctly in the var though.grab the name directly from paint or word if you're unsure

[gloomy dirge]

I completly agree

[glossy aurora]

@font-face {
  font-family: "FONT NAME HERE";
  src: url(FILE PATH HERE) format(truetype/opentype/etc);
}

[dark dragon]

You shouldn't even need to do that. If it's installed, you can just use it directly

[glossy aurora]

yeah this is if you don't have it installed for whatver reason

[rocky quarry]

I do have it installed

[gloomy dirge]

Anyone know what css thing is responsible for mentioned message? Want to fix this

[clear siren]

elaborate what you actually mean

messages where you're pinged have a class .mentioned_*****

[gloomy dirge]

The theme I am currently using has that weird issue making mentioned messages have that color, which makes it so I can’t even read the text without hovering over it
I wanted help with what do ai put in quick css to overwrite that and fix it pretty please 🥺

[clear siren]

you could search for 'mentioned' in your theme (could be in the imports)

or try to override it with [class*=mentioned_] { background: black !important; }

[rocky quarry]

i cant find the font name in word

its installed here though

[clear siren]

you really want to use that particular font in discord lol?

I think it should work though, but note that the ' is actually a ´

so the font name in your css should probably be "Mom´sTypewriter Regular"

using an accent for apostrophe and missing a space lol

[rocky quarry]

tyy

its just for this bit

[edgy sentinel]

has anyone made a snippet to turn this into an icon grid?

i imagine a 2x2 grid of icons without the text

it seems really hard to do cause discord just uses the same component as for normal dms and they dont have a parent, so you can't use things like grid

[edgy sentinel]

hold on im a genius

[tender hedge]

how did you do this lol

would be very helpful with a theme im making

although i wouldnt be using it for the same buttons

[edgy sentinel]

idk how to make it look better

[class^=privateChannels_] [class^=content_] {
    display: grid;
    height: unset !important;
    grid-template-columns: 1fr 1fr;

    &> * {
        overflow: hidden;
        grid-column: 1 / 3;
    }
}

[class^=channel_]:has(
    [href="/channels/@me"],
    [href="/library"],
    [href="/shop"],
    [href="/store"],
    [href="/family-center"]
) {
    grid-column: auto;

    [class*="link_"] {
        justify-content: center;
        gap: 0;
    }

    [class*="avatar_"] {
        margin: 0;
        width: unset;
    }

    [class*="avatarWithText_"] {
        flex-grow: unset;
    }
    
    [class*="content_"] {
        display: none;
    }
}

[tender hedge]

oo cool

thanks btw

[exotic nexus]

def send in #🎨-css-snippets thats really cool

[exotic nexus]

wait how did you use css nesting

without the &

[edgy sentinel]

wdym?

it just works

how about this

[pure cairn]

what if

the button border becomes red when there's a notification

so no red dots or whatever

[edgy sentinel]

horror i dont think thats possible with css lmao

[edgy sentinel]

this is ```css
[class^=privateChannels_] [class^=content_] {
display: grid;
height: unset !important;
grid-template-columns: 1fr 1fr;

&> * {
    overflow: hidden;
    grid-column: 1 / 3;
}

}

[class^=channel_]:has(
[href="/channels/@me"],
[href="/library"],
[href="/shop"],
[href="/store"],
[href="/family-center"]
) {
grid-column: auto;

[class*="link_"] {
    gap: 0;
    justify-content: center;
    position: relative;

    &> :not([class*="avatarWithText_"]) {
        position: absolute;
        left: 5.5em;
    }
}

[class*="avatar_"] {
    margin: 0;
    width: unset;
}

[class*="avatarWithText_"] {
    flex-grow: unset;
}

[class*="content_"] {
    display: none;
}

}

i think i'll leave it at that

[exotic nexus]

i dont remember css working like that but cool ig

[teal cave]

This is supported in discord now, cool but useless

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rye&display=swap');
.messageContent_abea64::first-letter {
    initial-letter: 2;
    font-family: "Permanent Marker", cursive;
    color: invert;
}```

only looks good with long messages, which discord users including me tend to not type

[iron smelt]

https://tenor.com/view/cat-stare-catstare-cat-stare-sus-catglare-cat-glare-gif-14942558849944709546

[vestal field]

goofy ahhh font

[glossy aurora]

oh hell yeah

[fading wigeon]

& is only needed if you need to reference self

[exotic nexus]

how have i never known this

[fading wigeon]

maybe it was a sass-ism that it required & for everything long ago but even writing sass i dont have issues other than highlighting but thats an editor issue

[exotic nexus]

i've never used sass lmao

[gloomy dirge]

Sheeeeeeeeeeesh, it worked OG, ty so much, btw, you know whats the little devious class for this as well?

[clear siren]

let me teach you; press ctrl+shift+i, hit this button on the topleft corner and then the element you want to know about

you should see this

[gloomy dirge]

Mane you on some next level shit I appreciate that so much big bro

[clear siren]

on the right you see all styles applied to that element

and on the left is a treeview of all elements currently present

[gloomy dirge]

Das crazy

[gloomy dirge]

.replyBar_ed6afc {
this it?

[clear siren]

yep

[gloomy dirge]

.replyBar_ed6afc { background: rgba(201, 180, 110, 0.24) !important; }

like this big bro?

[clear siren]

should work

[gloomy dirge]

Oh hell nawww it did work wa da helll no wayayayyy

I am pro theme maker now thank you so much

[orchid hare]

Hey y'all. I have a general question about themes. Nothing is broken so I'm not trying to troubleshoot anything, just curious about one thing. If you have a theme active, is there something within the css you can edit so the background doesn't turn black when you hover over a message? (Side note, I'll be AFK so please forgive any delay in response)

[tender hedge]

[class*=messageListItem]:hover {
  background: none;
}```

[stone lintel]

can anyone help me with this css snippet. im trying to change the color for my message bubble specifically, but it wont work. its just the same color that i set for everyone elses messages.

:root {
    --message-bubble: #C7EDFC;
    --message-bubble-self: #E5F7FD;
}

.cozyMessage__9f4fd .contents_d3ae0d > .markup_a7e664:not(:empty) {
    background-color: var(--message-bubble);
    display: inline-block;
    max-width: 650px;
    margin: 0;
    padding: 5px 10px;
    border-radius: 0 10px 10px 10px;
    position: relative;
    overflow: visible;
}

.cozy_f5c119[data-is-author-self="true"] .contents_d3ae0d > .markup_a7e664:not(:empty) {
    background-color: var(--message-bubble-self);
    color: #000000;
    border-radius: 0 10px 10px 10px;
}```

^ code

[fast cipher]

the parameners are right at the top

just change the values

/*message buble*/
:root {
    --message-bubble: COLOR_CODE;
    --message-bubble-self: COLOR_CODE;
}

[...]

you can use a color picker if you hover over the values

[stone lintel]

doesnt work still

[outer charm]

whats an up to date way to change the way the inner loading screen looks?

this one

[solid ore]

replace .cozy_f5c119[data-is-author-self="true"] with .messageListItem__050f9[data-is-self="true"]

[orchid hare]

Thank you! Again I apologize for my delay. I greatly appreciate it

[tender hedge]

yeah np

[past bison]

😄

[clear siren]

yep

[tender hedge]

how do u get gpu usage of apps to show in task manager

[clear siren]

if you use windows 11 it should be there by default I think

if not you rightclick the header and select it

but only works on w11 afaik

[devout elm]

i forgot it was there but i see it on windows 10 too

if u scroll over

[clear siren]

oh yeah it was added at some point

[grand surge]

anyway to get rid of that annoying white space where badges are?

[grand surge]

pls ping on reply

[echo frost]

Where is this?
I don't see it when clicking on your profile. It might be bc of a css snippet you use?

[rocky quarry]

ive got this that blurs it, i assume you can add an image though

.container__827e6.fixClipping__84826{
  background: 0 0;
  backdrop-filter: blur(2px);
}```

[echo frost]

@grand surge I forgot to reply oops

[rocky quarry]

anyone got any idea how to fix it fading to white there for some reason

[frigid garnet]

i need that too

[echo frost]

Oh wait it's here

[echo frost]

This seems to work

.badgeList__6b2c7 {
    width: fit-content;
}```

Ok it fits to the length of your name and the dots

so maybe it would be best to put the icons in the center

Choose which one looks best to you by uncommenting it

.badgeList__6b2c7 {
  /* justify-content: center; */
  /* width: fit-content; */
}```

these are also kinda cool

[vestal field]

.theme-dark {
  --search-popout-option-fade: none;
  --search-popout-option-fade-hover: none;
}```

[rocky quarry]

thanks

[outer charm]

Thanks, it works

For anyone wanting to do this too here's the code I used:

.ready__61f2f {
    opacity: 0; /* Make original video invisible but still there */
}

.container__827e6.fixClipping__84826{
  background-repeat: no-repeat;
  background-image: url("https://i.gifer.com/XOsX.gif"); /* Transparent gif works best */
  /* Center it */
  background-position: center 45%;
  background-size: 10%;
}

[fast cipher]

replacing the video with a patch is funny, because discord waits for it to end

played big buck bunny in the loading screen

[pure cairn]

Can't wait for someone to make a plugin that forces you to clear a doom level before launching discord

[wooden stag]

div[data-list-item-id^="chat-messages___chat-messages-1026515880080842772-"]:has(div[class^="contents_"]):has(img[src="https://cdn.discordapp.com/avatars/1017176847865352332/c312b6b44179ae6817de7e4b09e9c6af.webp?size=96"])  {
    background-color: red;
}

guys I been trying for like an hour to find a way to check who send the message to hide @cloud jolt reminders or at least hide the deleted messages from venbot

[pure cairn]

[outer charm]

really LMFAO

[pure cairn]

Add venbot to messagelogger whitelist?

[wooden stag]

it has a whitelist?

[fast cipher]

lmao

[wooden stag]

I am gonna ignore the deleted messages from #🏥-vencord-support-🏥 instead

[pure cairn]

yeah?

[wooden stag]

dam, I should looked closer

[fast cipher]

yes, the patch was either from #1032200195582197831 or an PR

lemme find it real quick....

[pure cairn]

also

but this ignores all bots

[pure cairn]

just get venbot ID and put it into the 1st field here

[wooden stag]

yeah, I got it

[fast cipher]

can't find it ☹️

[halcyon swallow]

any way to remove the application tab above? my bad if my wording is wrong

[fast cipher]

is this happening when you have 2 RPC things at once?

[worldly moss]

Like hide the whole activity?

You can disable that in the settings I guess, unsure if this breaks spotify though

If you want css to hide it just

.activityPanel_b73e7a {
    display: none;
}

[pure cairn]

I have a theme that hides the panel and moves the screenshare button below, next to the mute/deafen ones

.panels__58331 .activityPanel_b73e7a {
  position: absolute;
  bottom: 10px;
  left: 104px;
  padding: 0;
  border-bottom: none;
}
.panels__58331 .activityPanel_b73e7a .gameWrapper_da7443 {
  display: none;
}
.panels__58331 .activityPanel_b73e7a .actions_d57dc4 {
  margin: 0;
}```

but this gets pretty cramped up, since it's 4 buttons (5 if you have the toggle activity one as well) in a single row

so you might be interested in this as well, made by Madeline and h

/* Icons on Hover */
[class^="flex_"]:has([role="switch"]) {
    opacity: 0%;
    transition: 0.2s ease-in-out;
}
[class^="flex_"]:has([role="switch"]):hover {
    opacity: 100%;
}
[aria-label="User area"] .panel_bd8c76.activityPanel_b73e7a:has([aria-label^="Stream"]) {
    z-index: 1;
}
.panels__58331 button[aria-label^="Stream"] {
    opacity: 0;
    transition: 0.3s ease;
}
.panels__58331:hover button[aria-label^="Stream"] {
    opacity: 1 !important;
}```

[jovial zinc]

div[class^=userInfo]>div>div[class^=badgeList]{
    width: fit-content;
}

this should be more future-proof

[rocky quarry]

can this not work?

[bleak gust]

you have a space there

are you sure you want that

wait

no

[rocky quarry]

idk if im going about this the right way

[bleak gust]

you probably want .chat_52833 > :not(:first-child) and .chat_52833 > :first-child

[rocky quarry]

im trying to add a transparent border between the chat and the chatbar

like all the borders here

[bleak gust]

that selector you have got is entirely useless here

[rocky quarry]

the problem is the background of the chat extends underneath the chatbar

so im really confused as to what to do

[bleak gust]

you probably want to be doing something with .chatContent_f087cb and its child .form_d8a4a1

oh

i see

you probably need to set the background to transparent on .chat__52833, .chatContent_f087cb and manually reintroduce it on .messagesWrapper_add28b, form_d8a4a1

[rocky quarry]

tysm thats it working

how do you find the correct classes so easily

[bleak gust]

look at the DOM structure?

then look at the styles applied in the sidebar

[rocky quarry]

ok ty

[clear siren]

when you use devtools (assuming you do?) you usually want to walk up the tree til you find the main element containing the part you want to modify if that makes sense

[rocky quarry]

I can find it difficult when an element has multiple classes to find which is the one I'm looking for

[clear siren]

true, but often the class that sounds most specific to the element you're targeting is the one you want to use

[vestal field]

just pick the least generic sounding one

[clear siren]

yeah

or use a parent in your selector

[clear siren]

⚠️holy shit⚠️
theme release?? wtf
https://github.com/nvhhr/discordcss

still wip tho but yeah

[echo frost]

Is there a way to show the ping badge on hover?
I'm not sure how it's disappearing, so i'm not sure how to undo it

i'm already hiding the invite button with

.iconItem__56989[aria-label="Create Invite"] {
  display: none !important;
}```

[clear siren]

[aria-label="Create Invite"]:not(:hover) {display:none}

or use or your original and copypaste it, add :hover {display:block!important}

[echo frost]

?

That doesn't seem to do anything
and that's to hide the create invite?

[clear siren]

it hides it when not hovered although I just realize that is the way it is by default

so not sure what you were after

[echo frost]

I want the invite button hidden always and the ping badge to show always

[echo frost]

And I already have the invite button hidden

[clear siren]

ping me

[echo frost]

@clear siren

[clear siren]

hmm your css shouldn't remove the ping badge

[echo frost]

It's hidden by default

bc by default the invite button appears and ping badge goes away

[clear siren]

oh you're right hold on

[pure cairn]

are you sure your ping badge has a weird z-index?

I have a snippet that hides invite and settings icons, but I still see pings

[echo frost]

I just can't see them when hovering

make sure to full screen the video

[clear siren]

discord has this css

@media (hover: hover)
.iconVisibility__2ecfa:hover .channelInfo_b0882c {
    display: none;
}

that makes it disappear on hover

so just make the channelinfo display block important

[pure cairn]

huh

can you try pinging me for a sec?

[echo frost]

that didn't work

@pure cairn

[clear siren]

@pure cairn

[echo frost]

it does have an error

[pure cairn]

lol I never noticed that

[echo frost]

well normally there's an invite button on hover which makes hiding it make sense

[pure cairn]

/* invite & settings button on channels */
[class^="iconItem__"]:not([aria-label="Open Chat"]) { 
  display: none !important;
}```

I have this snippet, but it still hides the ping on hover

maybe try with this

@media (hover: hover)
.iconVisibility__2ecfa:hover .channelInfo_b0882c {
    display: initial;
}```

try pinging me

[echo frost]

what's this error

@pure cairn

[pure cairn]

nope, not working

[clear siren]

add !important

because your other css has it

[pure cairn]

ping me again

[clear siren]

@pure cairn

[pure cairn]

still not working

[clear siren]

hm

[pure cairn]

[echo frost]

What's the error though

[pure cairn]

probably css editor not supporting newer syntax or something

[echo frost]

and important doesnt work either

[clear siren]

I dunno I ignore errors by quickcss because the monaco editor in it is way out of date

[pure cairn]

will it ever be updated?

[clear siren]

dunno https://github.com/microsoft/monaco-editor/issues/4071#issuecomment-1937379159

[pure cairn]

gosh

[rocky quarry]

timestamp before name is lowkey crazy

thats a sick theme though

[clear siren]

to me it just makes more sense to have it that way

[iron smelt]

[vestal field]

[rocky quarry]

my next goal with my theme is to have custom scrollbars

i finally got all the parts of discord floating the way i want today

gaps between basically everything now

as you can see the typing indicators a bit fucked still

idrk what to do with it though

i can move it up to match everything but then i have a weird gap to accommodate it

[vestal field]

that title bar font is a bit goofy

[rocky quarry]

too big of a gap to feel natural when theyre not there

[rocky quarry]

its a quote from an anime and the font is like the font used in the show

a very similar font anyways

[clear siren]

present day, present time

[rocky quarry]

🔥

[rocky quarry]

im thinking about disabling all scrollbars except the one in chat tbh

and just customising that one

goal is smth like this

[teal cave]

my whole body in fire

[rocky quarry]

anyone know how to prevent chat displaying under the white line

to prevent lines being cut by the window border like this

[echo frost]

it gets cut off normally too

msg
with
multiple
lines
to
send
example

and if i'm understanding correctly, you want this msg to not be display right now?

and then if you scroll down a bit more, it will display?

or you just want to move the chat cut off point
I think this is what you mean actually

[rocky quarry]

i need it for my x is typing code

[rocky quarry]

yeah

i just need to move the cut off point

[echo frost]

does it still look like this?
I find this a bit weird

[rocky quarry]

no

[echo frost]

oh ok

[rocky quarry]

moved it up inline with the window above and removed the background

[echo frost]

ah ok

yeah i get what you're wanting now

Idk how to do that though
i'm bad at css

[rocky quarry]

another thing is even just moving where chat begins down

this gap is way too big

i dont know how to do that either

[echo frost]

like the chat backgroudn you mean?

[glad urchin]

just apply margin-bottom on the container of the scrollerbase of chat_content / content / something

[pure cairn]

is there a way to separate the settings panel text from the button?
e.g. making "My Account" plus the icon) indipendent from the rest

[rocky quarry]

my problem is this also moves the bottom of the chat up

[echo frost]

try padding?

idrk what the difference is, but maybe it'll work

[echo frost]

wdym by this

the background?

[rocky quarry]

exaggerated

i want to move the chat down like this normally

[echo frost]

oh so you only want it to move up if someone is typing?

[rocky quarry]

and i want it to look like that when it scrolls too

no im not trying to move anything up

im trying to move this down

[echo frost]

so you dont want this anymore?

[rocky quarry]

no i do

[echo frost]

im confused

did you resolve that

[rocky quarry]

no this is all going to come together

[echo frost]

why are you now wanting the opposite of what you were asking

[rocky quarry]

the opposite?

[echo frost]

yeah before you wanted a gap

now you dont

[rocky quarry]

oh im not trying to move it down much

ok wait im having a hard time explaining

[echo frost]

Can you just send the css

[rocky quarry]

my current css?

[echo frost]

yes?

what other css is there

huh

[rocky quarry]

cause like theres a lot

[echo frost]

that's ok

[rocky quarry]

ok so basically the chat starts too far up

i want to move the start down a small bit

but then when i scroll

i dont want any text between where the chat initially started and the bottom of the window

its so hard to explain

[echo frost]

Oh i get it now

[rocky quarry]

i want it to look like this permanently

[echo frost]

Is this right?
my discord isnt red

[rocky quarry]

even when i scroll

youve a missing titlebar but looks mostly right

im gonna make the x is typing text a lot smaller and get rid of the icon too probably

[echo frost]

Ok well I'm not immediately sure how to fix it, but here's possibly a better explanation
when scrolled to the bottom, there's too much space between the msg and the bottom of the text window

and when scrolling higher, text gets cut off which they don't want

[rocky quarry]

yes the red box you drew in the first pic i want that to be permanently there

[echo frost]

but slightly smaller?

[rocky quarry]

like chat cant display in that box

yeah a bit smaller

id like to be able to change the size and stuff

oh heres an example

[echo frost]

?

[rocky quarry]

see how at the bottom it gets cut off above the window border

[echo frost]

oh yeah

try looking at the css there and copying it for the text place

[rocky quarry]

ok i might be able to do that

but i still need to figure out how to get rid of the gap rn so i can change it later

[rocky quarry]

i have "fixed" the gap

how do i prevent chat from showing beneath a certain y value now

[rocky quarry]

bc ive this issue now

[vestal field]

overflow hidden

[rocky quarry]

i cant scroll now

[vestal field]

on the container not the actual scroll element

[rocky quarry]

is there any way to move the cutoff point up

[clear siren]

play with margins/paddings

[frigid garnet]

reformatted, updated links and moved all roots to the top

also updated classes

[rocky quarry]

thank you

[frigid garnet]

npnp

[rocky quarry]

ive come up with thiscss .scroller_e412fe { bottom: -13px; margin-bottom: 23px; }

problem is only one works at a time cause they interfere with each other

[rocky quarry]

if i could just figure out whats causing the gap so i can remove it

[slim echo]

scrollerSpacer__6b1b6, height sets the gap

[rocky quarry]

holy shit thank you

[rocky quarry]

this messes with my sidebar actually

the member one

[glad urchin]

does anyone know of a working way to render boldened bitmap/pixel fonts smoother on browsers?
for example, with "ms sans serif" the fontweight "normal" renders fine
but when trying to render "bold", the browser creates its own version, which looks blurry.
how can i control this?

[fading wigeon]

if it has bitmaps embedded, convert to woff(2)

idk why it works it just does

example on my site https://toaster.sh/i/7o6bsiba.png

[glad urchin]

interesting
i guess? i have to rip the raw bitmap to convert to woff2 and see

[glad urchin]

just tried, it works normally on ff but no difference on chromium

would need to disable font-weight by default 🥺

[leaden axle]

could we have a css plugin to hide the discord update icon in the top right? (the down pointing green arrow with a line below it) this is mainly to keep people safe from updating discord when vencord hasn't update yet
(re-posted here as a contributer said to post it here - message #🧊-off-topic-iceman-only message )

[small pond]

regardless of whether you use the button Discord will try to automatically update itself when you launch it

[rocky quarry]

if you remind me in a few hours I can try it

[tawny dagger]

Recent update broke Mod View. It extends off screen. Would be nice if someone had a fix.

[bleak gust]

Just wrote something to fix it

Will post in #🎨-css-snippets

[tawny dagger]

thanks very nice

[echo frost]

oh

just wrote some

div:has(.sidebarContianer__623bd) {
  width: 100% !important;
}```

probably pretty bad

ok yeah

[tawny dagger]

is everything in #🎨-css-snippets supposed to work in the quickcss editor or are some of them made to be applied some other way

[echo frost]

anything can work in css snippets, or you can make a .css file and use them from the themes tab in settings

[echo frost]

just make sure any imports are at the top

Probably best to make files for big things

[tawny dagger]

ok cause the Better Connected Accounts by puhbu isn't working for me in the quick css file but I also didnt put the import at the top so maybe that was it

[echo frost]

yeah that would be it

[echo frost]

wait this isnt even working right lmao

[bleak gust]

love discord spelling their classes wrong

Contianer

[tawny dagger]

ah nvm having it at the bottom in quickcss works fine. I've just had the ShowConnections plugin on for so long I forgot that wasn't default discord

the css by puhbu only effects the main profile popup

and f53's edit actually works despite the 21 instances of at-rule or selector expectedcss(css-ruleorselectorexpected) lol

[echo frost]

lmao didnt even notice that

[tawny dagger]

while we're on the topic of discord breaking things, is this caused by some plugin I have or is it another discord fuckup?

[bleak gust]

Discord fuckup afaik

Don't worry I found this one too

[tawny dagger]

is there a snippet for it already?

[bleak gust]

probably not possible to fix with CSS

[tawny dagger]

ah I see

[echo frost]

what?

[tawny dagger]

"hrs this week" > "hours ago"

[bleak gust]

go open the members page in any server that has it

[echo frost]

I don't think i have that

do you need a community server

I don't have any servers that i made community servers

[bleak gust]

no, it is configurable for non-community servers and enabled for community servers

[echo frost]

Oh wait yeah just foudn it

[tawny dagger]

huh just found out if you hold ctrl+shift it shows the full date

[bleak gust]

interesting

i didnt know that

[echo frost]

oh wait is it the 22 hrs this week?

[bleak gust]

yop

supposed to be hours ago

[echo frost]

just don't have an active server :bigbrain:

it works fine when your last joined member was 1 month ago

omg im 18

just realized it's midnight

[tawny dagger]

it's only hours that's fucked

weird

[solid ore]

@clear siren i finally switched to vesktop for new scrollbars and other stuff, its so much faster holy

[clear siren]

yo check this out #🎨-css-snippets message

[glad urchin]

why do certain elements in discord have a different font scaling than others

for example,

* {
  font-size: 12px !important;
}```
will change everything to 12px
however, elements like bot tags and pings are unaffected

before

after

for some reason bot tags get bigger instead

[atomic torrent]

how can i add a gradient to this?

[clear siren]

[class^=newMessagesBar_] { background: linear-gradient(magenta, limegreen); }

[atomic torrent]

ty

[alpine current]

how to make the codeblock look like that

[clear siren]

shikicodeblocks plugin

[echo frost]

Is there a way to give this an animation and also make it not down on hover?

/* Longer about me (on hover) */
.markup_a7e664 > .defaultColor__30336.lineClamp2Plus_ccc883.text-sm-normal__95a78:hover {
    -webkit-line-clamp: 1000 !important;
}```

[native topaz]

what do you mean by not down? also, try css @keyframes

[echo frost]

not shift down*

the popout shifts down a bit

[native topaz]

i haven't seen this at all

no more nitro

/*no shops*/
a[href^="/shop"] {display: none;}
a[href^="/store"] {display: none;}
[aria-label="Send a gift"] {display: none;}

/*remove nitro tag*/
a[href^="https://discord.com/settings/premium"] {display: none;}
div[aria-label^="Customize your own profile theme, banner, animated avatar, and more with Nitro!"] {display: none;}
[class^="avatarDecoration"] img {display: none !important;}
img[class^="avatarDecoration"] {display: none !important;}

/*hide server boosts tab*/
.container_bc43c1.containerWithMargin__3a652 {
    display: none;
}

div[class^=profileEffects] {display: none;}```

[teal cave]

there are so many different no more nitro snippets and themes

yet none of them ever stay up to date

[native topaz]

yup, that's why i've tried to make this as low maintenance as possible

[solid ore]

my one is up to date :3
https://github.com/tom22k/css-snippets/blob/main/hide-nitro-upsell.css

[teal cave]

we'll see how long that remains the case in the long term

[solid ore]

i mean it uses attribute selectors, so should survive any rehash atleast

[teal cave]

heavy use of nth-child, selecting for exact image urls, using aria-labels at all, makes it more fragile than you think

consider using ThemeAttributes plugin instead of this btw

[pure cairn]

Oh god

What is that div staircase

[solid ore]

that part was made by d3s0x i think

[teal cave]

it's in your file so therefore your responsibility now

[solid ore]

its more for personal use, i j sent it bc it could be useful

[echo frost]

when it's lolwer, it's being hovered

lower*

[native topaz]

¯_(ツ)_/¯

[echo frost]

yay i love no avatars! (except for in replies)

[native topaz]

better?

[echo frost]

ig

I already hide most things though

How can I change the src of an image with css?
I'm trying to fix these black things in the corner
The best solution is replacing that image (https://discord.com/assets/352db5d6852138aabc88.png) with one without gaps in the corners (https://raw.githubusercontent.com/Obsidianninja11/DiscordThemes/main/assets/profile_effect_preview.png)

I tried using background image, but bc they're transparent, they combine and that doesnt work

Oh

I just put the background image on something else instead of the img

.previewContainer__73054 > img {
    opacity: 0;
}
.previewContainer__73054 {
    background-image: url('https://raw.githubusercontent.com/Obsidianninja11/DiscordThemes/main/assets/profile_effect_preview.png');
    background-size: cover;
}```

[teal cave]

yup pretty much that's the solution, src can't be changed by css

[devout elm]

cant u do content: url() on an img

[teal cave]

no

[echo frost]

Yeah. Just found something like this in another css snippet

[src="/assets/352db5d6852138aabc88.png"] {
    content: url('https://raw.githubusercontent.com/Obsidianninja11/DiscordThemes/main/assets/profile_effect_preview.png');
}```

[echo frost]

You can ^

[teal cave]

interesting, I tried this with content: ""; to remove image before which didn't work, I guess it has to be a url

[echo frost]

Oh i just realized why i never noticed this before
it's not very noticable at normal zoom
I had inspect element open though, and that made it way worse

How can I fix this little gap between the border and the bottom cover thing (that says The Immortal Clover\n[price stuff])?
It's the effect peeking through
doesn't really matter since it's not visible at normal zoom or even normal zoom with inspect element open

but it would be nice to fix

and it's even less noticeable if you don't have a css snippet on that changes that from this default blurry thing

I think it's from the border being slightly transparent?

bc of anti aliasing or whatever

[teal cave]

A bit of inset box-shadow covers the gap if really necessary

[echo frost]

how do I make it not come from the top left?

oh wait

it's inset 0px 0px 0px 1px

ok not perfect, but this is the best I could find

.cardText_a31179.cardTextBlur__118a2 {
    box-shadow: inset 0px 0px 0px 10px var(--background-tertiary);
}```

I'm not actually gonna use it though

It's so minor in a spot i rarely visit, and it needs to be zoomed in to notice

[gusty rose]

Remove centred content in settings

• Partly inspired by SmolAlli's formerly maintained bd minimal mode theme, which in turn was originally by bd,
• It has some quirks, and only works well for user settings only,

[class*="sidebarRegion"] {
  flex: none;
}

[class*="item"] {
  padding: unset;
}

[class*="contentColumn"] {
  max-width: none;
}

Prepares to be shot in public…

[echo frost]

It messes up My Account settings

[gusty rose]

That profile thing at the top of that page? yeah

"accountProfileCard" specifically

[gusty rose]

Here's a hack around that,

[class*="accountProfileCard"] {
  max-width: 660px;
}

[bleak gust]

i have tried to make it wider in the past

[gusty rose]

User settings? or that account profile card?

[bleak gust]

both

i just uh

put a border around the profile picture and removed the svg mask entirely lmao

[gusty rose]

👀 do you still have that somewhere on this server? I was hoping to not reinvent the wheel before I reluctantly posted my variant initially. I did try searching and browsing the first five pages of results from #🎨-css-snippets and found nothing, did browse through the search results for this channel for anything to do with "settings" and stopped reading after a few page full

[bleak gust]

it probably broke from too much hardcoding css class names

i have quickcss disabled entirely it is too broken to maintain 1000 line css rot

[gusty rose]

Ahh fair. Ideally I would prefer to have mine as js or even ts, but well css is simply too convenient.

Speaking of quickcss and 1000 line css rot, I use quickcss for the few tidbits that I want changed here and there. Have a dedicated theme file that is almost 1000 lines long that I wouldn't have it any other way. Come to think of it, if the entries in my quickcss does amount to something reasonably large, I would ultimately stash them as a theme file instead

[gilded cloak]

This is why I refuse to install snippets that use hardcoded classes

[echo frost]

I try to keep my quick css fairly empty, and put all my little css snippets into a 500 line "misc-improvements.css"

oh wow this conversation is kinda old

[worldly moss]

I mostly split up my css into snippets, upload them to github and import them instead

[echo frost]

I don't really like imports

[worldly moss]

poor imports

[vestal field]

lol i dont even use snippets at this point unless they're insanely useful

my quickcss is kind of just a working copy of my theme

[echo frost]

I like making snippets for little modifications of discord

I don't like huge themes

[dull haven]

Has anything been made to remove those the custom per person voice statuses yet? Really looking for something to make the gif ones not animated (static instead), as the constant movement is really distracting to me.

[rocky quarry]

can i remove the outline and darkening when hovering over a message

[echo frost]

I think the outline might be from your theme

[rocky quarry]

nope this is an ss from the browser

oh wait the outline

maybe

once i figure out how to get rid of the darkening i can fix the outline

[echo frost]

I think easiest way is just to redefine the --background-message-hover variable

.theme-dark {
    --background-message-hover: transparent;
}```

that makes it like this for me

Also to find this, just open inspect element (ctrl+shift+i)

[rocky quarry]

oh dear

doesnt work for me

have a feeling it might be due to this that i have

.chat__52833, .chatContent_f087cb {
  background: none;
}
.messagesWrapper_add28b, form_d8a4a1 {
  background: var(--bg-overlay-3,var(--background-secondary));
}```

wait nope commenting that doesnt fix it

[echo frost]

just this works for me

.theme-dark {
    --background-message-hover: transparent;
}
.chat__52833, .chatContent_f087cb {
  background: none;
}
.messagesWrapper_add28b, form_d8a4a1 {
  background: var(--bg-overlay-3,var(--background-secondary));
}```

[rocky quarry]

hmm

[echo frost]

This is how the hover background is defined

.theme-dark .message_ccca67.selected_e3bc5d, .theme-dark.mouse-mode.full-motion .message_ccca67:hover {
    background: var(--bg-overlay-1,var(--background-message-hover));
}```

Maybe you modify that in your theme

[rocky quarry]

actually even if i make my quickcss just this it doesnt work

[echo frost]

so with no theme?

It works for me

but you could try adding a !important

[rocky quarry]

ill try without but im just using a default theme

[echo frost]

Oh a discord nitro theme?

[rocky quarry]

yeah with fakenitro

[echo frost]

Ok yeah it doesn't work when I use a nitro theme

[rocky quarry]

weird

[echo frost]

This is why my theme didn't look the same as yours when I tried it a couple weeks ago

[rocky quarry]

yeah i forgot to say that

[echo frost]

.theme-dark .message_ccca67.selected_e3bc5d, .theme-dark.mouse-mode.full-motion .message_ccca67:hover {
    background: transparent;
}```

[rocky quarry]

yep that works ty

also gets rid of the outline

[echo frost]

That won't work if you use light theme

[rocky quarry]

dont plan to and i doubt ill be publishing my theme

its a bit of a mess 😭

[dull haven]

Alright I got rid of all of them, I want to be clear I'm not a css guy so I'm not sure if this is a good solution (or even one that will keep working).

/* remove all custom emoji statuses in VCs */
.hangStatusIcon__367ef{
    display: none;
}

[echo frost]

Do you know how to find things in inspect element? @rocky quarry

[rocky quarry]

yeah but im not very good at doing what i want with css

[echo frost]

Yeah that'll work

Sometimes the class names (.hangStatusIcon__367ef) change with discord updates, but in my experience, it's not very often

[dull haven]

should be pretty easy to fix on my end if so. Is there a good/easy way to just change all the .gif files to .webp lol? I doubt it but I thought I'd ask anyways.

[echo frost]

I don't think you can make gifs not animate with just css?
but i'm not positive

[dull haven]

yeah I'd suspected that, maybe someone much smarter than me will come along and make a plugin or stick it in a plugin that already exists, but I don't think that's gonna be me .

[echo frost]

Also use this @dull haven
It fixes the extra gap from the status that yours didnt remove

/* remove all custom emoji statuses in VCs */
.iconGroup_e117d2:has(.hangStatusIcon__367ef) {
    display: none;
}```

[dull haven]

thank you, genuinely that's super appreciated!!!

[bleak gust]

isnt this just an experiment for now?

but they started to roll it out further?

[dull haven]

it's in 2/3 servers I frequent right now so they are def starting to roll it out a lot more.

Its only popped up in in the last 1-2 weeks so yeah

[fading wigeon]

only community servers i think

[dull haven]

quite possibly yeah. And I've realized it's actually 3/4 servers I frequent that use VCs so yeah.

[echo frost]

You can disable it like this

[dull haven]

ooooo how does that work (also will that go away soon as it gets fully rolled out?).

[echo frost]

That will also disable it showing in people's activity

[rocky quarry]

why do these two behave differently?

.scrollbarGhostHairline__00100,.scrollbar_b61b2b,.hljs {
  border-radius: 0px;
  /* background: var(--bg-overlay-1,var(--background-secondary)); */
  background: white;
}

.scrollbarGhostHairline__00100.scrollbar_b61b2b.hljs {
  border-radius: 0px;
  /* background: var(--bg-overlay-1,var(--background-secondary)); */
  background: white;
}```

should the 2nd one not do the same thing?

[echo frost]

you forgot commas

[rocky quarry]

it doesnt work with commas

[rocky quarry]

yeah ik but im wondering why they behave differently? i understand that the first one should apply to any element with one of classes but the second one only applies to an element with all three

[echo frost]

, acts as OR so it'll match classes scrollbarGhostHairline__00100 OR scrollbar_b61b2b OR hljs
when there's no space, it's matching like AND so it'll match if the element is scrollbarGhostHairline__00100 AND scrollbar_b61b2b AND hljs
(I removed the periods because that's how the class looks in the html)

[rocky quarry]

yeah thats what i thought but would scrollbarGhostHairline__00100 AND scrollbar_b61b2b AND hljs not be a subset of scrollbarGhostHairline__00100 OR scrollbar_b61b2b OR hljs

[echo frost]

um

if the element has the classes: scrollbarGhostHairline__00100 scrollbar_b61b2b hljs it should still be selected in the or one

[rocky quarry]

yeah thats what i thought would happen im just confused why its different here

[toxic yew]

what is the transparent above of first image

[rocky quarry]

removes message hover thing

[echo frost]

I'm not quite sure exactly

I think some of those classes just aren't for a background color

[toxic yew]

ig you have some rule set it to transparent has 2 class, so it win over the 1 class rule but lose to the 3 class rule

[rocky quarry]

it was the last line in my quickcss so shouldnt it override everything?

[toxic yew]

no

example
.a.b white
.a black
it will white

[rocky quarry]

oh did not know that

[clear siren]

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

it's super convoluted but basically the more stuff in your selector, the more likely it is that it wins regardless of the order of your rulesets

[glad urchin]

#🎨-theme-development message anyone know a solution to this?

[echo frost]

Bot tags being bigger probably means that the default font size for bot tags is less than 12px?

[wicked sparrow]

hey guys how do i hide shop button from the home section

i could hide nitro because it had aria posinset

but shop button does not

[digital pier]

#🏥-vencord-support-🏥 message
This removes both

Might need more specific selectors if it removes other stuff idk

[solid ore]

i'm trying to change this to a different color and it doesnt work, i disabled all my other custom css and themes and it still doesnt work

[glad urchin]

the way how that sets is it sets every font to that size, regardless of different units
im not sure how discord circumvents this and scales it differently

checked all properties in layout, doesnt seem to be much

[dark dragon]

Are you asking why changing the font size from 10px to 12px made it bigger?

[echo frost]

works for me
this only works for normal discord dark theme

.theme-dark .message_ccca67.selected_e3bc5d, .theme-dark.mouse-mode.full-motion .message_ccca67:hover {
    background: red;
}```

[solid ore]

yah that worked for me too, but j changing the variable --background-message-hover didnt

[echo frost]

oh wait

i copied the wrong one

this works for me too though

[echo frost]

what theme are you using
pretty sure this'll only work for this theme

[solid ore]

yea i was using the dark theme

[echo frost]

are you using any custom vencord css?

maybe they're overriding it somehow?

[solid ore]

^

[worldly moss]

the CSS from them works just fine for me

[iron smelt]

?

[solid ore]

im showing how the snippet we were talking about doesnt work for me, and im not using any themes or other css

[worldly moss]

but

your video shows that its working

😭 ??

there is no highlight bg

[solid ore]

i'm trying to change this to a different color
#🎨-theme-development message

[worldly moss]

whats your current css

[solid ore]

dude

[worldly moss]

you mustve changed the transparent

to something else

right

[solid ore]

i j said multiple times i have nothing else, and i showed that in the video

[worldly moss]

I meant

[solid ore]

red

[worldly moss]

to change the highlight color

[solid ore]

.theme-dark {
    --background-message-hover: red;
}

[worldly moss]

http://nya.only-fans.club/zFMRFV.mp4

[solid ore]

i have no idea then

i tried disabling all my plugins too and still didnt work

[deep bane]

!important

[solid ore]

yeah i tried that

[warm bough]

hi does anyone know if it's possible to change the PC app icon image with just css, or would that need to be a plugin, or does that already exist (I'm not talking about the fake nitro plugin, I want to set a completely custom app icon, and not for the taskbar, I mean for the direct messages button)

[clear siren]

dm button is easily changed

https://github.com/nvhhr/discordcss/blob/main/snippets/swaphomeicon.theme.css

[warm bough]

nice thanks

can it load a local file?

actually I'll just try it

[clear siren]

not really

you can embed local file in a base64 data uri

but so much easier and cleaner to use online image

[warm bough]

hmm yeah I'll just do that

works like a charm, tysm

on a side note it's weird that this is the only app icon from mobile discord that's not in pc discord

[warm bough]

is there currently a single maintained remove nitro ads/annoyances theme? looking through #🎨-css-snippets seems to give tons of random CSS snippets dotted all over the place and I couldn't find one that is just an all in one solution for removing all nitro ads

[gusty rose]

Likely not as it is also a recurring theme outside of Vencord, maintainers comes and goes. I maintain my own variant of remove nitro ads/annoyance theme

[warm bough]

fair enough

[glass junco]

it should technically be possible to make an all-in-one applied through a git link that updates itself using the css updater, no?

then it can just be imported

it'd take a lot of work tho lol

[warm bough]

I was thinking about just making a single theme that collects the 8000 different nitro ads and then display: nones them out of existence

the quickcss would just be the import

[echo frost]

Is there a way to give this an animation?
I can't get it to work quite right with height

Bc percent doesn't work with the animating, and a set pixel amount isn't right either

[echo frost]

this sort of works, but not really

/* Longer about me (on hover) */
.markup_a7e664 > .defaultColor__30336.lineClamp2Plus_ccc883.text-sm-normal__95a78:hover {
    -webkit-line-clamp: unset !important;
    max-height: 1000px;
}
.markup_a7e664 > .defaultColor__30336.lineClamp2Plus_ccc883.text-sm-normal__95a78 {
    max-height: 110px;
    transition: max-height .5s ease-in
}```

it has an anim expanding, but it's a big of a buggy anim, and it doesnt have an anim going in

and i prefer no anim to that

[clear siren]

why not just make it scrollable

you're just asking for trouble extending the height tbh with some people having really long profile texts

[supple jacinth]

I think you might have some other css overriding that

[gusty rose]

TheSunCat's gist is pretty decent when it comes to hiding nitro ads/annoyances, https://gist.github.com/TheSunCat/58fedaa19d6154ef3e4b2b676c286906 though the most evident downside I could find is that the moment you don't use English (US) as your discord language, the hiding varies from most to pretty much none at all. My modifications includes fixes to that language limitation, and adds other nuisances that I want neutralised, e.g. super reactions' obnoxious button colour. Also, if anyone also uses OpenAsar, one of the two buttons under user settings may become hidden if they have not chosen English as the language for the interface. There's a commit within OpenAsar (https://github.com/GooseMod/OpenAsar/commit/0c497a61a0110f44d063fa98d742da5ee40b055a) that does that and reverting it would make it visible again, but under the previously defined location.

Asides from that, it might be better to have it as a discrete .theme.css file, like what I have done, as loading a large list of unwanted stuff inside QuickCSS might become unwiedly. Using .theme.css could just be following betterdiscord's theme header format, so that it would render as a proper theme file within Vencord.

Overall, it is a shame that there really isn't one theme that could cover everything. What has been found is that:

• discord likes to experiment geo-specific feaures, stuff like "snowsgiving" was region-specific and is of course now no longer accessible, as it was over Christmas time,
• inconsistencies with the style of CSS rules causes confusion if not irritation,
  • maintainers either using generic rule names, e.g. [class*="nitro"], fixed-names e.g. .nitro__9xF1C8, and/or even aria labels e.g. button[aria-label="Send a gift"] tends to stir opinions of sorts as to how best write those by others
  • lack of documentation within the theme, which may make it difficult for others to follow should the theme become unmaintained.

[warm bough]

what? that's a completely different icon

[warm bough]

I see what you mean, and I think one .theme.css file would help it

my personal one tries not to remove any functionality, like you can still buy profile effects if you want, it's just hidden away. this became an issue with nitro badges since now you can't see how long someone has been subscribed for

a theme with style docs would help to solve the other issues though

[echo frost]

a

(i needed easy access to my profile)

i'm trying to fix the activity overflowing and breaking the button

I was able to make the button like that instead of going off the page

But idk how to make the text respect the button's boundaries :(

Only way I can get the info to not push the button out is to hardcode a set px width

:(

[slim pond]

Color mix finally hit stable discord

[gusty rose]

It's somewhat cleaner in the sense that all your specific changes are to the filename you chose, or at least that's the intention. It also allows you to disable/enable themes which you don't get with QuickCSS. Finally, and this is more of a personal preference, but I could use my favourite text editor with the .theme.css, make changes as needed to buffer, once I am done I could save it and Vencord will automatically apply changes. QuickCSS also applies changes immediately, but these can be a bit annoying if you're removing elements by hiding them.

Yeah that's a personal preference thing. Something that I failed to cover in my previous message. I am more of keeping discord as much as possible looking like the interface was around 2018, along with few other changes that I do not like being made invisible/reverted in a way.

What I was meant to say there were the lack of documentation in comments for the theme, i.e. /* this is a comment */ so that it could be more easily referenced by anyone in the future, rather than needing to manually figure out what does what down the track.

[warm bough]

oh yeah idk why people don't comment their stuff

https://cdn.discordapp.com/emojis/1020031031698522142.png?quality=lossless&size=64

[gusty rose]

I suppose they know what it is, and/or to perhaps remove "bloat" in a sense. Though otherwise, not my style. It's fine for few small changes, but as the number of lines grows, it becomes somewhat difficult to know off-hand what does what over time.

[warm bough]

yeah that's just a bad idea

a single theme for it is something I want to do, moreso for my own sanity than anything else

although I am considering if it's worth my time to remove things like emoji upsells because... come on

who uses modded discord and doesn't have fake nitro enabled

unless you have real nitro

although it's probably good for completeness

hmm

I'll figure it out when I get home

[gusty rose]

I have very limited luck with actually hiding emoji upsells and without using fake nitro. discord made it so that almost all emojis are inside div[class^="lockedEmoji"] or whatever class. Hiding them is possible but it becomes ugly when you are in lots of guilds/servers, when you need to scroll down to emojis that can be used everywhere, and not guild specific.

[warm bough]

you mean default emojis?

or I guess twitch sub emojis work too

eh I'll just find out for myself later as I said

[gusty rose]

Yeah default emojis

[warm bough]

isn't the button to scroll down to those locked in place

[gusty rose]

They are, but when you hide those other locked emojis, clicking on those sections or whatever doesn't work used to not work

With the constant changes happening to discord UI, maintaining a functional nitro ad/annoyance hider theme can be quite a handful, even on stable builds of discord client. I swear things like that used to not work

[solid ore]

i made a lil thing for this, not sure if its exactly what u mean tho
https://github.com/tom22k/css-snippets/tree/main/BetterLockedEmojis

[gusty rose]

Nah like this, see how there's a massive empty space of emojis for Vencord guild. I have all other guilds' emoji sections collapsed, and they were visible, but now that's invisible and I'd have to scroll down on the left pane to get to default emojis

[solid ore]

ohh, but why would you want it invisible when they can be used?

like u just want to pin the default section?

[gusty rose]

Vencord server has non-nitro emojis? a few other guilds I am on has non-nitro emojis, and they get listed at around there though. There's also emojis in that screenshot that comes from other guilds, which won't work because well no nitro and no fake nitro

My intention was to have it hiding all nitro emojis and removing servers that are external to the one I am on from that list, so that I could quickly see the default emojis in a few scrolls, ideally. Though not a huge problem, just an annoying side-effect of that

[solid ore]

oh yeah, i tried to do smthng like that before but like ur pic shows it just leaves a huge gap

[gusty rose]

I think there was a bd plugin that could do my bidding, but it's been more than a few years since I exclusively used bd

[warm bough]

in that case we should just try to scrub as much as possible instead of aiming for stuff that may break it

as I said most people are using fake nitro anyway so stuff like this is very low priority

[gusty rose]

I mean you have emojis being one thing, and the OpenAsar being likely another. The case with OpenAsar is more dependent on one's setup. That server boost gauge thing has also been changed a short while ago

[solid ore]

this isnt exactly what u said, but to remove the "servers that are external to the one I am on from that list" u can do

#emoji-picker-tab-panel [class^=listItems_] > div:has([class^=categoryItemLockIconContainer_]) {
  display: none;
}

[gusty rose]

Well that works, except now that just has an empty space on the left pane, in addition to the one on the right. Thanks but unfortunately not so ideal. I believe ultimately being able to automatically remove sections of HTML would be ideal, instead of using CSS to just hide them

[solid ore]

it doesnt leave an empty space for me?

[gusty rose]

It might be one of my CSS that is causing that. I'll investigate further

[warm bough]

openasar bricks my discord lmao so I can't test that

I have no clue why but it just does

wish I could disable client updates fr

[solid ore]

is there a way to disable the anchor of an element? so that if u click on it it wont bring u to the link. this is for clicking on nitro or boosting profile badges

i tried doing pointer-events: none; but that stops the hover message too which i dont want it to do

[class^=profileBadges] > [href="https://discord.com/settings/premium"],
[class^=badgeList_] > [href="https://discord.com/settings/premium"] {
  pointer-events: none;
}

[warm bough]

can you change the href?

although I don't think that would go well since you click on it then what

[solid ore]

how do i do that lol

[warm bough]

@solid ore try checking what other badges do like old username

[solid ore]

old username does nothing but the info on hover, but the dev one for example brings u to a support article about devs

[solid ore]

but i could change it for just these ones specifically

[solid ore]

is this even possible with just css?

[warm bough]

that's why I asked lol

[warm bough]

yeah so check how that one works

[solid ore]

oh i thought it was a suggestion, i dont think it is

[solid ore]

it just doesnt have a link attached

[warm bough]

oh right

I'll try something out later

[warm bough]

ugh I'm thinking of https://github.com/nvhhr/discordcss/blob/main/snippets/swaphomeicon.theme.css which swaps the discord logo on the DM list button, which is kind of similar?

[lunar hamlet]

**swaphomeicon.theme.css: **

/**
 * @name swaphomeicon
 * @author nvhhr
 * @description replace home icon/dm button with custom image
*/

/*remove discord logo*/
[data-list-item-id=guildsnav___home] > [class^=childWrapper_] > svg
 { display: none; }

/*replace with custom image*/
[data-list-item-id=guildsnav___home] > [class^=childWrapper_]
 { background-image: url("https://i.imgur.com/ekIk6Ux.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 70% 70%; /*adjust as you see fit*/ }

[warm bough]

thanks

[solid ore]

no that hides the original element and then adds a background image loaded from a url, completely different

[clear siren]

btw @solid ore you don't need your fork anymore https://github.com/tom22k/css-snippets/blob/main/dashless-extended-100.css

https://github.com/nvhhr/discordcss/blob/main/snippets/dashless-extended.theme.css I fixed mine to use 100% size-adjust

you can keep yours if you want to, I don't mind

[solid ore]

thank you 🙏

[clear siren]

if someone is bored and interested in testing or improving this snippet be my guest https://github.com/Vencord/plugin-requests/issues/457

that's something I think I'm gonna be using too

(literally threw that together in a minute)

[solid ore]

i can test it for u

j ping me

[clear siren]

@solid ore

[solid ore]

okay works normally, will put it in a folder now

[clear siren]

@solid ore

[solid ore]

again pls

[clear siren]

@solid ore

[solid ore]

nah doesnt work

maybe if i have the folder open

ready

[clear siren]

yeah kinda figured it might break

@solid ore

[solid ore]

nope

[clear siren]

yeah I'll try to improve it tomorrow, gotta go to work in an hour

[solid ore]

btw is anyone here in a server that has locked emojis because that server needs to be boosted? i need to test smthng

[echo frost]

the sharex discord server has that

[bleak gust]

skill issue

[vestal field]

23k and not enough boosts??

[echo frost]

level 2

9 boosts

[vestal field]

quite tragic

[bleak gust]

hot take but boosting a public server is insane imo

[echo frost]

unless you're active in it maybe

[bleak gust]

[gusty rose]

Weird, didn't brick for me

[echo frost]

also i'm in a 42k server with barely enough for level 3

and worried enough about maintaining that level to not have a vanity url

[vestal field]

true but if 23k people are in a server and there are 9 boosts something went wrong lol

[echo frost]

42k with 16 boosts is even worse

but support servers do usually have less boosts

and that's what sharex is and skyhanni (the 42k one) is

[glass ember]

hi can I have the variable name for these two colors?

[echo frost]

@echo frost

[glass ember]

normally pings are red and I don't know what the variable is

[echo frost]

open inspect element (ctrl+shift+i) then do this

[glass ember]

and channel text color

that's all I need

[echo frost]

it's really easy to find them. do this

[glass ember]

thank you

[echo frost]

var(--channels-default)

[glass ember]

I couldn't find em :/

[echo frost]

--mention-foreground --mention-background

[glass ember]

none of those are in my file

[echo frost]

i don't have any server pings

[echo frost]

are you trying to edit an existing theme?

[glass ember]

yes

clearvision

it said it was highly customisable

[echo frost]

ok well it's probably not just changing the vars

[glass ember]

here's my current file

I'm trying to make it look like Opera GX's Hackerman Theme

or inspired by at least

I feel it's important to mention I haven't used css in over a year and remember very little

[echo frost]

shouldnt it be green then?

[glass ember]

my bad

I meant lambda

[clear siren]

same as people donating to millionaire streamers

[clear siren]

pain https://github.com/Vencord/plugin-requests/issues/457#issuecomment-2089595881

[clear siren]

posted to snippets #🎨-css-snippets message

[gusty rose]

It seems that even after disabling all of custom CSS themes, I still have that empty gap on the left with the quick guild emoji selection. I have also tried tracing back via developer tools, inspecting most of the elements manually from that area, to see if there were any of my rules caused that issue, but couldn't find offending entry. At this point it is clear it is something specific to my end, but it isn't something that I did, it might even be that I am using stable version of discord, or because of some geo-specific thing they have going on my end. Either way, 'tis not the end of the world. I can live with gaps until hopefully I can have a better solution put in place.

On an unrelated note, it does seem like my anti-nitro only emoji selection choices does not only cause this guild's standard emoji (if any) to be rendered invisible/unselectable, but on some other completely unrelated guild. That'll be yet another thing to add to my rather long list of to-do's with the overall hiding scammy upsell things discord offers me, along with this rewrite to not use aria-label (a massive task), code cleanup (remove old or unused rules), restructure, sync up with TheSunCat's gist, etc.

[solid ore]

thanks!

[solid ore]

i was joining a bunch of servers on my alt to try and find the nitro upsell for >100 servers, and i noticed it stopped working for me too, so it must be something to do with the number of servers you're in

[gusty rose]

Weird, I'm in less than 100 servers, though am getting close to the limit.

[solid ore]

i've updated mine to not use aria labels and other things based on feedback and removed most old rules (there's some things i haven't been able to test)
i also split it into specifically nitro upsell and server boosting upsell

[solid ore]

yea im nowhere near the limit either, i think it just has to be enough that it fills this space

[gusty rose]

Interesting, does the both of them support other locales? here's mine, well most of it, https://gist.github.com/net-wayfarer/c48456aa0e35a655531ebf7db70417cb

[solid ore]

yes, neither of them use aria labels

[gusty rose]

Nice, thanks, I'll look into it

[frigid garnet]

@warm juniper do you want to change your discord font?

[warm juniper]

yes

[frigid garnet]

i recommend you to use google fonts

[warm juniper]

private fonts

[frigid garnet]

from your system?

[warm juniper]

yes

[frigid garnet]

its not possible proably @clear siren can you confirm?

[warm juniper]

idk how do i find a path

[frigid garnet]

its proably not possible