🎨-theme-development

[wintry cape]

span.chipletContainerInner__10651 {
    padding: 0 2px;
    >.messageText__10651 {
        line-height: 16px !important;
    }
    .tagText__10651 {
        display: inline-flex;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        will-change: max-width, margin;
        transition: max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
            margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    img.badge__10651 {
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
            margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    &:hover {
        .tagText__10651 {
            max-width: 20ch;
            margin-right: .3ch;
            transition-delay: 0.08s;
        }
        img.badge__10651 {
            transform: rotateZ(360deg);
            margin-right: .6ch;
            transition-delay: 0.08s;
        }
    }
}

I think this should work

[warm igloo]

Hi sorry i've tried to read everything but I have an issue with themes in general ^^'
I have make sure my theme is up to date with the latest css classment. I am up to date on vencord. My discord is working fine.
All my themes is working properly but they dont have any background anymore. Even though my image is loading properly in my browser with the link from the code.
I have tried changing the background with different images / css code or even see to go back to default settings with discord but nothing works.

Can someone help me ? Thanks in advance

[pure cairn]

you probably need to add the image link to the allowlist

check in the Themes settings

[warm igloo]

I'll check that ty

[warm igloo]

Well can't find the option can you enlight me where to find it please ?

I cant find the option in the json

[pure cairn]

you should have something here

either here or in the online themes tab

[pure cairn]

json (?)

[warm igloo]

Ho there is no settings the image need to be on thoses website

[warm igloo]

I've uploaded the image to discord but it doesnt work still

[pure cairn]

you should see something like this

in your Vencord settings, Themes section

[warm igloo]

Nothing

[pure cairn]

then your theme is not working

let me see

[warm igloo]

Well it is because my font is different, my colors are aswell of my search bar is aswell

[pure cairn]

can you send the theme file here?

[warm igloo]

Yep I can

Ho Wait wait the css is importing another css file. It might be the problem with transparency from that first file

[pure cairn]

yeah this is not fully working

not all selectors are actually working

[warm igloo]

Alright I'll look into that file imported

Sorry for wasting your time

[pure cairn]

if I can offer you an alternative, you can try this one
https://github.com/nvhhr/discordcss/blob/main/snippets/actuallybasicbackground.theme.css

[pure cairn]

don't worry

[pure cairn]

it won't have the custom font and custom accent parts, but you can easily replicate them

[warm igloo]

Yep I can try it

ty

[pure cairn]

[austere cloak]

I replace my oldone with this ?

[wintry cape]

Yes

[austere cloak]

Ok ty

Any idea for the nickname overriding into replies ? cf image

[wintry cape]

Idk tbh, i don't have the date showing there

[late lichen]

haha, doesnt work on me

[brittle juniper]

finish ed

[humble jay]

what language is this ----------------

[golden ibex]

Discord please for the love of wumpus or whatever god you believe, stop changing this fucking shit

I'm tired of changing the hide gift nitro button code over and over

https://tenor.com/view/green-mile-im-tired-boss-michael-clarke-duncan-gif-2375696290766999196

[echo frost]

the font from this i believe

#🎨-css-snippets message

[humble jay]

ah kul

thought there was also one for blur

and one that used *

[echo frost]

?

[humble jay]

found

https://discord.com/channels/1015060230222131221/1418690617063641119

[echo frost]

you can also do this -webkit-text-security: disc;

[echo frost]

yeah don't use that

[humble jay]

yea or put it insanely high blur lol

[echo frost]

well blur still isn't technically destructive

[wanton orbit]

Straight up censoring is better than blur

No matter what

[humble jay]

yea, btu there is a point where its still unrecoverable

have some

thing decipher this

[echo frost]

i doubt anyone will try, but i think it's technically possible

and it doesn't even look good

[late lichen]

thats why i changed to .buttons__74017 > .button__24af7.button__74017 that somehow works

[wintry cape]

It's still the same, they just uncapitalised the g in Gift

[errant zenith]

How do I go about simply changing the color of chat text?

[wintry cape]

/* Change color below */
.markup__75297 {
    color: red;
}

[real quarry]

[class^="container_" i]:has([class*="coachmarkcontainer" i]) {
    display: none!important; /* fuck off, discord */
}

[aria-label*="last meadow" i] {
    display: none!important; /* fuck off, discord */
}```

for anyone hiding april fool's BS

(there's no experiment to toggle it off)

ok fixed

[iron smelt]

dev://experiment/2026-03-gorilla

[smoky belfry]

why do people keep using aria label and spamming !important 😭

[echo frost]

aria labels aren't that bad

sometimes they're the only good option

[smoky belfry]

they never are

[errant monolith]

its really important

[wintry cape]

Aria labels don't change that often

[echo frost]

i think their main gripe is that they can be different per language

which is annoying for a snippet

but for personal use, it's not a big deal

[wintry cape]

True

[real quarry]

thanks

that is such a terrible name for an experiment tho ngl

they used to be descriptive enough that you could tell what it is ;-;

[real quarry]

aria label: i know that changes between individual languages on discord but i tried accessing deeper into the node tree so i could hide a parent element based on the src attribute of one of its inner img elements but i never got that working consistently

!important: force of habit, oops

[iron smelt]

That’s kind of the whole point

The name is meant to be cryptic

Honestly, probably a code name

They don’t wanna spoil the surprise - they know about the fact that people can see names experiments

[echo frost]

why'd you use case insensitive attribute selectors
i didn't even know you could do i to make it case insensitive

[real quarry]

holdover from other personal snippets of mine where i hid tenor gif embeds based on contents of src attribute

[proven isle]

i sure do love da fake nitro

[smoky belfry]

is there still an experiment to disable that activity or do we need to use CSS to remove this useless shit now ?

yeah no these fuckers removed it

pretty sure there's no better rule than this

[class^=membersGroup_]:first-of-type:has(> [class^=headerContainer]) { display: none; }

[pure cairn]

that won't hide the cards though

only the activities header

[smoky belfry]

that's the only necessary thing to hide

you disable the card via the normal setting

[pure cairn]

fair enough

[smoky belfry]

• disabling via setting cost less than disabling via a CSS rule

honestly at this point i wonder if it wouldn't be easier for me to switch to something which just use the client APIs but has custom UI or smth

[echo frost]

if you use questify, you can do this

[echo frost]

you could do this

[data-list-id^="members-"]>div>.membersGroup_c8ffbb:first-of-type {
    display: contents;
    >.headerContainer__095fe {
        display: none;
    }
    >.membersGroupHeader_c8ffbb  {
        height: auto;
        padding-block: var(--space-lg) var(--space-xxs);
        padding-inline: var(--space-md) var(--space-xxs);
    }
}

[smoky belfry]

isn't that what i did, but overcomplicated ?

[echo frost]

no has

[smoky belfry]

interesting, but i'm still on Vencor, not on equicor

[echo frost]

you could install it as a userplugin

https://discord.com/channels/1015060230222131221/1404555062205874176

[smoky belfry]

i guess yeah but a has direct child after first of type isn't expensive

[smoky belfry]

might as well switch to equicord then

as i don't use userplugin anyway but fork Vencor and install userplugins as real plugins for convenience

basically i just maintain my soft-fork of Vencord which is just Vencor with patch on top
and each time Vencor get a new version i just rebase the patches and fix any issue that happen

[echo frost]

that doesn't seem very convenient
i used to use my fork, but then stopped because auto update wouldn't work

[smoky belfry]

it's very convenient cause i don't have to have a dev setup on each machine
i just install Vencord like someone normal, but my Vencord point to my repository

[smoky belfry]

update kinda work, but there is a trick, running it twice

[echo frost]

hm

interesting

how do you make vencord point to your repo?

[smoky belfry]

i patched the installer
https://github.com/Vencord/Installer/compare/main...Julienraptor02:Installer:custom
and here's my patched build of Vencord which doesn't require anything special
https://github.com/Julienraptor02/Vencord

and basically it know it come from my repo

the only thing i do different from Vencord is that i don't replace the content of the release which is bad practice and instead use proper tagged version
which now i could even make immutable since GitHub allow that

[smoky belfry]

and the advantage is that i just use GitHub codespaces to do everything related to my version of Vencord so i can do it on any device

in theory people could even use my build as easily as Vencord

[echo frost]

couldn't you still put them in userplugins folder?
so then you'd probably have less merge conflicts

[smoky belfry]

i never have any merge conflict, i don't merge

if github wasn't cooked of coding their shitty website with AI, i could show you the git tree nicely

i guess that'll do it

it's more visual with git graph, but it's currently broken in codespace because CSS CSP idk what they did moment

[vague rain]

Hi, Im using the Translucence theme plugin but don't like the background image. Is there a way I can change that within quickCSS?

[halcyon crypt]

is it possible to move the Pending Applications from the top to the bottom of the server list?

[plain kelp]

Wtf is that button, never seen it

[halcyon crypt]

if a server that you are trying to join has an application system, while the app is in review, the server is shown there, you can also withdraw it there
it looks like this
https://cdn.discordapp.com/attachments/1426318577329504316/1489694650204815510/Screenshot_2026-04-03_202441.png

[echo frost]

I think it would be with order

[halcyon crypt]

it works similarly to the server folders, this is what I got from inspecting it

<div class="container__93fc9"><div aria-expanded="false" class="popoutAnchor__93fc9"></div><div class="folderGroup__48112" data-drop-hovering="false"><div class="listItem__650eb"><div class="pill_e5445c wrapper__58105" aria-hidden="true"></div><div class="folderHeader__48112 folderHeaderSmall__48112" data-dnd-name="Pending Applications"><div class="folderButton__48112" role="treeitem" data-list-item-id="guildsnav___1" tabindex="0" aria-level="1" aria-expanded="false" aria-owns="folder-items-1"><span class="hiddenVisually_b18fe2">Pending Applications, folder </span><div class="wrapper_cc5dd2" aria-hidden="true" style="width: 48px; height: 48px;"><svg width="48" height="48" viewBox="0 0 48 48" class="svg_cc5dd2" overflow="visible" role="none"><defs><path d="M0 24C0 16.5449 0 12.8174 1.21793 9.87706C2.84183 5.95662 5.95662 2.84183 9.87706 1.21793C12.8174 0 16.5449 0 24 0C31.4551 0 35.1826 0 38.1229 1.21793C42.0434 2.84183 45.1582 5.95662 46.7821 9.87706C48 12.8174 48 16.5449 48 24C48 31.4551 48 35.1826 46.7821 38.1229C45.1582 42.0434 42.0434 45.1582 38.1229 46.7821C35.1826 48 31.4551 48 24 48C16.5449 48 12.8174 48 9.87706 46.7821C5.95662 45.1582 2.84183 42.0434 1.21793 38.1229C0 35.1826 0 31.4551 0 24Z" id="«r3»-blob_mask"></path></defs><mask id="«r3»" fill="black" x="0" y="0" width="48" height="48"><use href="#«r3»-blob_mask" fill="white" class=""></use></mask><foreignObject mask="url(#«r3»)" x="0" y="0" width="48" height="48"><div class="folderButtonInner__48112"><div class="folderIconWrapper__48112"><div class="pendingFolderButtonIcon__93fc9"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M9.1 8.85A.5.5 0 0 1 9.45 8h5.1a.5.5 0 0 1 .35.85l-.84.85a3.25 3.25 0 0 0 0 4.6l2.06 2.06A3 3 0 0 1 17 18.5v1.01a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1.01a3 3 0 0 1 .88-2.13l2.06-2.06a3.25 3.25 0 0 0 0-4.6l-.84-.85Z" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M7 1a3 3 0 0 0-3 3v1.51a6 6 0 0 0 1.76 4.25l2.06 2.06c.1.1.1.26 0 .36l-2.06 2.06A6 6 0 0 0 4 18.5V20a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1.51a6 6 0 0 0-1.76-4.25l-2.06-2.06a.25.25 0 0 1 0-.36l2.06-2.06A6 6 0 0 0 20 5.5V4a3 3 0 0 0-3-3H7ZM6 4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1.51a4 4 0 0 1-1.17 2.83l-2.07 2.07c-.88.88-.88 2.3 0 3.18l2.07 2.07A4 4 0 0 1 18 18.49V20a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1.51a4 4 0 0 1 1.17-2.83l2.07-2.07c.88-.88.88-2.3 0-3.18L7.17 8.34A4 4 0 0 1 6 5.51V4Z" clip-rule="evenodd" class=""></path></svg></div></div></div></foreignObject></svg></div></div></div></div></div></div>

[echo frost]

does this work? .tutorialContainer__1f388>.container__93fc9 { order: 1; }

If not, could you also send a screenshot of what the dom looks like around there

something like this

[halcyon crypt]

like this?

[echo frost]

ok this should work
#guild-list-unread-dms>.container__93fc9 { order: 1; }

[halcyon crypt]

nope, it does nothing

[robust totem]

maybe this

ul[data-list-id="guildsnav"]>div>div>[class*=container]:has(foreignObject [class*=pendingFolderButtonIcon]) { order: 1; }

[halcyon crypt]

that works, thank you

[echo frost]

oh oops i did the wrong thing
#guild-list-unread-dms+.container__93fc9 { order: 1; }

[echo frost]

this will cause a lot of lag
*= is bad for performance, and :has() is even worse, especially if you use descendant selector, and *= inside :has() is especially bad

[halcyon crypt]

thaaank you 🙂

[echo frost]

(i accidentally typed > which is child selector, instead of + which is next sibling)

[robust totem]

That's why I tried to restrict the scope, the first *= is only checked among like 5-10 other children within the same parent, the :has is used on a tree with ~20 items, and the second *= could match up to 5 children within a foreignObject element (which is only used in svgs)

I think your snippet is more likely to break, the order of the guild list items isn't guaranteed as discord keeps adding more buttons and container__93fc9 isn't that unique to be able to quickly find the correct name if classnames get randomized again

[echo frost]

it's evaluated right to left

[robust totem]

huhh why

[echo frost]

i'm not sure if :has() gets evaluated last, that might be true, but idk

[echo frost]

performance reasons i think

it's evaluated per dom element not per selector

[robust totem]

insane

[echo frost]

https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672

[ornate jackal]

How do your files look like this?

[echo frost]

vp plainfoldericon

[ornate jackal]

thanks

[onyx mesa]

when will discord fix the inbox on desktop

[echo frost]

?

[dense depot]

how can i remove this fade?

[brazen quartz]

.chatGradientBase__36d07 { display: none; }

[errant zenith]

how hard is it to copy oldcord's palette and font? i'm fine with the current UI besides that

i just need the colors and the font in a .css file

[echo frost]

probably pretty easy

[humble jay]

dang discovered this setting

sick

colored icons

⠀

[echo frost]

is that the thing that shows up on the top of the screen when using f8break?

[humble jay]

yea and the tint ovelay, which was the annoying part

[humble jay]

almost finished

just gotta do the pencil

[smoky fog]

look nice

[humble jay]

ok finished

⠀

[humble jay]

thx

[smoky fog]

share2 xD

[humble jay]

⠀

for now i have it here

[humble jay]

oh btw lmk if i missed an icon

like some misc plugin icon

[smoky fog]

thank you!

[smoky belfry]

The ID one made me think about something else

[humble jay]

yea that wasnt on purpose, but ive been made aware, and it shall stay ⠀

[river pecan]

nice

[echo frost]

huh

[brittle juniper]

is it me or like

stuff broke

[pure cairn]

Define stuff

[plain kelp]

It's discord

Stuff are breaking continuously

[humble jay]

https://tenor.com/view/pornhub-intro-download-gif-15219983

[mild temple]

i know it might be a stupid question, but is there any way to get this annoying message to never popup again?

[crimson skiff]

ol.scrollerInner__36d07 > li[data-author-username="Guild Boost Upsell"] {
  display: none;
}

[pure cairn]

:nth-of-class() waiting room

or even :nth-of-type(x of S)

https://tenor.com/view/mundo-feliz-onetreehsll-world-if-gif-14071235670792471304

[echo frost]

huh

[sour storm]

took a look through #🎨-css-snippets and didnt see anything, does anyone have a snippet to move the typing indicator back below the chatbox

nvm found it

#1354227244834492486 message

[late lichen]

i think you will like (removes the highlighted element)

.sidebar__5e434:after {
  content: unset !important;
}

[sour storm]

oh that is nice

thx

[marble monolith]

I am looking to figure out how to target these specific elements in the profile settings area, so I can get rid of the buttons I don't use.

[echo frost]

you can use :nth-of-type()

[marble monolith]

oh interesting

[echo frost]

my browser/internet is being weird, so this should propbably give the mdn docs for it https://www.google.com/search?q=mdn+nth-of-type

[marble monolith]

i imagine it will break if they add more stuff to that menu but I also imagine I won't be using discord anymore by the time they do lol

[echo frost]

you could also maybe use + or ~ which are directly next sibling and any next sibling

[marble monolith]

im just making the experience more bearable for the last moments I'm stuck over here

[marble monolith]

noted

[echo frost]

search for combinator for mdn docs on this i think

so are you only wanting to remove the avatar decoration?

[marble monolith]

avatar deco, nameplate, profile deco, uuhhh maybe profile widgets too

oh also server tags

[echo frost]

oops i typoed. sibling not child

[marble monolith]

Malor Notespark

[echo frost]

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:nth-of-type
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Next-sibling_combinator
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators#subsequent-sibling_combinator

[marble monolith]

okay so

i got something that hides the desired fields

but it currently also has the side effect of targeting the text in the bio input box

nvm i got it

[tranquil whale]

I made this 1 year ago and it still works very well

no edits

[onyx mesa]

something feels different about the context menu but idk what

[pure cairn]

oh I see what you did there, you made the guilds list a bit larger

[empty gyro]

grasscord is an incredible name

[onyx mesa]

no worries guys i have found what was wrong

[echo frost]

the cursor?

[tranquil whale]

Ty

[tranquil whale]

If you want to know more search grass cord by ZapGaming or ask gemini

[empty gyro]

I said it’s an incredible name, never said it looked incredible

it looks absolutely atrocious in my opinion

[glacial citrus]

pencilslipper is typing

[subtle sedge]

this channel isn’t a place to post your themes/snippets, it’s to get help with theme development

avoid constantly posting your stuff here unless you have an actual question or you will lose channel access

if you want to post your themes somewhere submit them on the bd website

[tranquil whale]

was just sharin swiftie

but sorry

[humble jay]

lmao

only turns my client into a slideshow but itscool

[grand surge]

What's the best way to implement animated images?
GIF? APNG? WEBP? Sprite images + @keyframes? Or something else?

[echo frost]

it depends on what you're trying to do

all of those should work

but might have downsides

[grand surge]

I mainly need to replace button icons, so I'd like to know the lightest method possible.

[echo frost]

apng will be lossless

i think webp has lossy compression

idk what its animated compression is like

gifs are very lossy compression

sprite images and keyframes seem super complicated for this

unless you need to change the timing for some reason

oh webp does support lossless, and has video compression

so use that i guess

the file sizes will likely be small if it's just button icons, so apngs would also be fine, but might as well use a more efficient file type

@grand surge ^

[grand surge]

ty

I will look into WebP.

[grand surge]

• gif
  2.83mb
  ↓
• webp ffmpeg -i image.gif -loop 0 -q:v 80 output.webp
  653kb

It looks really good.

If I'm using the web version, is uploading it to Imgur or GitHub and loading it there the only option?

[echo frost]

you could also base64 encode it and put it directly in your css, but that would be very long

[grand surge]

ty

[onyx mesa]

yeah, the pointer disappeared when hovering over the buttons in context menus

idk if it's something wrong with my css

or just classic discord stuff

[echo frost]

it's discord

it annoyed me so i fixed itcss .menu_c1e9c4 .item_c1e9c4 { cursor: pointer; }

[humble jay]

why not avif

smaller

[gusty shell]

is there any css that can be used to hide this part off popout profiles?

[humble jay]

whos profile?

.breadcrumb_c2a763[aria-label="Game Collection"]
{ display: none !important; }

that should

[gusty shell]

did something similar

div[aria-label^="Game Collection"] {
  display: none;
}

which did work but left a really weird margin at the bottom of the about me

.descriptionClamp_f5f93a {
  margin-bottom: -11px;
}```

does fix this but then does it to everyone, not just those with the game collection

[cunning yoke]

anyone know how to hide the ping? in theme

[formal kayak]

.user-profile-popout .body__5be3e > .container__9d597{
    display: none;
}

Does it work?

[echo frost]

idk anything about avif and they didn't mention it

[formal kayak]

Is there a way to add a settings dialog to Vencord, similar to how it's done in Stylus?

With Stylus, you can add settings dialogs for text, color, checkboxes, selects, ranges, and numbers by providing @var variables in the user CSS metadata.

Does Vencord have a similar feature?

[echo frost]

sadly no

I'd like to implement it some day, but I'm quite busy procrastinating my responsibilities

[formal kayak]

ty

[half crystal]

This will be coming soon
Vencord plans to implement it when BD implements it, which should be within the year

[dense depot]

is there any plugin/theme that adds folders to favorite gifs?

so annoying to always scroll in there

[robust totem]

equicord has gifCollections but afaik it doesn't sync to other devices

[humble jay]

so if u put something in a folder, u dont have this gif on other devices?

or its just unsorted

[robust totem]

your custom collections are only stored on one device, but your favourite gifs will stay synced

[vestal field]

theyve been saying this for like 2 years i swear

[pure cairn]

within the year

they never said what year though

[plain kelp]

"The year" obviously refers to the year of the linux desktop

[tranquil whale]

Like BD allows for some crazy things look at chillax BD version

[vestal field]

wdym

[tranquil whale]

Chillax BD when on the card with the theme enabler becomes the chillax red and looks cooler

[vestal field]

i dont think this is something that bd specifically allows lmfao

just a theme feature

im not aware of any bd specific theme-related features other than their update notification system, which is pretty useless

[echo frost]

can't you also download themes directly in bd

[echo frost]

this?
that's just css from chillax

[iron smelt]

That’s actually kinda cool

[echo frost]

wtf *:not(#a#B) ?????
also the hrefs (which are for the github and help icons) don't even do anything because the svg child has its color set lmao

the theme may have crashed my discord
also for some reason it's making me log in again

It would be kind of cool if vencord added an id for each theme or something, so this could be done on vencord

but

not really any point imo

[echo frost]

could be done without :has()

[mental thorn]

With bd disable devtools warning in settings. If discord crashes or something with devtools open, it'll make it so you dont have to log back in

[mental thorn]

I should look more into this again, we have the parsing logic already. It just needs everything else

[formal kayak]

Is there an easy way to see which page I'm currently viewing?

Something like:

• Text channels
• Text channels + thread split view
• Voice channels
• Discover
• Friends list page
• Nitro page
• Shop page
• Quests page
• DM page

[oak plover]

doesn't it already show you everything on the top of the window

idk what you mean

[formal kayak]

As a CSS selector

[echo frost]

it kind of depends on what you're trying to do with it

[formal kayak]

The width of this area changes from page to page.

I need to know which page I'm currently viewing so I can adjust the position of my inbox.

[echo frost]

What css are you using to move the inbox?

[formal kayak]

Midnight Discord

body {
  --gap: 8px;
  --top-bar-height: var(--gap);
  --custom-dms-icon: off;
  --dms-icon-color-before: var(--text-default);
}
:root {
  --colors: off;
  --border-hover: var(--active);
}

/* --- Inbox + SearchBox --- */
body {
  --trailing-right: calc(var(--gap) + var(--border-thickness) + 8px + 4px + 244px + 4px + var(--space-xs));
}

/* SearchBox */
.visual-refresh .toolbar__9293f {
  padding-right: 0;
}

.headerBar__8a7fc {
  padding-right: var(--space-sm);
}

/* TextCh */
.container__5e434 > .base__5e434:has(.chat_f75fb0) {
  --trailing-right: calc(var(--gap) + var(--border-thickness) + 8px + 4px + 244px + 4px + var(--space-xs) + 32px + var(--space-xs));
  & .chat_f75fb0 .toolbar__9293f > .iconWrapper__9293f:nth-last-of-type(3) {
    margin-right: calc(var(--space-xs) + 32px);
  }
}

/* Text + Threads(Split View)*/
.container__5e434 > .base__5e434:has(.chat_f75fb0.threadSidebarOpen_f75fb0) {
  --trailing-right: calc(var(--gap) + var(--gap) + var(--border-thickness) + 32px + var(--gap));
  & .chat_f75fb0 .toolbar__9293f > .iconWrapper__9293f:nth-last-of-type(3) {
    margin-right: 0px;
  }
}

/* VoiceCh */
.container__5e434 > .base__5e434:has(.chat_f75fb0 > .noChat_cb9592 > .callContainer_cb9592) {
  --trailing-right: calc(var(--gap) + var(--gap) + var(--border-thickness) + 32px + var(--gap));
}

/* Inbox */
.visual-refresh #app-mount .base__5e434 .trailing_c38106 {
  right: var(--trailing-right);
  padding-right: unset;
}
/* --- Inboxや検索ボックスなど --- */

[echo frost]

why do you want the inbox to the left of search?

[formal kayak]

Regarding the text channel, the overall balance

For the rest, it's for design consistency.

[echo frost]

You can do like this for quests, and the same thing for friends, nitro, shop ```css
/* Quests */
.title_c38106:has(>.title_edbb22>svg>[d^="M7.5 21.7a8.95 8.95 0"])+.trailing_c38106 {
--trailing-right: 140px;
}

and discover

I think all of them that you're missing

@formal kayak ^

[formal kayak]

ty

I had hidden it, so I forgot about the title...

[tranquil whale]

yeah but i cant replicate

[echo frost]

?

in vencord?

like i said, vencord doesn't have an id for each theme

you could do it with :has() though

[tranquil whale]

exxample?

[river pecan]

any way to fix laggy animations?

idk if it's my pc's fault or some windows's setting

[river pecan]

snow all over my screen dude

body::after {
  content: "";
  background: url("https://teeenoob.github.io/themes/images/Snow_fix.gif") center/cover no-repeat;
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

i'm so late with this one

[humble jay]

added these

ths hella broken tho

ok nvm gpt sayas position: absolute;

[formal kayak]

How about something like this?

.iconWrapper__9293f[aria-label="Pinned Messages"]{
    & .icon__9293f{
        color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M19.38%2011.38a3%203%200%200%200%204.24%200l.03-.03a.5.5%200%200%200%200-.7L13.35.35a.5.5%200%200%200-.7%200l-.03.03a3%203%200%200%200%200%204.24L13%205l-2.92%202.92-3.65-.34a2%202%200%200%200-1.6.58l-.62.63a1%201%200%200%200%200%201.42l9.58%209.58a1%201%200%200%200%201.42%200l.63-.63a2%202%200%200%200%20.58-1.6l-.34-3.64L19%2011l.38.38Z%22%20fill%3D%22blue%22%2F%3E%3Cpath%20d%3D%22M9.07%2017.07a.5.5%200%200%201-.08.77l-5.15%203.43a.5.5%200%200%201-.63-.06l-.42-.42a.5.5%200%200%201-.06-.63L6.16%2015a.5.5%200%200%201%20.77-.08l2.14%202.14Z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E");
    }
    & > .iconBadge__9293f{
        background-color: green;
    }
}

[gloomy fossil]

i have this yellow border around windows im streaming is there a way to turn that off?

[river pecan]

that's obs issue as far as i know

[crude jackal]

@runic spindle

[tranquil whale]

what this?

[crude jackal]

I just showed it to my friend

She want to try my UI

[crude jackal]

Basically 50/50% I created it or someone made it

vendoru_fast

[crude jackal]

This one that I create

[tranquil whale]

@crude jackal can I try?

[crude jackal]

Which one?

[median citrus]

Does anyone have optimised theme with blur bg image?

[crude jackal]

You can change the icon to whatever you want @median citrus

[crude jackal]

Just change this to your own image

[pine needle]

how bout change the icon to something like svg different (colored) icons?
possible? and how? >.<

[echo frost]

that css literally changes the color of icons

[pine needle]

how to hide the original icon again? ><

[echo frost]

use the css they sent

[pine needle]

ya i did but turn out like that.

[echo frost]

you either didn't do it correctly, or have conflicting css

because the css they sent does work

[dusky venture]

can someone help me?
im trying to do a bell svg for the readall option but its breaking the best it got was this

chat gpt gave up (btw the bell looks ass if yall can give a new one plzzzz)

[humble jay]

@pine needle try that

[lusty oriole]

This but with actual window transparency would go hard

[crude jackal]

It's already translucent @lusty oriole

[humble jay]

how do i get all available color variables var(--yellow-300);

those

[wintry cape]

Click on it in devtools and it should bring you to the definition

[wintry cape]

Here are some of the yellow variables

[humble jay]

thx this is useful

so many

i think ima just stick w static colors lmao

[tranquil whale]

can I have this

thoughts on settings panel?

[cunning yoke]

anyone know how to move the badges?
like this profile ui ?

[echo frost]

I made this a little while ago @cunning yoke

[cunning yoke]

oh cool

@echo frost btw you know how hide shadow ?

[echo frost]

.bannerVisible_f37cb1>.headerEllipseForeground_f37cb1 {
  display: none;
}```

[cunning yoke]

thx

[cunning yoke]

@echo frost When I go to Settings → Edit Profile, there is an bug with the badges

[echo frost]

I think you can change the top to .user-profile-popout:not(.container__5a2c6) to not do it in there

[cunning yoke]

uhh how?

[echo frost]

change the .user-profilep-popout to that

or add the :not(...) at the end of .user-profile-popout

like this

[cunning yoke]

oh okay

i wanna hide this too but idk how @echo frost

[echo frost]

the name and username?

why

[cunning yoke]

No, I just want to hide the empty space under the name

[echo frost]

oh

[cunning yoke]

[echo frost]

delete this

and it looks like you already deleted the border?

[cunning yoke]

yee

[echo frost]

and the about me text?

[cunning yoke]

yea i was think delete it will make it more clean

[echo frost]

yeah i added that because the other person wanted it to look more like the old profile

[cunning yoke]

oh yea

idk how to make this also like others

[echo frost]

also I figured out how to make the status show under the pfp if you want

[echo frost]

?

[cunning yoke]

wha

[echo frost]

wdym also like others

[cunning yoke]

Sorry, I meant the one in the picture My English isn’t very good

[echo frost]

oh the big profile popout

[cunning yoke]

yea

[echo frost]

try adding this , .user-profile-modal-v2

might be a bit buggy

but I need to go to bed

[cunning yoke]

oh its fine

goodnight

and thx

[echo frost]

Here's how I did this. You can uncomment the stuff in .outer if you want it to only be text instead of being in the bubble thing

.user-profile-popout:not(.container__5a2c6), .user-profile-modal-v2 {
  .mask__68edb {
    anchor-name: --profile-tag-anchor;
  }
  .referenceContainer_ab8609 {
    height: 48px;
    margin-top: 0;
  }
  .container_ab8609 {
    inset: 0;
    padding-left: 16px;
    position: relative;
    .outer_ab8609 {
      /* border: none;
      box-shadow: none;
      background: none;
      border-radius: 0;
      >.inner_ab8609 {
        padding: 0;
        background: none;
      } */
      &::before, &::after {      
        display: none;
      }
    }
  }

  .header__5be3e  {
    anchor-name: --profile-status-anchor;
  }
  .container__63ed3 {
    /* border-bottom: 2px solid var(--user-profile-overlay-background); */
    /* padding-bottom: 16px; */
    .tags__63ed3 {
      >.clickableUsername__63ed3 {
        width: 100%;
      }
  
      >.dotSpacer__63ed3 {
        display: none;
      }
  
      >.container__8061a {
        background: var(--user-profile-overlay-background);
        padding: 4px;
        border-radius: 4px;
        position: fixed;
        right: calc(anchor(--profile-tag-anchor end) + 8px);
        top: calc(anchor(--profile-tag-anchor end) + 8px);
      }
    }
  }
  .descriptionClamp_f5f93a {
    max-height: unset;
    -webkit-line-clamp: unset;
    +.viewFullBio_f5f93a {
      display: none;
    }
    /* &::before {
      content: "About me";
      text-transform: uppercase;
      font-size: 14px;
      color: var(--header-secondary);
      font-weight: 800;
      line-height: 32px;
    } */
  }
}

[cunning yoke]

Does anyone know how to fix the bio?
It’s broken on some profiles.

.user-profile-popout:not(.container__5a2c6), .user-profile-modal-v2 {

  .mask__68edb {
    anchor-name: --profile-tag-anchor;
  }

  .container_ab8609 {
    top: 48px;

    .outer_ab8609 {
      &::before,
      &::after {
        display: none;
      }
    }
  }

  .container__63ed3 {

    .tags__63ed3 {

      > .clickableUsername__63ed3 {
        width: 100%;
      }

      > .container__8061a {
        padding: 4px;
        border-radius: 4px;
        position: fixed;
        right: calc(anchor(--profile-tag-anchor end) + 8px);
        top: calc(anchor(--profile-tag-anchor end) + 8px);

        display: flex;
        flex-wrap: wrap;
      }

      /* REMOVE VENCORD BADGES (by CDN) */
      .container__8061a img[src*="badges.vencord.dev"],
      .container__8061a *:has(img[src*="badges.vencord.dev"]) {
        display: none !important;
      }

      .container__8061a > *[aria-label*="Contributor"] {
        display: none !important;
      }
    }
  }
}

.bannerVisible_f37cb1>.headerEllipseForeground_f37cb1 {
  display: none;
}

[lusty oriole]

doesn't seem like it does it out of the box, do i have to toggle an setting for mica in the css?

nvm grabbed the wrong one, where can I grab that theme?

[lusty oriole]

the layout looks a bit different compared to the video

[echo frost]

there's nothing wrong with the bio
assuming you mean the space on the bottom, that's because sadan has that as part of their bio
they have a newline, and some invisible characters after the link

[cunning yoke]

ohh alr

[cunning yoke]

@echo frost you know how to make badges also work in dms?
and fix the issue with the badges in settings this

[echo frost]

i already sent a fix for the bug in settings

[cunning yoke]

Yeah, I saw that but is there a fix for the scrolling issue? I want it to match the profile badge style

[echo frost]

you can add , .user-profile-sidebar for dm sidebar

seems to work correctly, but could cause some bugs maybe

[cunning yoke]

I want it to look like this, but the scrolling issue makes it look worse

[echo frost]

I can't reproduce your issue

for me, i don't see the badges at all

And i don't really have time to try to fix it

[cunning yoke]

It’s fine

Thanks for helping me

[humble jay]

theres this shadow under the search box when i make the settings too close to it

but i cant find it in the html

/* left panel */
.sidebar__409aa {
  padding-block: 0;
  padding-inline: 0;
  
  /* top profile display */
  .fixedContent__409aa {
    padding: 0 2px;
    
    /* profile piece */
    .section__409aa {
      padding: 0 0 3px 0;
    }
    /* text box */
    .wrapper__72c38  {
      min-height: 0px;
      margin-top: -6px;
      padding-inline-start: 0;
      line-height: 1;
    }
  }
  .navScroller__409aa {
    padding: 0;
    padding-inline: 0;
    margin-inline-end: 0;
  }
}

this is the css im using

any idae how to find it?

.fixedContent__409aa:after {
  background: none;
}

ok this owrked

[tranquil whale]

im gonna have to be honest with u this is shit

[clear siren]

rude

[crude jackal]

Because the layout is the CSS

[crude jackal]

You know why that's crap? It's just for the background, Custom icon

The full set is in my CSS

But the code I'm still working on it is not finished yet

But you can. Tested

[tranquil whale]

Still a bit basic

[echo frost]

well now it's the same as the video that you said you liked

or at least almost the same

[tranquil whale]

come on at least send the css file

[echo frost]

they did

you need both of these
#🎨-theme-development message
#🎨-theme-development message

[tranquil whale]

OK wow 2 different file

Mine is 5

[humble jay]

.auto_d125d2.scrollerBase_d125d2 {
  height: 50vh !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  
  .listBoxItemContent__2e223.option__56a50 {
    min-height: 10px !important;
    padding: 2px 4px !important;
  }
}

the rules work fine until i make the minheight and padding smaller

like it precalcs the height of the box

can i somehow fix that so it is a correct height

i been thru claude for a while now and got nothing

[formal kayak]

Is there a better way to use a selector?

[humble jay]

idk but i wonder if that guys gna smite u for using :has

⠀

[echo frost]

do this
but also, for me the .auto.scrollerBase selects like every scrollable place (like the chat and the plugin list and stuff)

:where(.vc-settings-tab .selectDropdown__0edde) .auto_d125d2.scrollerBase_d125d2 {
  height: 50vh !important;
  scrollbar-gutter: auto;
  scrollbar-width: none;

  >.content_d125d2 {
    height: fit-content !important;
    .listBoxItemContent__2e223.option__56a50 {
      min-height: 10px;
      padding: 2px 4px;
    }
  }
}```
you can remove the :where(...) if you have this css nested in something to limit it to only the right place.
you shouldn't use !important unless necessary (usually only necessary if you need to override element.style)
if you don't want to scroll. change the height from 50vh to fit-content, since 50vh still makes me need to scroll

[tranquil whale]

@crude jackal um...

[echo frost]

oh actually the image might've expired (nexi, you should probably put your images on github or something)

dm thing: https://cdn.discordapp.com/attachments/1248612092051980430/1493514622609657906/614b809318019668ef255bee138aec03.gif?ex=69e52e22&is=69e3dca2&hm=c87db1410e570df952043b69a7492df1ad144dd64698d155a23b05e909c270c2&

bg: https://cdn.discordapp.com/attachments/1248612092051980430/1494701278394192073/b9cb9535-8f0e-4b51-9fbb-d7796dd84de44_upscayl_2x_digital-art-4x.png?ex=69e58aca&is=69e4394a&hm=8d5f755e545a7e98113a74d6ec18a729a9847036a1b78a93251a75c8a8fcd57e&

[tranquil whale]

oh lol

[humble jay]

thats alr, i have this all nested cuz this was just a snippet, but wtf this is insane ty lmfao

ga dam

[echo frost]

ok

so yeah, just remove the :where(...)

and read that paragraph i sent lol

[humble jay]

oh updated

ok

[humble jay]

alr yah thx, the importants were juts cuz a few needed it, and it was annoying to keep toggling them

i got it down to just these 2 being required

⠀

thx alot tho

[echo frost]

yeah the heights need the important

they're specified in element.style

that's why i kept them

[humble jay]

ah i didnt grab the last edit, i c

[humble jay]

p sick one

lol

/* Fullscreen Settings */
.container__8a031.modal_e44912.theme-dark.theme-darker.images-dark {
  /* --custom-viewport-padding: 0px; */
  max-width: none;
}

[tranquil whale]

Cooooooool

[subtle sedge]

https://betterhelp.com

[humble jay]

it's peak tbh

making the gui for pc, not ipad

[cunning yoke]

anyone know how to change flowerStar__3e3b0 icon?
for server boost , but keep othe icons?

[humble jay]

this thing?

[cunning yoke]

ye

[humble jay]

i dont see what else its hiding

.guildBadge__85d16 >.flowerStar__3e3b0 {display: none;}

this should be specific enuf tho

[cunning yoke]

I change it, but I was talking about other badges that has this same class

Like this I wanna keep this icon ? But how

[cunning yoke]

nvm i just fix the issue

[humble jay]

made thsi so its better for channel settings, an annoyance i always had

so u dont have like 4 settings per full page height

:root {
  --CS_COMPACTNESS: 6px; /* CHANGE ME */
  --custom-layout-sidebar-width: 200px; /* this is the width of the 'roles/members' pane in a channel's settings */
}

[pure cairn]

I was about to say Discord had rerolled classes, but it was just an updated unpatching Vencord

[full rover]

dumb question, anyone got any way they can fix this, as it seems to be some sort of padding? marginal? error in timeouts

not only that but I wanna also revert the timestamp to be next to the msg, rather than underneath it, similar to the join msgs, and couldnt figure out how xd

[humble jay]

use compact mode message display?

maybe idk wym, but if u mean the timeout display plugin #🎨-css-snippets message can use this

[full rover]

yes but, what about for people who dont use compact mode

[humble jay]

so thats ur issue? i didnt think that plugin's display was bugged for non-compact mode

[full rover]

it is yeah, has been for a while

[humble jay]

hm

ima try

[full rover]

and then the boost timestamp was out of place compared to join system msgs

[humble jay]

maybe report in support tho, might be better to fix the plugin

the plugin has been broken for compact forever tho, hence the snippet, so idk if itll get fixed

[full rover]

yea probly not

[full rover]

then I had this too

[echo frost]

try this css [id^=message-username-]>div { display: inline; }
↓

And I guess you can just do the same thing for the boosts

.message__9f20a,
[id^=message-username-]>div {
  display: inline;
}```

[winged palm]

hey, not sure if this is the appropriate channel but i just found this theme on tiktok but theres no css, link to download or smth. Im looking for a cute pastel pink theme for my gf, this was perfect but no download link. Anyone has a similar theme? https://www.tiktok.com/@hiitsmianmian/video/7534018796852432150

[echo frost]

https://betterdiscord.app/themes you might be able to find one here

[winged palm]

website might be bug because i cant filter and also cant scroll more, it says it doesnt have any more themes, sad

[tepid carbon]

If you don't already, try and use an adblock.

[winged palm]

that worked lol

[winged palm]

still cant find something like this, guess it's too custom to find something similar

[iron smelt]

I think that’s just the clienttheme plug-in

usrbg, oneko, customrpc, prolly fakeprofiletheme

[winged palm]

thats a lot, will check how it works and try to figure out if i can do it with that, ty!

[rich prairie]

For some reason when I set a backdrop filter blur on the vencord toolbox menu, it makes part of it offset to the left. Anyone know how to fix that?

I just started learning css 3 days ago

[humble jay]

share css

[pale sleet]

have a theme called translucence and want black and red instead of black and green for the buttons and shit

anyone know how to change the colors

[humble jay]

find the color codes in the css

[pale sleet]

my b im stupid

[late lichen]

try this?

position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    backdrop-filter: blur(8px);
    z-index: -1;
  }

[rich prairie]

oops I forgot about this sorry

&??? How convinient xD that'll shorten some of my code 😭

[class*="menu"] {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(3px);
}

I tried a few things but I forget and this is what I have now

It worked, thank you

there is another pseudolayer or something I cant figure out how to get rid of

It seems to appear on all secondary menus or whatever youd call it

[formal kayak]

Wouldn't it be better to look for the elements with borders and narrow down the selector to those?

[late lichen]

can you send your code real quick?

[rich prairie]

[class*="menu"] {
    background: rgba(0,0,0,0.4);
    position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    backdrop-filter: blur(8px);
  }
}

[rich prairie]

I also sent the version before the fix earlier

[rich prairie]

What do you mean by selector? I'm new to css, been doing it for only 3 days lol

And I have no idea what the answer to that is

I've just been using that little arrow icon to try to find elements that might work

[late lichen]

add an "_" after menu on your selector

[rich prairie]

StarlightCry

Thanks

Whoops

[late lichen]

this is why you should be careful with selectors like that "menu" is way too open

[rich prairie]

I totally forgot the underscore lol

[late lichen]

it was also getting .submenuPaddingContainer_c1e9c4 thats why it looked like that

[rich prairie]

Ah thank you

[topaz mirage]

another mistake is that you're matching with a * (matches with elements that have menu anywhere). try using ^ instead (matches with elements that have menu at the start)

[plain kelp]

Surprised discord hasn't started obfuscating classes yet

[surreal hound]

They did at one point but reverted it

[iron smelt]

Don’t give them any ideas homie

[topaz mirage]

they did it once lmao

[humble jay]

what the hell is this

disgusting

what purpose does this serve

[pure cairn]

Fuck with custom theme/css users

What else

[languid veldt]

Is there a CSS/Plugin to create a "Divider" between servers? I don't mean folders

[hoary stone]

I managed to put this together real quick, seems to work right from what I'm seeing

.listItem__650eb {
  position: relative !important;
}

.listItem__650eb::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: #00ff00;
  border-radius: 1px;
}

[echo frost]

ew change
the code is a different color

[humble jay]

noticed

wasn't sure if vencord or disc

[cunning yoke]

@echo frost i think discord change badges class for the badge

cuz its not working now

[echo frost]

it's discord
there's an experiment to change the library used for syntax highlighting

[echo frost]

I don't have time to fix it right now

[humble jay]

is it meant to be here

i dont see it

[echo frost]

I'm not sure what the experiment name is

oh found it dev://experiment/2026-03-arborium-highlight

but actually it seems like it's still using hljs and they just changed the colors

[subtle sedge]

RUST

[echo frost]

blazingly safe and memory fast

[empty gyro]

when will discord move to rust fully

[echo frost]

@ionic needle rust mention

[hoary stone]

Come on guys, isn't Discord rusty enough

[smoky belfry]

so annoying when force disabled it break Vencord Shikicodeblocks and when force enabled or not overriden it force some kind of color and override my shikicodeblocks theme

oh wait no it always break it, nvm it's just weird

ok this is cursed i think i fricked up somewhere

[ionic needle]

[clear siren]

[errant zenith]

i think you installed the wrong vencord

[smoky belfry]

oh we need cleanup @cloud jolt

[frozen pulsar]

how do i capitalise the first letter of channel name?

.channelName-3KPsGw,.linkTop_d8bfb3 {
  text-transform: capitalize;
}```

isnt working

okay i did it lol

my ocd isnt triggered now

[humble jay]

what if i name it themedevelopment

Themedevelopment

[clear siren]

thevelopment

[oak plover]

plevelopment

[late lichen]

.chatContent_f75fb0 .spamBanner_a2eac3 timeout banner selector if anyone wants to change it, uhhh

[hoary stone]

Could I perhaps ask how you managed to do that?

[pure cairn]

Should be just

.name__2ea32 { 
  text-transform: capitalize; 
}```

[frozen pulsar]

I'll send the code today

I'm not on my laptop rn

[frozen pulsar]

😭😭😭😭

That's cursed

[hoary stone]

Thank you!
I haven't come across "capitalize" before

[median shuttle]

the me develop ment

[delicate grotto]

hi, does anybody has a simple server columns snippet? i just want to add an extra
nvm i found my way like this:

@import url('https://mwittrien.github.io/BetterDiscordAddons/Themes/ServerColumns/ServerColumns.css');
 :root {
 --columns: 2;
 --guildgap: 2;
 --aligndms: 0;
}

[humble jay]

holy moly

[humble jay]

|
```
text here
```

also am i schizo, or is using a variable named columns kinda crazy

[delicate grotto]

ahh idk Xd

im very uhh beginner to this

[onyx mesa]

what is the point of these

couldn't they just put these to the banner buttons

[humble jay]

seems 100% useless when its in the context menu already

but at least here, it saves u a click from having to expand into the bigger profile view, which is what u had to do before (but yea banner area would be cooler)

[humble jay]

oh also

can add the language text here for syntax highlighting

[delicate grotto]

hella cool

[onyx mesa]

they just keep doing the must unnecessary stuff instead of fixing actual issues, it has to be just ragebait at this point

[sour path]

  height: 335px;
  position: absolute;
  width: 315px;
  bottom: calc(50% - 2px);
  top: unset !important;
  content: url(https://cdn.discordapp.com/attachments/1499085656524324874/1499088235995987968/miku-vocaloid.gif?ex=69f38637&is=69f234b7&hm=e218c5b05846739bd9cb277763bd3a3142b65dbd7c0f6ca00f72204ff7858e76&);
  image-rendering: smooth;
  align-content: right;
  scale: 0.5;
  inset-inline: unset;
  right: 0;
  pointer-events: none;
}```

does someone know how to make it not hide buttons ? it's kinda annoying

[pure cairn]

I tried but the message box is above the chat messages scroller

[sour path]

oh

[robust totem]

just move her inside the same stacking context

[class^=chatContent]>div>[class^=scroller]::after {
  height: 335px;
  position: fixed;
  width: 315px;
  bottom: 30px;
  content: url(https://cdn.discordapp.com/attachments/1499085656524324874/1499088235995987968/miku-vocaloid.gif?ex=69f38637&is=69f234b7&hm=e218c5b05846739bd9cb277763bd3a3142b65dbd7c0f6ca00f72204ff7858e76&);
  image-rendering: smooth;
  align-content: right;
  scale: 0.5;
  inset-inline: unset;
  right: 0;
  pointer-events: none;
}

the message buttons have a higher z-index so they will cover the pseudo element

[sour path]

oh

thx

she doesn't show up anymore is it normal ?

oh wait no she does show up bot only in threads

[sour path]

nevermind i somehow missed a part

[hallow kite]

can i get help making a pikachu theme

[hallow kite]

tysm

[humble jay]

was just gonna ask how to add ur metatags to the css files, and bam i see this, nice

[humble jay]

halo, so i have a coloured icons snippet im tryna fix up before i post, but ive had to use 2 :has selectors to grab the pin icon based on if it has the "new pins" indicator thing since it needs a diff SVG, but they lag the css to shit. if i comment them out and it all snaps back to not-laggy-as hell, if icant do this part ill just have to leave the top bar pin icon out of the snippet, or make it a toggle

am i cooked here cuz i got no idea, and mr claude says there is no other way

oh also forgor a comma here in that file

[pure cairn]

how to break this whole theme
step 1
change language to anything but English

[humble jay]

yea im aware lol

[pure cairn]

[humble jay]

might fix that next

[pure cairn]

Use better has() selectors

.class:has(>.class)
is better than just
.class:has(.class)

Also, :has() + attribute selectors is a Russian roulette of lag

I'm surprised Mr. Claude didn't tell you about it

Oh wait nvm, I'm not surprised at all

[humble jay]

yea i jus didnt see a better way, i go tot him and say "gmmie selector" and he ping pongs from "ok here, wait no, ok here, wait no"

[humble jay]

ah w the > 1 down things ima try, thx

[pure cairn]

I gave it a quick look
this is a hot mess

[humble jay]

is it?

i mean turn off line wrap

i tried to organize, also if u collapse level 3 its kinda neater

ok i did the things for the pins and put > on everything and used >svg so its less specific

but it still kinda hitches, might just make it a toggle for the pin icon

my benchmark is holding down a key in the msg box

[humble jay]

oh, also, idk how to fix the lang issue cuz i was gonna use nthchild but if someone has plugins that add icons itll break

[pure cairn]

I reckon you've actually managed to make it worse

Because since css is usually read right to left, it's trying to check if any svg is a direct child of an aria-label

[humble jay]

ic

wish u could bnchmark it

alr well i undid that, thx to winmerge, btu yea ithink :not(:has(>[class^='iconBadge']))::before is the best thing i can do here, that and a toggle

as for th emess, i did try lol

[brazen quartz]

use .iconBadge__9293f

[humble jay]

instead of [class^='iconBadge']?

[brazen quartz]

yes

[humble jay]

ive recived so many mixed opinons on using that or not

[humble jay]

why?

[brazen quartz]

you want to fix the lag ? use .iconBadge__9293f
you want to make it last ? use [class^="iconBadge_"]

[humble jay]

i can isolate the lag pretty easily to the :has

i literally remove those 4 selectors and bam it works perfect again

i use [] on like every other selsecotr but

imatry it

[brazen quartz]

it may not lag if it's a one-time thing, but not with multiple selectors, especially with themes

[humble jay]

yea idk i tried that, same shit

[pure cairn]

yes, but it's laggier

[brazen quartz]

I don't know if browsers optimize it in some way, but you have multiple repeating selectors, maybe that's why

[humble jay]

where, afaik theyre all diff w the :;after

also last time ima post this, lil spammy atp, but this is what ima go w, after removing the pin shit entirely tho

and lol i added the toggle, and even while its off, it still lags

but yea u can easily see it doesnt hitch once u remove the CI_TogglePinIconForPerf sections

[humble jay]

oh ima geniuns, instead of the inbuilt toggle, just a second import url

[gritty silo]

so how do i make my own css

[wintry cape]

There is quickCSS editor you can use to make your own css

To find classnames and other things you have to search for them in devtools or look in this channel or #🎨-css-snippets for snippets

[humble jay]

i did even MORE now

my color choies are prolly bad, im shit at art stuff, but its pretty imo

[sonic mesa]

Does anyone have css for square profile picture but only for one user?
I have tried to do it myself but it's "all or nothing" :(

Either everyone is a square or a circle

[hoary stone]

I believe the ThemeAttributes plugin could help with that

[tranquil whale]

im making a discord theme called artsisian discord

[hoary stone]

Okay

What kind of look does it have

[humble jay]

artisanal

[pure cairn]

One must imagine a theme with a chisel stuck in their screen

[clear siren]

art is what

https://github.com/NielsLeenheer/cssDOOM

[vestal field]

evil

[pure cairn]

Love

[cedar estuary]

:b

It features a change between light and dark themes; it's not very well done, but you might like it!

[late lichen]

cant believe the actual first time i played doom was on that

[echo frost]

it doesn't work if i disable javascript though :(

and it's 80% javascript so i don't think the js is just for controls

[pulsar holly]

I was wondering if you could have multiple images with this? trying to figure this out myself but I'm kind of stumped.

[cedar estuary]

When you use a background that automatically changes images, do you use crossfade?

[sour path]

how to change the thing at the top ?

[humble jay]

change, how

its title_edbb22 tho (if ur tryna remove the header, czech this snippet https://discord.com/channels/1015060230222131221/1363870789845258251)

[crimson skiff]

are there any snippets that yall are interested in having

im bored

[robust totem]

you could also use ::before, or make the content an empty string, and set multiple background images

[smoky belfry]

discord but it's slack

actually no

discord but it's skype from back in the day

[crimson skiff]

what

define 'back in the day'

[smoky belfry]

bro doesn't remember skype 💀

[crimson skiff]

how old are you

[smoky belfry]

at the time where my friend told me yeah discord is cool but voice chat is buggy let's go back to skype

[smoky belfry]

i'm only in my mid twenties

[crimson skiff]

specify the year

[crimson skiff]

so like im 18

i dont remember skype at all

i know we used it to talk to my grandparents, but not the chat interface

[smoky belfry]

here's the exact date

the earliest discord message i can find

i used it even earlier but lost the account and lost traces

but yeah skype from 2018 was fire

[pure cairn]

Skype was genuinely good

[whole pecan]

i totally forgot that skype existed, damn

[sour path]

skype was apparently goated (i'm too young to have made use of it though)

[humble jay]

this yellow box is some arbitrary div thing <div aria-hidden="true" style="height: 60px;"></div> like this, but for some reason when this first selector removes it, the page kinda spazzes out when u scroll to the bottom

>div:first-child {display: none;}
>div[style*='height: 60px'] {display: none;}

but the second selector doesnt do this weird bug

wtf is the actaul difference between these selectors cuz iim clueless

this is the weird spazzy thing

[crimson skiff]

don't force the height of anything

[late lichen]

discord scrollers and their weirdness

they dont like having a different travel distance than normal

[humble jay]

just confused why second selector doesnt have that issue, when to me theyre functionally the same

[cunning yoke]

hey, guys can any fix this code?
for the badges

.user-profile-popout,
.user-profile-modal-v2,
.user-profile-sidebar {

  .mask__68edb {
    anchor-name: --profile-tag-anchor;
  }

  .container_ab8609 {
    top: 48px;

    .outer_ab8609 {
      &::before,
      &::after {
        display: none;
      }
    }
  }

  .container__63ed3 {
    .tags__63ed3 {

      > .clickableUsername__63ed3 {
        width: 100%;
      }

      > .container__8061a {
        padding: 4px;
        border-radius: 4px;
        position: fixed;
        right: calc(anchor(--profile-tag-anchor end) + 8px);
        top: calc(anchor(--profile-tag-anchor end) + 8px);
        display: flex;
        flex-wrap: wrap;
      }

      /* Remove Vencord badges */
      .container__8061a img[src*="badges.vencord.dev"],
      .container__8061a *:has(img[src*="badges.vencord.dev"]) {
        display: none !important;
      }

      .container__8061a > *[aria-label*="Contributor"] {
        display: none !important;
      }
    }
  }
}

I tried to fix the code so the badges would appear the way I want, but it’s not working?
It used to work before

[formal kayak]

.user-profile-popout,
.user-profile-modal-v2,
.user-profile-sidebar {

    .mask__68edb {
        anchor-name: --profile-tag-anchor;
    }

    .container_ab8609 {
    top: 48px;

        .outer_ab8609 {
            &::before,
            &::after {
                display: none;
            }
        }
    }

    .usernameAndPronounsRow__26b1f {

        > .clickable__26b1f {
            width: 100%;
        }

        > .container__8061a {
            padding: 4px;
            border-radius: 4px;
            position: fixed;
            right: calc(anchor(--profile-tag-anchor end) + 8px);
            top: calc(anchor(--profile-tag-anchor end) + 8px);
            display: flex;
            flex-wrap: wrap;
        }

        /* Remove Vencord badges */
        .container__8061a img[src*="badges.vencord.dev"],
        .container__8061a *:has(img[src*="badges.vencord.dev"]) {
            display: none !important;
        }

        .container__8061a > *[aria-label*="Contributor"] {
            display: none !important;
        }
    }
}

I don't have the original image, so I'm not sure if it's exactly what you imagined, but it should work.

[wintry cape]

There is no reason to use * and *:has() and important isn't needed either

.user-profile-popout, .user-profile-modal-v2, .user-profile-sidebar {
  .mask__68edb {
    anchor-name: --profile-tag-anchor;
  }

  .usernameAndPronounsRow__26b1f {
    >.clickable__26b1f {
      width: 100%;
    }
    >.container__8061a {
      padding: 4px;
      border-radius: 4px;
      position: fixed;
      right: calc(anchor(--profile-tag-anchor end) + 8px);
      top: calc(anchor(--profile-tag-anchor end) + 8px);
      display: flex;
      flex-wrap: wrap;

      /* Remove Vencord Badges */
      >a[aria-label="Vencord Contributor"],
      >a>img[src^="https://badges.vencord.dev"] {
        display: none;
      }
    }
  }
}

I removed the part below, because i couldn't find it, but that could be me

.container_ab8609 {
    top: 48px;
    .outer_ab8609:before, .outer_ab8609:after {
      display: none;
    }
  }

  .container__63ed3 {
    .tags__63ed3 {
      >.clickableUsername__63ed3 {
        width: 100%;
      }
    }
  }

[humble jay]

this is too low qual to post, but this one is super useful if u use reduce motion, cuz for whaever reason, msg hover highlight is tied to that setting and withotu the hover its kinda impossible to tell which msg ur on when ur tryna right click smth

[id^=chat-messages]:hover {background-color: var(--message-background-hover);}

[cunning yoke]

@wintry cape
https://pastebin.com/iTPs5bGC
this the full code for the profile Elements

[ember beacon]

Where can I find cool Themes?

[echo frost]

you can look here https://betterdiscord.app/themes or in #🎨-css-snippets

[subtle sedge]

in the future, this channel is for theme development, not general questions. use #🏥-vencord-support-🏥 next time

[crimson mason]

how would i edit a theme to make the text darker because i cannot see it lol im using the nier automata theme one

[ember beacon]

Sorry

[wintry cape]

That doesn't work

[sour path]

thx (didn't remember about it woopsie)

[humble jay]

does there exist like some discord stringtable

so i can get all these labels

so selectors wont break

for other langs

[humble jay]

ok managed to find

https://github.com/imjustprism/discord-intl-keymap/blob/main/key_map.json

this

or by find, i mean someone showed me

the i just search here

just gotta map them all for english to searhc all the ones i need for other langs

[smoky belfry]

Don't do that
Don't use aria label, rely on other ways like the shape of the DOM

[echo frost]

well sometimes the shape of the dom isn't a great way of doing it either

[humble jay]

i cant

[humble jay]

there is no other way

the only identifier was the svg path

[humble jay]

ah yea thats why i didnt use the d= cuz for the ones that are 1 svg, but i need to split with two custom svgs to change the color

ig some ill jus have to do the labels

[humble jay]

also for the hover i have to put the :hover on this div cuz if i move the selctor to the d= itll only hover on the actual svg pixels which is shit

so some stuff is just fried + requires label, cuz nth-child isnt viable

this is also refusing to use :has ig which would work

[tepid carbon]

Why wouldn't :has work?

[plain kelp]

Probably because it's slow af

[tepid carbon]

honestly, not really tho

just gotta be mindful about how you use it

[humble jay]

idk i used it once and i legit felt it, so now im kinda adverse to it

also i see hella anti-:has propaganda

[tepid carbon]

biggest thing i'd say is, don't use it on/with types or wildcards.

[humble jay]

by type do u mean the [123*^$='456'] things

[tepid carbon]

Like, don't do div:has() or *:has()

[humble jay]

ah those broad ones

yea

[tepid carbon]

ideally just regular classes

[clear siren]

and never use :has without > or + etc

a:has(>b) is quite performant

a:has(b) not so

[humble jay]

if there is only one type of item like div does just using .icon_32798 div {} actually matter for performance

[plain kelp]

.icon_32798 div as opposed to what?

[humble jay]

sry that was bad questoin, but like here, there is only one div below the buttonContainer

so does it matter if i actually specifically target buttons_

versus just >div

[plain kelp]

If you do .buttonContainer > div it'll have to look at the parent of every div (and there's a lot) while if you do .buttonContainer > .buttons it'll only check the parent of those with the .buttons class

[humble jay]

oh cuz the right to left shit

ty

[smoky belfry]

has haters can hate me smh

[class^=page] > [class^=container] > [class^=scroller] > [class^=contentSection] > [class^=content] {
    max-width: unset;
    > [class^=heroWrapper] { display: none; }
    > [class^=headingWrapper] { margin-top: unset; }
    > [class^=container] {
        max-width: unset;
        > [class] > [class^=container] > [class^=container] { &:has(> [class^=heroAssetWrapper]) , > [class^=rewardDescriptionContainer] > [class^=textContainer] > [class^=subtitleRow] > [role="button"] { display: none; } }
    }
}

[pure cairn]

I've seen worse

[vague rain]

Anyone know how to change the hex colors of the display status?

[wintry cape]

.accountPopoutButtonWrapper__37e49 >.avatar__37e49 >svg >g >rect {fill: color}

Change color to your color

[vague rain]

thank you!

unfortunately it doesn't work :P

[wintry cape]

Do you mean memberlist or where

It works in your own profile bottom left

Wait, i'll try to make something more global

[vague rain]

just globally, anywhere that particular icon occurs. you can tell me if i put it in the wrong area

[vague rain]

lmao thats what i was about to say

[wintry cape]

That color is not valid, try with # infront of it

[vague rain]

tried that right after, unfortunately only works at the bottom popout

[wintry cape]

Yeah, i made it for that, but i'll try to make it more

[vague rain]

tysm

[wintry cape]

foreignObject[mask="url(#svg-mask-status-dnd)"],
rect[mask="url(#svg-mask-status-dnd)"] {
    fill: purple;
    > [style="background-color: rgb(218, 62, 68);"] {
        background-color: purple !important;
    }
}

Works for bottom profile, memberlist, profile

[vague rain]

thats awesome, thanks a ton

[wintry cape]

I updated it, it works for that aswell now

[vague rain]

ty!

[pure cairn]

Why not just change the variable?

[jade kiln]

It's set as an inline style attribute that gets animated in several places.

[pure cairn]

right, for a second I forgot Discord does not make simple things

[humble jay]

found this variable so i can now piss ppl off in screenshots even more with the correct amount of chat compactedness css --custom-message-padding-vertical-container-compact

[formal kayak]

Looks like you could make an Excel-style theme.

[sonic mesa]

that would be cool

[fallen igloo]

hai sorry for this message but im not so good at css coding i just want to know what i need to modify to chnage the bg only like a png

[humble jay]

https://discord.com/channels/1015060230222131221/1393322038697005196

can try this

works still

[fallen igloo]

tysm but its only the center ?

[humble jay]

looks like it

was just quick search, maybe osmone else has better

[fallen igloo]

oki ty for your answer

[sonic mesa]

https://github.com/nvhhr/discordcss/blob/main/snippets/actuallybasicbackground.theme.css
maybe try this one

[fallen igloo]

yoo ty bro juste sidebar server no fill but omg ty working fine

[verbal quarry]

o dear heavens

i will be getting those higurashi games tho

[fallen igloo]

peak

[clear siren]

looks like it breaks if you have enabled one of the gradients in discord appearance settings

I'll fix that now anyway

[fallen igloo]

u smart ty

[fallen igloo]

do u guys know how it called ? im gonna edit myself

[humble jay]

chatTypingGradientAtBottom__36d07 chatTypingGradientNotAtBottom__36d07

[fallen igloo]

thanks

[fallen igloo]

its not <div class="floatingBars__74017"></div> ?

[humble jay]

no idea

thats just the gradient at the bottom

[fallen igloo]

i tryed this but dosent work

[humble jay]

{display: none !important;}```

[humble jay]

oh u did idk

weird

prolly cuz ur custom theme

i remember it was bugging for me the other day when i tried a cusotm color scheme too

[pure cairn]

.chatGradientBase__36d07

[fallen igloo]

okay its work now wtf ty bro

[fallen igloo]

working now dw ty for ur help also

[humble jay]

yea idk

[pure cairn]

[humble jay]

i have this which makes codeblocks fit max width instead of cutting off halfway when ur screen is kinda wide

[id^='chat-messages-'] {
  [id^='message-content-'] {
    pre {
      max-width: 100%;
      .codeContainer__75297 {
        max-width: 100%;
        /* copy button */
        .codeActions__75297 {
          padding-right: 0.5em;
          align-self: flex-end;
          bottom: 0;
        }
      }
    }
  }
}```

but i also put the copy button on the botright instead of topright so itll alwyas be clickable even for huge codeblocks. is there a way to pin the copy button to the bottom of the screen if u scroll up?

like act as if it were part of the msg box

[scarlet loom]

I have a CSS that brings back the old discord profile, but after a recent discord update, the display name isn't where it's supposed to be. How could I go about fixing this or is the element just stuck to the bio now? (username blocked for privacy fr 🙏)

[pure cairn]

Why even bother censoring your own username if everyone here can click on your pfp and see it anyway

😭

[scarlet loom]

joke

[terse tide]

oops i mean plugin/css

english moment

[tiny wing]

I think this code is broken can anyone help me update it please tia

/**──────────║ Edited Text ║──────────*/
[id*=message-content]>[class*="-timestamp"]>[class*="-hiddenVisually"] {
    clip: unset;
    clip-path: unset;
    width: unset;
    height: unset;
    position: unset;

    font-size: .625rem;
    font-weight: var(--font-weight-normal);
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    &::before {
        content: "✎ edited on - ( ";
    }

    &::after {
        content: " )";
    }
}

.edited_c19a55:not(.message-translate-indicator) {
    display: none;
}

[humble jay]

like this?

or imean is this how its supposed to be

[tiny wing]

Yes and when it is hovered not show all the time

[humble jay]

ok leme trie

[tiny wing]

Thank you

[humble jay]

it doenst have any hover tho

the original

[tiny wing]

Ok no worries if you can get it to work I would be better off

[humble jay]

i tried adding ::hover, idk didnt work

this a cool one tho, if i add the hover later ill lyk

oh also

ill fix th selector one se

/**──────────║ Edited Text ║──────────*/
[id^='message-content'] >[class^='timestamp'] >[class^='hiddenVisually_'] {
  clip: unset;
  clip-path: unset;
  width: unset;
  height: unset;
  position: unset;

  font-size: .625rem;
  font-weight: var(--font-weight-normal);
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  &::before {content: "✎ edited on - (";}
  &::after {content: ")";}
}

.edited_c19a55:not(.message-translate-indicator) {display: none;}```

ok now uses the ^= stuff

@tiny wing

[tiny wing]

Thank you so much it's working how I want it to....

[humble jay]

oh

i think this wym

[humble jay]

ok

/**──────────║ Edited Text ║──────────*/
[id^='chat-messages'] [id^='message-content'] >[class^='timestamp'] {
  [class*='edited_']:not(.message-translate-indicator):not([class^='hiddenVisually_']) {font-size: 0;}
  >.hiddenVisually_b18fe2 {
    clip: unset;
    clip-path: unset;
    width: max-content;
    height: unset;
    margin-top: 1px;

    /* fixes the line wrap issue, but it explodes if its on :hover, */
    /* and idk why & am too stupid to fix, so lmk if u can */
    position: unset;

    &::before {content: '✎ ';}
  }
}

@tiny wing i think this is as good as it can get here

[low lantern]

Hello! sorry if it's been answered before, but I'm just looking for a .css to change the font used across discord to a locally installed one. would anyone be able to help me?

[late lichen]

#app-mount :where(::-webkit-input-placeholder,
  body,
  button,
  input,
  select,
  textarea,
  *) {
  font-family: var(--cf);
}```i think you can just
```css
:root {
--cf: font;
}```

[humble jay]

#🎨-css-snippets message

it's pinned in the snippet channel

[late lichen]

oh, right, i think that ones better cause mine prob changes the entire freaking app

[low lantern]

oh, thanks. is there any support for local fonts?

[humble jay]

no idea

maybe u can import from ur own github

[clear siren]

all local fonts should work fine without doing any import

if you install a new font you must restart discord for it to work

and obviously you have to know the correct font-family name, not always obvious with some fonts

[low lantern]

is there a way to inspect the font metadata?

i got it working! thank you so much!

oh, it doesn't look like cleartype works in discord?

[clear siren]

cleartype breaks in different cases

if you have enabled transparency it breaks always

but css can also break it, like backdrop-filter or any kind of transforms or sometimes position

idk what else

I have also had it break on pretty much stock (now using linux but very much same behavior)

[low lantern]

i wanted to use Helvetica Neue Ultralight, but now i’m realizing how it really exposes the weaknesses of Windows’ font rendering…

i bet it’d look better on Apple hardware…

[formal kayak]

If you have a Windows + Nvidia setup with plenty of specs to spare, there is a simple solution.

[low lantern]

hmm?

[low lantern]

what's that?

[formal kayak]

It's to enable DSR in the Nvidia Control Panel.
If you use FHD, it renders internally at 4K and then downscales to FHD for display, which makes it look quite beautiful.

[low lantern]

oh. well, i bet it does...

but my laptop is 2400x1600.

The next integer scale is 4800x3200.

Way too much...

Besides, the Surface Laptops have weird drivers that might not play nicely with custom resolutions and downsampling.

but thank you for the suggestion.

[formal kayak]

In that case, you'll just have to give up on that method.
I recall that "M plus 1" looked decent even at FHD, so it might be worth giving it a try.

[low lantern]

"M plus 1..."
is that the name of a font?

[formal kayak]

Yes, it's available on Google Fonts. Since it's a font for Japanese, it might be a bit hard to find in search results.