🎨-theme-development

[late lichen]

try changing the padding on the attachment button

[burnt lake]

.form_f75fb0 {
    background-image: url("https://i.imgur.com/n3kumsf.png"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(32, 32, 32, 0.527); 
    border-radius: 10px;
    position: relative;
}


.form_f75fb0::before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}


.form_f75fb0 .textArea__74017 {
    background: transparent !important;
    border: none !important;
    z-index: 2;
    box-sizing: border-box;
}

.form_f75fb0 .markup__75297 {
    z-index: 2;
    color: white;
    font-weight: 500;
}


.form_f75fb0 .placeholder__1b31f {
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
}


.form_f75fb0 * {
    background: transparent !important;
}


.form_f75fb0 button {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

[late lichen]

uhh, i dont think i got the same result(second is edited, what i think its supposed to look like)

[tranquil whale]

A bit

Mainly was looking at profile pop up and qol

And some shenanigans

[river pecan]

make everything fullscreen wide and scrollable

like

uhhh

like the server list and channel navigation was combined by someone

[tranquil whale]

whar

blade did that already

like this

this my current project

[tranquil whale]

better tooltip?

[burnt sky]

:)

[tranquil whale]

nice

[burnt sky]

btw you see my earlier message?

[tranquil whale]

which one

steam theming?

[burnt sky]

yeah

[tranquil whale]

not really me I dont play games as of now

got too adictive

[burnt sky]

you don't say

[tranquil whale]

lol

might do theming for vs code

[tranquil whale]

at least ur not wasting time making shit css snipets no one uses

[burnt sky]

haha

the majority of the theme i put together for discord is all from actual useful snips
just so i could use discord easier on a vertical monitor :)

[tranquil whale]

that looks better than anything I have made

[burnt sky]

works well on a normal monitor aswell

[tranquil whale]

this is tthe best thing I have ever made lol

could potentially do something with the board

or maybe the game pop ups

how do I check class names again I forgot

mika_coffee~1

[tranquil whale]

--custom-widget-max-widget-height: 100vh;
--custom-widget-bar-padding: 12px;
--custom-widget-body-padding: 4px;
--custom-widget-bar-height: 20px;

[echo frost]

that gets rid of steam's character

[burnt sky]

well theres plenty of options an one of the most popular being classic steam library which lets you pick if you want the 2013 or 2015 steam library

[echo frost]

oh whoa

[burnt sky]

hell even 2007 ms office :) if you want to match between windows and a discord version

[echo frost]

what is that

[echo frost]

this

[burnt sky]

https://steambrew.app/

its similar to vencord

and yes theres plugins

[echo frost]

whoa

[burnt sky]

also not sure about vencord but millennium is a signed project https://signpath.org/projects/millennium/

and the steam client does have a reference to millennium in its source code in the live client
though its mostly there to stop millennium errors from reaching valve

[tranquil whale]

holy shit

[lunar bough]

woah finally something cool

space theme is wildddd

[burnt sky]

@lunar bough spaceenergy did have an exact matching discord theme to go with it but all the class updates etc.. and visual refresh just killed development of it

how it looked

[lunar bough]

I see

approved for colored embeds which I have

[gentle wraith]

yo where can i get this theme

[burnt sky]

did you bother reading the full message

[gentle wraith]

my bad sir

i didnt see the message at first

visual refresh killed like most great themes right

[onyx mesa]

looks like midnight at home

[pure cairn]

My favourite theme, noon

[burnt lake]

Can a background wallpaper be applied to form_f75fb0?

[late lichen]

.form_f75fb0 .channelTextArea_f75fb0 {
    background-image: url("https://i.imgur.com/n3kumsf.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(32, 32, 32, 0.527);
    border-radius: 10px;
    position: relative;
} 

.form_f75fb0 .themedBackground__74017 {
    background: transparent !important;
    backdrop-filter: none !important;
}

.form_f75fb0::before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}

.form_f75fb0 .textArea__74017 {
    background: transparent !important;
    border: none !important;
    z-index: 2;
    box-sizing: border-box;
}

.form_f75fb0 .markup__75297 {
    z-index: 2;
    color: white;
    font-weight: 500;
}

.form_f75fb0 .placeholder__1b31f {
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
}


.form_f75fb0 button {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

[burnt lake]

.form_f75fb0 .channelTextArea_f75fb0 {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(32, 32, 32, 0.527);
}

.form_f75fb0 .channelTextArea_f75fb0::before,
.form_f75fb0 .channelTextArea_f75fb0::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: slideShow 16s infinite ease-in-out;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}


.form_f75fb0 .channelTextArea_f75fb0::before {
    background-image: url("https://i.imgur.com/n3kumsf.png");
    animation-delay: 0s;
}


.form_f75fb0 .channelTextArea_f75fb0::after {
    background-image: url("https://i.imgur.com/gEXoBXN.png");
    animation-delay: 8s;
}


@keyframes slideShow {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}


.form_f75fb0 .themedBackground__74017 {
    background: transparent !important;
    backdrop-filter: none !important;
}

.form_f75fb0 .textArea__74017 {
    background: transparent !important;
    border: none !important;
    z-index: 2;
}

.form_f75fb0 .markup__75297 {
    z-index: 2;
    color: white;
    font-weight: 500;
}

.form_f75fb0 .placeholder__1b31f {
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
}

.form_f75fb0 button {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

I'm rather stupid that the buttons disappear on the second slide.

[late lichen]

/* :small_blue_diamond: Drugie zdjęcie */
.form_f75fb0 .channelTextArea_f75fb0::after {
    background-image: url("https://i.imgur.com/gEXoBXN.png");
    animation-delay: 8s;
    z-index: -1; /* added this */
}

[burnt lake]

if it works for you, it doesn't work for me

[late lichen]

did you snipe the rest of the thing?

[burnt lake]

orginal code + your suggest add z-index: -1;

[late lichen]

for me its fine

.form_f75fb0 .channelTextArea_f75fb0 {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(32, 32, 32, 0.527);
}

.form_f75fb0 .channelTextArea_f75fb0::before,
.form_f75fb0 .channelTextArea_f75fb0::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: slideShow 16s infinite ease-in-out;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}


.form_f75fb0 .channelTextArea_f75fb0::before {
    background-image: url("https://i.imgur.com/n3kumsf.png");
    animation-delay: 0s;
}


.form_f75fb0 .channelTextArea_f75fb0::after {
    background-image: url("https://i.imgur.com/gEXoBXN.png");
    animation-delay: 8s;
    z-index: -1;
}


@keyframes slideShow {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}


.form_f75fb0 .themedBackground__74017 {
    background: transparent !important;
    backdrop-filter: none !important;
}

.form_f75fb0 .textArea__74017 {
    background: transparent !important;
    border: none !important;
    z-index: 2;
}

.form_f75fb0 .markup__75297 {
    z-index: 2;
    color: white;
    font-weight: 500;
}

.form_f75fb0 .placeholder__1b31f {
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
}

.form_f75fb0 button {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

[burnt lake]

Hmm

[burnt lake]

I solved the problem with this:

.form_f75fb0 .channelTextArea_f75fb0::before,
.form_f75fb0 .channelTextArea_f75fb0::after {
    z-index: -1; /* oba pseudo-elementy w tle */
}

[late lichen]

i wish the maximize button went like this when maximized

[wintry cape]

Is that from opera?

[late lichen]

yes, thats where i got the thing from

[tranquil whale]

thought on this bar borde

[wintry cape]

Like this?

[late lichen]

yea

[wintry cape]

Can you give the # color you want it to be? Because it is a image

Example: #fff is white.

[late lichen]

#6f1EFA

[wintry cape]

Ok

[late lichen]

why

[wintry cape]

The color

You can't color a image

Wait 2 minutes and i will show you image of the result

For some reason, the left side is cut off, but it works for purple.

The corner issue should be fixed aswell

@late lichen I fixed it

/* The other buttons */
.winButton_c38106 rect,
.winButton_c38106 polygon {
  fill: #6f1EFA;
}
[aria-label=Maximise] svg {/* Blueish: https://i.imgur.com/0J4YAVd.png  */
  background: url("https://i.imgur.com/0J4YAVd.png") center/cover;
  rect {
    display: none;
  }
}

[late lichen]

why is mine so broken

it was the aria-label

[late lichen]

umm, how do i tell you the second one was from my discord

[half crystal]

since this will get me banned in #🎨-css-snippets -
foxy jumpscare

body:has(.message__5126c[data-list-item-id$="22"])::after {
    content: "get foxied";
    position: absolute;
    z-index: 200;
    background: url(https://blade04208.github.io/css/img/fnaf-foxy.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s steps(1, end);

    @starting-style {
        opacity: 1;
    }
}

[echo frost]

i don't think @starting-style is working

[half crystal]

it does work

[echo frost]

oh

wait now it worked

what's the point of the [data-list-item-id$="22"]?

[half crystal]

activate said jumpscare

[echo frost]

yeah but why is it 22

[half crystal]

random

[echo frost]

oh i understand it now

[burnt lake]

and emoji is broke : :

[tranquil whale]

What this do

[half crystal]

five night at freddy

[tranquil whale]

Lol

Will try tmrw

[wintry cape]

It works now?

[flat gull]

how can you change the width of panels__5e434(user/vc panel)?
setting a margin moves some stuff offscreen and padding leaves a background

I want it to only take up the width of the channels, not the serverlist (used to have a snippet but that one broke)

[pure cairn]

.panels__5e434 {
  left: 80px;
  width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) - 1px);
}```

[flat gull]

🙏

[burnt lake]

The solution is this XD

@keyframes wallpaperRotate {
    0%, 33% {
        background-image: url('https://i.imgur.com/gEXoBXN.png');
    }
    34%, 66% {
        background-image: url('https://i.imgur.com/xhZAYR8.jpeg');
    }
    67%, 100% {
        background-image: url('https://i.imgur.com/hnbz4FC.png');
    }
}

.scrollableContainer__74017 {
    background-image: url('https://i.imgur.com/gEXoBXN.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: wallpaperRotate 23s infinite;
}

.form_f75fb0 .placeholder__1b31f {
    z-index: 2;
    color: rgb(255, 255, 255);
}

[late lichen]

umm

[wintry cape]

Why are your buttons not level with each other

That is something in your theme

It should be like this

[late lichen]

too look more like the opera one, the minimize is like that

[wintry cape]

True, but then you need to move only the minimise button lower

[late lichen]

it does that

.winButton_c38106.winButtonMinMax_c38106:nth-child(1) svg rect {
    width: 12px !important;
    x: 0px !important;
    y: 11px !important
}

[wintry cape]

Then why is your maximise button higher

Uh

You should use the aria-label, not the winbutton

[wintry cape]

Use this instead

/* Moves the - svg lower */
[aria-label=Minimise] svg {
  margin-top: 7px;
}

[late lichen]

why, nth-child(1) does that

[wintry cape]

No, you are editing the rect values

[late lichen]

of the minimize

[wintry cape]

You don't need to edit the rect values

Just move the svg a bit lower

[late lichen]

its cause i also change the size of it

[wintry cape]

Ok, but did you replace the maximise button to the right position?

[late lichen]

no, i didnt move it

[late lichen]

you can local resource images?

[echo frost]

#🎨-css-snippets message

[echo frost]

whoa i figured out how to do this again sort of (without :has)

.buttonsInner__5126c:not(:hover)>:is(.separator_f84418~span:not(:nth-last-child(2)), :nth-child(-n+6), .separator_f84418) {
  display: none;
}

it'll only show the first 3 buttons on hover, but that's not too bad

[forest minnow]

is there perchance a reference sheet for every element

[echo frost]

ctrl+shift+i

[forest minnow]

a bit tedious don't you think

is this what I'm supposed to be looking at?

[vestal field]

nobody is maintaining a reference sheet for every element 😭

[forest minnow]

damn

anything about this btw?

changed the css to fit the docs from betterdiscord

[echo frost]

main-color isn't a thing
and background-color will only change the background color of body

[echo frost]

what are you expecting

[forest minnow]

i was hoping someone had something stored away

[forest minnow]

main-color was copied from another theme i had installed

[echo frost]

yeah and what are you expecting "something" to be

[forest minnow]

a reference sheet

[echo frost]

it's a bad reference sheet if it told you to do main-color and not --main-color

[burnt sky]

its probably there to be used as a var()

[forest minnow]

var()?

[echo frost]

it needs to have -- to be a var

variable

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var

[forest minnow]

i know what a variable is; haven't heard of uit used in css

[forest minnow]

i see

[echo frost]

you're using variables here

[forest minnow]

so that's what those are

alright, here's what i've got now

[echo frost]

--main-color doesn't exist

[forest minnow]

hm

[echo frost]

it might be a variable for a theme

[forest minnow]

ah

[echo frost]

what are you wanting to do

[forest minnow]

yeah i've been trying to use the variables from another theme i installed

[forest minnow]

text color

just message content for now

[echo frost]

:root {
  --custom-theme-text-color: #ff00ff;
  --custom-theme-text-color-amount: 100%;
}```

[forest minnow]

I see

hm

still not giving anything

[echo frost]

I think you're doing something wrong then

is that the only css you have?

[echo frost]

remove the .theme-dark {font-family:...}

and use the font variable

[echo frost]

:root {
    --font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    --font-clan-body: Fraunces, "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-clan-signature: Corinthia, "gg sans", cursive, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display-marketing-header: "ABC Ginto Nord Discord", "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

but that should work if it's your only css

@forest minnow ^

[forest minnow]

figured out why it wasn't working; turned out i was editing the wrong file lmao

thanks for the help!

[forest minnow]

where'd you find these variables btw?

is there documentation somewhere?

[echo frost]

in devtools

ctrl+shift+i

[forest minnow]

ok thanks

[echo frost]

in case it's not clear from that screenshot, click --font-primary

then it'll take you to the definition

[tiny wing]

This css stopped working or something is wrong with it I tried the updater site but nothing changed can anyone help plz.

 /**──────────║ Collapsible Emoji Picker ║──────────*/
    .chat_f75fb0 .textArea__74017 {
        margin-right: 45px !important;
        border-radius: 16px;

        +.buttons__74017 {
            right: 3px;
            border-radius: var(--roundness-xs);

            &:hover {
                backdrop-filter: blur(3px);
            }

            &:not(:hover)>:not(:last-child) {
                display: none;
            }

            &:not(:hover)>.separator_aa63ab {
                margin-left: 0;

                &::before {
                    display: none;
                }

                button>div {
                    margin-left: 8px;
                }
            }
        }
    }

[burnt sky]

/* Collapse the chat buttons except when hovering */
[class^=chat_] [class*=textArea_] {
  margin-right: 32px;
  +[class^=buttons_] {
    position: absolute;
    right: 0;
    &:not(:hover)>:not(:has(> [class^=emojiButton] )) {
      display: none;
    }
    &:not(:hover)>[class^=container_] button>div {
      margin-left: 8px;
    }
    >:has(> [class*=emojiButton_]) {
        order: 99;
    }
    >:has(> .app-launcher-entrypoint) {
        order: -1;
    }
  }
}```
try this

[tiny wing]

Thank you it works - anyway to eliminate those :has selectors if not thank you very much

[echo frost]

#🎨-css-snippets message

I'm not sure why that snippet uses :has

[burnt sky]

im not sure why either i just know the snip works

but this snip doesn't seem to make discord lag even though it has :has in it

[echo frost]

it looks like it might always show the emoji picker instead of always showing the right-most button

[echo frost]

if you're not sure, and don't notice a difference to my snippet that doesn't use :has, you maybe should use mine

[tiny wing]

Unfortunately this doesn't work for me but what preshyon sent is

[echo frost]

what

I thought I updated it

I can double check in a few hours

-remind 3h check snippet

!remind 3h check snippet

[sturdy trench]

Alright @echo frost, in 3 hours: check snippet

[burnt sky]

@echo frost it does work just the display: none part makes the icon not be avaliable

[tranquil whale]

!remind 8h tinker with emoji picker

[sturdy trench]

Alright @tranquil whale, in 8 hours: tinker with emoji picker

[sturdy trench]

@echo frost, <t:1762808965:R>: check snippet

[echo frost]

?

it's working fine for me

[echo frost]

It's working correctly for me
Did you apply it correctly?
What exactly isn't working

[tiny wing]

Ok I got it to work some how in my theme one of the options were blocking it....

[burnt sky]

gotta love when you have to get creative with a color to match everything when all you can use in it is color: for a border

[sturdy trench]

@tranquil whale, <t:1762817040:R>: tinker with emoji picker

[tranquil whale]

almost forgot

[echo frost]

still not sure what you mean by this

[burnt sky]

this bit makes it dissappear
also yes same deal even without a theme applied

[echo frost]

that makes all the buttons except the last child disappear

maybe theres another element

[burnt sky]

thats directly from your snippet

[echo frost]

yes

it should maybe be a last-of-type

can you send the html

[tranquil whale]

/* top bar */
.title_c38106 {
padding: 2px 2px;
background: rgba(210, 34, 131, 0.6)/var(--window-colour)/;
backdrop-filter: blur(var(--window-blur)) !important;
width: 1190px;
border-style: ridge;/outset, inset, ridge and groove work well/
border-width: 4px;
border-radius: 12px;
border-color: #d1889f;
position: relative;
z-index: 0;
display: ruby;
}

edit the server name box

[vital echo]

how much is --radius-lg/md/sm

[plain kelp]

Check them in devtools

[vital echo]

tried, i not showing up (or im a noob)

[vital echo]

tysmmmm (how did u find those)

[plain kelp]

Perfectly regular devtools

[vital echo]

[plain kelp]

Select any element, search --radius, it's right there

[pure cairn]

Hover on the var and you'll see the values

[vital echo]

any time i enter something in the search it freezes 😞

[plain kelp]

Yeah that used to happen for me a few weeks ago

[vital echo]

OH DAMNN YESS
I ABSOLUTELY FORGOT ABOUT THIS FEATURE

[plain kelp]

Not sure what changed, it works fine today

[clear siren]

my devtools have also been unbearably slow recently to the point it's barely usable

I'm never updating my css

[crimson skiff]

so true

[pure cairn]

Same

[onyx mesa]

devtools been working fine for me

[clear siren]

idk if it's a vesktop thing

but after ctrlshifti I have to wait like 5 seconds before I can hit the inspector button and the element I want or it'll just not work, clicking anything takes like 7 seconds before the style pane updates

[brazen quartz]

it's a discord thing, likely because of too many vars

[clear siren]

idk it wasn't this bad before I think it became much worse after recent vesktop update with new electron version

[brazen quartz]

I see, I am still on electron 35

[burnt lake]

What was the name of that application that allowed you to change Steam colors, etc.?

[lunar bough]

steambrew

[half crystal]

decky loader for big picture

[burnt lake]

Was there anything similar to Rainmeter but for Steam?

[burnt sky]

steambrew/millennium provides both themes and plugins

[brazen quartz]

use ctrl+shift+i to stop guessing, but .channelTextArea__74017 { border-radius: 0 !important; }

[burnt sky]

me fixing just one icon being brigher also me adding a hover affect to all those icons :)
not sure what other buttons im missing now lol

[tranquil whale]

i need help making a buble effect for containers

[burnt sky]

went even further with it lol the copy button for codeblocks :) on hover changes color

[pure cairn]

What even is that color

[plain kelp]

Brownrange

[burnt sky]

#874823

[tiny wing]

how can I have the channel list in the centre instead of aligned to the left

[brazen quartz]

.name__2ea32 { text-align: center; }

[tiny wing]

Thank you so much do you happen to have the class for the category also

[wintry cape]

/* Channels & Category's centered. */
.wrapperCommon__29444 .mainContent__29444 .name__29444,
.name__2ea32 {
  flex: 1 1 auto;
  text-align: center;
}

Flex is needed for the category name to align center.

[harsh harbor]

aha learnt something new. ik im not involved in this but ty. wasn't aware the flex was needed for categories!

[tiny wing]

Thank you so much

[wintry cape]

Your welcome.

[harsh harbor]

anyone know the class name for this header?

[clear siren]

ctrl shift i, click button in topleft, click element you want to know all about

[onyx mesa]

wtf

[halcyon crypt]

I just drop it here, Discord changed channelAppLauncher_e6e74f to app-launcher-entrypoint, so if you want to hide the "app launcher" button:

.app-launcher-entrypoint{
    display: none !important;
}```

[crisp sluice]

Got one for hiding the nitro gift button?

[pure cairn]

.buttons__74017 > div[aria-disabled="false"] {
  display: none;
}```

[crisp sluice]

Thank

[marble monolith]

they broke the thing I was using to hide this recently and never figured out a new way, anyone got a snippet for that

[sage tusk]

Is this the top bar?

[marble monolith]

yes

[sage tusk]

Do you want to hide the icon and text or just the text

[marble monolith]

icon and text

[sage tusk]

.title_edbb22 { display: none; }

[marble monolith]

thanks!

[sage tusk]

Ofc

[tepid depot]

I can't see this anymore. Has it been removed?

[echo frost]

Is the experiments plugin enabled?

[oak plover]

Most of the tabs got removed, a lot of it was moved to discord’s devtools iirc

There’s still two tabs there though

[echo frost]

experiments is still there for me

[oak plover]

Yeah idk what they’re talking about

[junior drum]

anyone got css to hide the app launcher?

[class*=channelAppLauncher_] {display: none !important;} doesnt work anymore

[brazen quartz]

@junior drum ?

[junior drum]

oh im blind

[lunar bough]

!important isn't needed in it btw

[mystic fjord]

how do i make this transparent

[half crystal]

Oh if it's that then just set your green color to transparent

[mystic fjord]

how

[mystic fjord]

how do you do that

what command

?

[half crystal]

You just replace #009c4a with transparent

[mystic fjord]

i wanna make it GREEN transparent

like tinted green

[half crystal]

Oh ok uh then set it to rgb(0 255 0 / 0.5)

[mystic fjord]

uh

where do i put in the color

[half crystal]

Ok um @mystic fjord
Grab your original color and throw it back in
Then, hover over the green square until the color picker pops up
Go to the slider to the right of the rainbow and drag that down

[plain kelp]

#009C4A7F

[mystic fjord]

what do y'all think

better?

which one do yall like the most

ok

@half crystal need your opinion

A, B & C\

which one looks best

[onyx mesa]

holy moly

[mystic fjord]

a b or c

which one

[tranquil whale]

holy

[tranquil whale]

A

[clear siren]

glass gang

[tender hedge]

so real

also using cachy os btw

[crimson skiff]

one day, i will join you linux users

[pure cairn]

Same

[onyx mesa]

why is this corner like this and why can i not fix it

[pure cairn]

Maybe the nameplate background corner is like that so you can't change it

[onyx mesa]

no because with the VC thingy on top it's normal

when it's the gaming one the right corner is rounded for some reason

[pure cairn]

That's weird

[lunar bough]

its just discord being discord and forgetting about each section, which in this case is scenario where u have only user tab + activity, I just simply do this to fix

    border-top-left-radius: 0;
    border-top-right-radius: 0;
}```

[onyx mesa]

i did try this myself but top right corner is still not working properly

it also only applies with the name plate applied

[lunar bough]

yea

I have also added in my css

overflow: hidden for .panels__5e434

[onyx mesa]

wait that might actually fix it, let me try it

[lunar bough]

yea like i have my own big css but i have overflow is the key

[lunar bough]

along with the this

[onyx mesa]

yeah the adding overflow has fixed

thanks, this been bothering me for some time

[lunar bough]

yeah same, tbf i noticed it a while ago since it only applied when u dont have those vc, quest, listenalong xd

[lunar bough]

oh and you can do as well border-radius: 0 0 var(--radius-sm) var(--radius-sm); or 0 0 8px 8px, like whatever u prefer

[onyx mesa]

im satisfied as long as that corner is fixed

[lunar bough]

yep

[pliant dove]

Anyone know how to change the new fonts thing that discord implemented recently, been thinking it would be a great idea to update my API to allow edits for that to be edited as well as the old gg sans font

Some of them are just unable to be read, so I want to switch them to my dyslexia friendly comic code font

[pure cairn]

You mean the name styles?

I believe every style has a different class in their element, so you can probably find them by inspecting the name styles popout

[plain kelp]

You can also simply disable the styles in accessibility settings

[vital echo]

how can i get rid of the rounded sides?

already changed every --radius-xx to 0px, and also cant find border-radius for this one

[pure cairn]

You selected the wrong element, go up on the html tree

[errant zenith]

very slight glass effect here :3

[tender hedge]

nice, btw should i share my mac os traffic lights as a snippet?

since the ones ive seen dont work anymore and i had to make my own

[errant zenith]

sure actually

are they gonna even appear tho?

since i dont have the normal buttons anyways

[tender hedge]

?

[errant zenith]

like are they going to work since the normal window controls dont appear anyway

[tender hedge]

if using vesktop and enabling discord titlebar they should

since im hiding my kde plasma titlebar on discord

and using builtin

[errant zenith]

oh yeah youre right

they dont work tho

so no point in having them ig

[tender hedge]

ah

i know the discord titlebar can also be stupid and have something overlayed on the buttons which make them unclickable

[errant zenith]

nah its just hyprland

[tender hedge]

ah

it would still look a bit better than a half empty titlebar

even if the buttons dont work

[errant zenith]

tbf im waiting for the back/forward buttons

theyre gonna nicely fill up the space

and be actually useful for me

for some reason enabling the experiment does nothing

[tender hedge]

for me not as much as i just use the back and forward buttons on my mouse

[tender hedge]

they got rid of it

for some reason

i remember having them without enabling them some time ago

[errant zenith]

i still have it on my windows install

[tender hedge]

huh

[errant zenith]

(that i dont even use that much so its useless)

[tender hedge]

what experiment adds them

[errant zenith]

well at least i did like 2 days ago

[errant zenith]

back forward

[tender hedge]

weird

think they removed them then

atleast on the linux version

maybe it works on the regular version

[errant zenith]

i did this instead for now

[tender hedge]

they work on regular discord with vencord installed

[errant zenith]

huh

interesting

[tender hedge]

just doesnt support builtin titlebar which is why i dont use it'

or it does and i just dont know how to enable it

and vesktop likely doesnt have the arrows because it uses the web version of discord

[chilly knoll]

lumi

[chilly knoll]

also this looks so nice

is it catppuccin

[errant zenith]

yup!

[errant zenith]

yeah

[chilly knoll]

never seen u in this channel before

[chilly knoll]

its making my inner catppuccin obsession resurface

[errant zenith]

mine never went away 😭

[errant zenith]

im here not too often

[chilly knoll]

based, catppuccin is hot afterall

[errant zenith]

truly a color scheme of all time

my whole setup is sort of catppucinnified

can show in a moment

best i could do considering you cant get actual catppuccin stuff anywhere lmfao

[tender hedge]

whats the keyboard

[errant zenith]

steelseries apex 3 tkl lavender

[tender hedge]

ah mines the monsgeek m1 v5 moonlight white

[errant zenith]

oh thats cute af

[chilly knoll]

how is the mic being in front of the screen like that not bothering u, also nicee

[errant zenith]

i usually have the headset on lmao

the mic is not usually there

[chilly knoll]

oh lol

[wispy swan]

I was using this for transparency on windows. It was working fine but after update it just stopped working. any solutions?

[onyx mesa]

my discord has been working too smoothly as of lately, need to add some more :has

[vivid flame]

use devilbros stuff if you want your discord to lag 100% will happen

[pliant dove]

Same thing, yeah.

[pliant dove]

Okay cool, thanks

[pure cairn]

[tiny wing]

Anyone has a working version of this please

/**──────────║ Collapsible Message Actions ║──────────*/
    .buttonsInner__5126c:not(:hover)>[role=button]:not(:has(>svg>[d^="M4 14a2 2 0 1 0 0-4 2 2"]), .dangerous_f7ecac) {
        display: none;
    }

    /**──────────║ Hide Favourite Emoji On Message Bar ║──────────*/
    .popoverReactionHoverBar_f84418 {
        background: none !important;
        border: none !important;
        box-shadow: none !important;

        .hoverBarButton_f84418 {
            background: var(--backgroundfade) !important;
            border-radius: var(--roundness-m);

            &:hover {
                background: var(--background-base-lowest) !important;
                border: 1px solid var(--border-G1);
            }

            &:hover .icon_f84418 {
                transform: none;
            }
        }
    }

    .buttonsInner__5126c>div:not(:last-of-type),
    .buttonsInner__5126c>.hoverBarButton_f84418>div {
        width: 0;
        height: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        transition: min-width 0.15s ease-out,
            width 0.15s ease-out,
            height 0.15s ease-out,
            padding 0.15s ease-out,
            opacity 0.15s ease-out,
            transform .2s cubic-bezier(.16, 1, .3, 1);
    }

    .buttonsInner__5126c:hover>.hoverBarButton_f84418:not(:last-of-type) {
        width: 24px;
        height: 24px;
        min-width: 24px;
        padding: 2px;
        opacity: 1;

        >div {
            width: 20px;
            height: 20px;
            opacity: 1;
        }
    }

    .buttonsInner__5126c:hover>.separator_f84418 {
        width: 1px;
        height: 24px;
        margin: 2px 4px;
        opacity: 1;
    }

[onyx mesa]

what does this do exactly

[pure cairn]

Shows all message buttons only when hovering the last one

Instead of all the time

[tiny wing]

It shrinks this to a single icon upon hovering it, it reveals the entire section

[onyx mesa]

like this one?

@import url('https://raw.githubusercontent.com/moonself/Vencord-Repos/refs/heads/main/Message%20Actions%20Hover');

[pure cairn]

Self plug, approbe

[onyx mesa]

i haven't updated or touched it in a while but it works just fine

[tiny wing]

Yes that is it thank you so much this does my head in when hovering over messages

[pure cairn]

Also thanks for fixing the threads/forum memberlist the other day

[onyx mesa]

took me awhile to notice that it wasn't working on thread pages for some reason

[pure cairn]

[onyx mesa]

made me look at least

[pure cairn]

Yeah np

Glad it works fine now

Until the next hash reroll

[gusty charm]

Is there a way to move this? I am new to this, so I apologize.

[pure cairn]

In that picture, what are you referring to when you say "this"?

The tab title at the center?

[gusty charm]

Yes.

[pure cairn]

Where do you want to move it?

[safe mist]

can i hust remove it?

[clear siren]

.title_edbb22 { display: none; }

[half crystal]

i am doing horrifying things

[river warren]

hello chat! how would i reorder the buttons in the messagebar?

have this old css snippet i made (this gif is old) that compacts the messagebar when not in use

https://cdn.discordapp.com/attachments/1200711002778501151/1389450589561163838/css_part_2.gif?ex=691947b3&is=6917f633&hm=0da9ef028e8d9860283c3112f68d16ec7f85588c8b00f648ac36a7ad9c5ee971&

but the recent discord update places the gift box as the rightmost messagebar button. for reasons i hope are obvious, this is fucking catastrophically terrible for me, especially since my messagebar currently looks like this

that is to say: i want to put the emoji button back as the rightmost button. how?

[echo frost]

you'd use order https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/order

and this makes the message bar buttons collapsible #🎨-css-snippets message

[clear siren]

you might also be interested in the new experiment dev://experiment/2025-09-chat-input-ia-desktop

I like variant 2 best

[chilly knoll]

so i changed the status icons from the default discord one but whenever someone types then stops the status icon is reverted to the default one

anyone know how to fix this? ive been at it for hours and i genuinly cant fix it

[echo frost]

you'd probably need to send your css

[chilly knoll]

!remind 8h send css

[sturdy trench]

Alright @chilly knoll, in 8 hours: send css

[echo frost]

wait what it shouldn't be going back to a normal phone icon when they type
it should have dots when they type

this is in the member list right?

[sturdy trench]

@chilly knoll, <t:1763256646:R>: send css

[chilly knoll]

the first lines was my attempt at this but i just couldnt get it to work properly

[chilly knoll]

after someone stops typing

and yeh for the member list

[half crystal]

wait this is cool

[burnt lake]

Someone is working on CSS optimization, if that's the reason why Discord uses 2-3 GB of RAM.

only

[clear siren]

it isn't

[pure cairn]

css optimisation? what is that?

[onyx mesa]

i dabble into some css optimisation myself

[half crystal]

best optimization for discord:

document.querySelectorAll('link[rel="stylesheet"]').forEach(e => e.remove());

[plain kelp]

Css can be responsible for cpu usage, but not much ram

[burnt lake]

hmm

[half crystal]

chrome inspector memoryleaks and hangs my pc ol

[plain kelp]

Yeah, true

No idea why it does that

[burnt lake]

What does this change?

[wind geyser]

removes all css lol

[burnt lake]

I used it, but it still eats up a lot of RAM, but oh well, never mind.

[wind geyser]

Man what the hell is your titlebar

[half crystal]

no you didnt lol

[burnt lake]

?

[burnt lake]

normal photo, buddy

[onyx mesa]

is discord really the issue when you got brave eating up 8gb of memory

[burnt lake]

yes

[burnt lake]

I have 48GB

[burnt lake]

I'm more concerned about the kick that it eats up so much.

[errant zenith]

it still shouldnt eat that much

[echo frost]

what so you're replacing the typing dots with a phone icon but not the phone icon with your phone icon?

[chilly knoll]

i dont wanna replace the typing dots, I wanna replace the icon after someone stops typing

it basically goes like:
custom status icon > typing dots > stock status icon

[echo frost]

oh like immediately after they stop typing for a bit it doesn't work?

oh

[chilly knoll]

yesyes, it just uses the stock discord icon

[echo frost]

for just a bit?

[echo frost]

you said it happens forever when they stop typing

if it's forever, then just look at the html again

[chilly knoll]

it doesnt always happen forever, sometimes it resets when switching servers or updating the CSS file

[echo frost]

oh
well have you looked at the html just to confirm it doesn't change?
I think it might be funky stuff with masks that I've seen before

I think this is where I saw something similar happen
https://discord.com/channels/1015060230222131221/1238594298115788860

I don't really have time to look at it today

[weak fiber]

is there any css to remove this thing? I can't find anything by searching in this server

it pops up every couple of days

[chilly knoll]

all I know is that its some funky stuff lol

[chilly knoll]

I'll have a look tomorrow

[timber mist]

you can turn off the experiment to get rid of it

it should be called something like "Do Not Disturb Reminder" i think

[weak fiber]

oh perfect thank you!

[timber mist]

[proper obsidian]

i know it's bad practice, but why does*{border-radius:0px;} do absolutely nothing? *{outline:1px solid red;} performs as intended

works as intended with !important. this is so fucking weird

[echo frost]

because * has very low specificity, so if anything is already defining a border-radius, it'll have higher specificty

and 0 is the default border-radius

so anything that's border-radius: unset will look the same as 0

if you do border-radius: 32px; or something, you will notice a difference

you'll notice a difference between the red outline with and without the !important

[blissful ledge]

how do i make this rounded

[brazen quartz]

.panels__5e434 { border-radius: 100px; }

[stray hamlet]

hey, what's the CSS for the avatar decorations in chat?

can't seem to find them, i've made chat avatars bigger so the deco is now desynced

nvm found it

[weak fiber]

is there any css I could use to block specific reactions from appearing on messages?

[pure cairn]

Probably with some :has() and aria-label shenanigans

[brazen quartz]

.reaction__23977 > :is(
    [aria-label^="u6e80,"],
    [aria-label^="pregnant man,"]
) {
    display: none;
}```

[weak fiber]

omg thank you 😭

[echo frost]

whats u6e80

[brazen quartz]

🈵

[echo frost]

oh

[deep lichen]

Hello, how can I shrink the server sidebar and server icons to be thinner ?

[sage tusk]

You can edit this as you want

.guilds__5e434 { width: 60px; .listItem__650eb { right: 5px; .pill_e5445c, .pill__1f388 { left: 5px; } } }

[chilly knoll]

you can put classes inside of a class object?

[pure cairn]

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

how fitting

[sage tusk]

Yes!

[deep lichen]

Thank you!

Also, do you know how to move the user pill to the left (the one that has the pfp, mute, deafen, etc) for example?

I've trying to use the developer tools but no luck

[sage tusk]

Do you mean this?

[deep lichen]

Yes

[sage tusk]

The buttons or the entire thing

[deep lichen]

Entire thing

[pure cairn]

.panels__5e434 {
  left: 80px;
}```
Play around with this

[deep lichen]

Ohh, so I had to use .panels

Thanks you guys, really appreciated

[pure cairn]

[deep lichen]

[chilly knoll]

[blissful ledge]

it doesn't work

[sage tusk]

.panels__5e434 { border-radius: 100px; overflow: hidden !important; }

[onyx mesa]

welcome to nesting

[chilly knoll]

sorry

[onyx mesa]

sorry for what

[onyx mesa]

i fixed my chatbar finally

[sage tusk]

They wanted to make their own radius edits, 100px is unlikely they'll use it so it'll look better for them

[late lichen]

how do i properly setup the padding on this??

-# the last one is the reason im messing with the padding

[pure cairn]

I'd use a margin, not a padding

[late lichen]

i mean, the last one is the effect i want, channels to get blurred under the user area thing

[pure cairn]

thanks for specifying

[late lichen]

but the "margin" on the last channel is different between servers, on one its like 4px and on the other its like 8px

[wraith hound]

hello is there any way to change the background too? not just hiding the server id

[echo frost]

the background of what?

[wraith hound]

i don't really know what the thing exactly called.. this thing
I wanna ask about can u change the bg of the Server id

[echo frost]

the tooltip

possibly, but i need to go to bed

[lofty yew]

is there a way to reorder these? it's playing with my muscle memory

[clear siren]

dev://experiment/2025-09-chat-input-ia-desktop

that experiment is being rolled out, try the different options

there is also a way to reorder them in css if/when the experiment goes away though but right now I recommend trying the above

[lofty yew]

5th one worked, thanks a lot

[mortal veldt]

Um, excuse me, after yesterday's update, this thing is suddenly not transparent anymore, anyone know why?
I am using Discord's CleanVision 7.0.1

[onyx mesa]

class name might have changed

[oak plover]

i thought that was already reverted

[brazen quartz]

guilds got new tooltips specifically for them

[echo frost]

oh nice the animated tooltips are back to normal

those were annoying me a lot

[wintry cape]

.tooltip_c36707 {
  background: transparent;
}

[mortal veldt]

Thanks for trying to help, but it's still the same 🥲

[wintry cape]

Is it?

Let me get the html rq

[wintry cape]

When i add this to my theme it becomes transparent

[echo frost]

wait now they're back to animated??

[pure cairn]

wdym animated?

[echo frost]

there's a slide in anim

[mortal veldt]

Oh hey- The Discord has fixed it :D Still thanks for your help btw

[wintry cape]

Great!

[wraith hound]

Where do i add this

[wintry cape]

In the quick css editor or in your theme

[wraith hound]

Ok I'll try it later thank for the help

[wintry cape]

No problem

[mortal veldt]

Can anyone teach me where to change the text's color?
I can barely see the texts now XD

[brazen quartz]

:root { --channel-text-area-placeholder: #f09 !important; }

[mortal veldt]

Thank you!

[mortal veldt]

May I also ask the way to change the texts in friend's search bar and the texts add friend's search bar's way? 👉👈
I tried use filter to find --text-area-placeholder, then I got a huge lag 🥲

[brazen quartz]

--input-placeholder-text

[mortal veldt]

The texts add friend's search bar's is changed! :D Thank you very much!
But texts in friend's search bar seems to separated elements ;-;

[brazen quartz]

no, it's not

[mortal veldt]

:O
I swear I am not lying
Maybe it's my theme's fault, sorry for the bother.

[chilly knoll]

is it better to fix a theme manually or run it through the class updater

[pure cairn]

Use the class updater first

If it doesn't work, do it manually

[iron smelt]

Agreed

[chilly knoll]

alr thnx

whats the link for it again

[iron smelt]

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

[pure cairn]

And you can also find it here
#theme-support message

For the future

[chilly knoll]

any chance it could be pinned her or theme support

[pure cairn]

I mean, it's the 2nd to last message in that channel

[chilly knoll]

oh yeh

i didnt even notice it was read-only or in my channel list

[pearl temple]

how to fix this from NOT being transparent?

it isn't transparent in a server, but it's transparent when I'm in my DMs

[long zephyr]

is it just me or the themes are not showing on better discord

[errant zenith]

does this look like the better discord support server to you..

[chilly knoll]

@iron smelt why the ❓

[wintry cape]

Open devtools use the select thing and click on the fortnite tab, then look what class has the background and make it transparent

[wraith hound]

does discord change the search bar tooltip? it turns into default one again :/

[brazen quartz]

discord currently has 2 (3 if counting the guild hover one) tooltips - "inbox" and "show members list" buttons have both of them

[wraith hound]

so maybe i just wait til the fix it ?

[brazen quartz]

you theme both if you feel like it

[wraith hound]

it's weird that the search bark thing is different as my theme

:/

[brazen quartz]

which one though

[wraith hound]

this thing tho

[brazen quartz]

they redesigned it, so you have to retheme it

[chilly knoll]

are discord finally adding icons in more places,

like they did with the settings redesign

[half crystal]

👏 we 👏 love 👏 mana! 👏 we 👏 love 👏 mana! 👏 we 👏 love 👏 mana! 👏 we 👏 love 👏 mana!

[pure cairn]

You okay?

[chilly knoll]

doesnt seem like it lol

[cloud jolt]

Rule 12\. Do your own research

Most questions have already been answered. Before asking, read #1257025907625951423 and use Discord's search function to look up keywords related to your question.

Auto-response invoked by the.rabbit.disabler

[velvet pawn]

erm this actually is a support rule so it doesn't apply there

[half crystal]

understand the concept of humor

[velvet pawn]

understand the concept of humor

[half crystal]

understnad the concept of humor

[velvet pawn]

gonna disable your rabbits rq

brb

[half crystal]

please do so

[chilly knoll]

understand the concept of humor

[half crystal]

understand the concept of humor

[hollow badge]

Probably a stupid question and one that's been answered before, but I promise I've searched for it and couldn't find an answer: How do I add some... padding above the the User bar thing so that the channel/DMs don't get cut off abruptly but would look like in the second image? I apologize if it's been answered before!

[smoky belfry]

Probably by adjusting some values properly, my thing to redesign the user area doesn't do that

It's likely smth where you should set a variable to a value instead of manually setting a size to that value

[burnt lake]

How does CSS work to apply images only to this area?

[pure cairn]

background, ::after or ::before pseudo-elements

[burnt lake]

But how do you mark the area at the top of the photo that ends at the intersecting lines?

[pure cairn]

it depends on what those lines are there for

[burnt lake]

Well, let's start with that, because I don't know anything about lines : |

[pure cairn]

is this something you've drawn yourself or were you using the element picker tool?

[burnt lake]

picker tool

[chilly knoll]

what are pseudo elements

[marble monolith]

I made a solution with CSS:

.winButton_c38106 {
  display: none;
}```

[pure cairn]

what were you selecting?

[pure cairn]

isn't there an option in the Vencord settings to use the native window toolbar instead of discord's custom one?

[marble monolith]

I could not for the life of me find it

[burnt lake]

in content__5e434

[pure cairn]

the last one (ignore the fact it says Windows as I'm using that)

[marble monolith]

yeah that's not there for me

[pure cairn]

in the general Vencord settings

that's weird

oh wait

https://github.com/Vendicated/Vencord/pull/3796

[pure cairn]

guess you'll have to wait for it to be merged

[marble monolith]

yea

[pure cairn]

unless it's a Canary bug and it might be reverted

[marble monolith]

at least I found a CSS fix

[pure cairn]

yea as long as it works it's fine

[marble monolith]

yup

[pure cairn]

haven't we had this conversation before?
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements

[chilly knoll]

sir... i can't remember what I ate for dinner yesterday let alone a convo I had in the past

[chilly knoll]

this already sounds confusing lol

[pure cairn]

alright, as you can see from that screenshot it says "subgrid", that's because the element you're selecting is a cell in a grid made by its parent

[pure cairn]

so the lines you see here are the grid's cells borders

now, what cell do you want to apply a background to?

[pure cairn]

alright fair enough

[burnt lake]

as shown in the photo, these 3 sectors

[harsh harbor]

anyone know how i would change the background color to the folders?

[burnt lake]

.folderIconWrapper__48112 {
    background-color: #8d0fbe;
}

basic and probably not the best solution

[harsh harbor]

what about the background color behind the server icons?

[burnt lake]

So what exactly do you want to change?

[harsh harbor]

you see the background behind these server icons? those

[burnt lake]

So you want to change the background of servers or folders?

[harsh harbor]

of the servers now

[burnt lake]

But servers in folders, or all of them?

[harsh harbor]

in folders

[pure cairn]

I'll send something tomorrow because I have already turned my pc off for the day

[burnt lake]

As you can see, there are blue lines, and do you mean that even the color can be the same as in the photo?

[harsh harbor]

yes

like the photo

[burnt lake]

.folderGroup__48112 {
    background-color: peru /*change to like color*/
}

[harsh harbor]

this didn't change it

[burnt lake]

search in css to see if you have anything with the class: “folderGroup__48112”

[harsh harbor]

yes

[burnt lake]

this is standard

[harsh harbor]

yes but using the code for it doesn't do anything

[burnt lake]

its work

https://cdn.discordapp.com/emojis/955951422917181530.webp?size=512&name=Hmm

[harsh harbor]

its not working

[burnt lake]

do you use this?

@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");

[harsh harbor]

no

[burnt lake]

try

[harsh harbor]

that did not fix it

[burnt lake]

https://cdn.discordapp.com/emojis/921212778855948308.gif?size=512&animated=true&name=hmm_leave i don't know

[harsh harbor]

fixed it with this:

.isExpanded__48112 .folderGroupBackground__48112 {
    background-color: #000;
}```

[burnt lake]

It's strange because, for example, it didn't remove any color from mine.

XD

[harsh harbor]

weird css moment

[burnt lake]

Is it possible to render the entire Discord CSS?

[harsh harbor]

anyone know how i would go about changing this gradient to be a solid black background

[brazen quartz]

.pulseGradient__11664 { display: none; }

[harsh harbor]

tysm

[echo frost]

wdym by this?
see all of discord's css rules?
there's css files (purple) in the sources tab. top>discord.com>assets (you can also go there from a css rule)

[pure cairn]

now that I look at it, these 3 "sectors" are just the scrollers

cuz since they have to, well, scroll
they need an overflow, which is going above them

if you were to apply overflow: visible to the guilds and dms/channels scrollers and scroll down, you'd see the guilds/dms poking through

[tranquil whale]

thinking of designing a custom font for one of my themes what vibe should I go with

[pure cairn]

Wingdings

[tranquil whale]

new widget

[glad fulcrum]

we have a problem!

[late lichen]

anyone knows a way to detect if the window is maximized without checking the size?

[tranquil whale]

got it too

[noble sleet]

Is there a way to hide specific stickers that are sent in chat?

[floral ether]

Yeah, you can hide a specific sticker by targeting its sticker ID, best way I can think of doing it is like this

[data-id="1039992459209490513"] {
    display: none !important;
}

[noble sleet]

Sounds good, thanks :)
Is there an easy way to get the ID of a sticker?

[floral ether]

You can right click it in the send sticker menu if it's a sticker you can use, but if not, I can only think of inspect element

[burnt lake]

And how, because I want to place images here and animate them so that they match the top bar to create a consistent look. When I get home, I'll show you what I want to connect it to.

[pure cairn]

^

I guess you could set a few ::before pseudo-elements on the scrollers, give them an absolute positioning and then a background-image

Actually, no
Because if you want the images to be outside the scroller's container you'd have to overflow: visible the scrollers, which would make the other elements visible

https://tenor.com/view/essp-enderblitz-galahad-slumber-party-why-isnt-it-possible-gif-25649259

Idk send me what you want to do and I'll see if I can make it work

[chilly knoll]

could u try do this #🎨-theme-development message #🎨-theme-development message

[pure cairn]

Holy necroposting

Are these the paths?

[chilly knoll]

i think so yeh

wait yeh they are

[pure cairn]

.linkTop__2ea32 >.iconContainer__2ea32 {
  &::before {
    z-index: 999;
    width: 20px;
    height: 20px;
    content: "";
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%234e5058' d='M7.25 9A.75.75 0 0 1 8 8.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 3.5a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75' stroke-width='0.7' stroke='%234e5058' /%3E%3C/svg%3E");
  }

  >.icon__2ea32 > path {
    d: path("m13.629 20.472l-.542.916c-.483.816-1.69.816-2.174 0l-.542-.916c-.42-.71-.63-1.066-.968-1.262c-.338-.197-.763-.204-1.613-.219c-1.256-.021-2.043-.098-2.703-.372a5 5 0 0 1-2.706-2.706C2 14.995 2 13.83 2 11.5v-1c0-3.273 0-4.91.737-6.112a5 5 0 0 1 1.65-1.651C5.59 2 7.228 2 10.5 2h3c3.273 0 4.91 0 6.113.737a5 5 0 0 1 1.65 1.65C22 5.59 22 7.228 22 10.5v1c0 2.33 0 3.495-.38 4.413a5 5 0 0 1-2.707 2.706c-.66.274-1.447.35-2.703.372c-.85.015-1.275.022-1.613.219c-.338.196-.548.551-.968 1.262");
  }
}```

gonna make dinner now, bye

[chilly knoll]

would this cause issues (like performance) if i was to do it for like an extra 100 icons (well maybe not 100 but yeh)

[chilly knoll]

enjoy and thnx

[burnt lake]

continuation of the strip, without changing its position, because it is supposed to be a plain background

but I don't know how to paste or split containers and so on

[pure cairn]

I have no idea

https://tenor.com/view/doug-maclean-whiteboard-fa-fo-f-around-find-out-gif-27532870

[pure cairn]

Thanks

[pure cairn]

I am so confused by what you want to do

[burnt lake]

Hmm, once again, I want to make one long belt with wallpaper (images that I animate).

[pure cairn]

Is the wallpaper the same for all the length of the belt?

[burnt lake]

that how the same

I want to extend the belt I already have.

[pure cairn]

.title_c38106 {
  background: none !important;
}```

?

[burnt lake]

No, no,
because I don't know if it's possible to have only half of the area as a background.

[pure cairn]

now that I look at it, where tf is your top bar

[pure cairn]

why is your left area stuck to the top

and why are your input area elements not properly centered, except for the attachment button?

the more I look at it, the more I feel pain

[burnt lake]

because I wanted it to be more convenient for me

[late lichen]

prob forgot to change the padding on it

[static path]

uh

is there a chat to ask questions about quick css or something?

[brazen quartz]

#🎨-theme-development

[pure cairn]

https://tenor.com/view/youre-not-gonna-believe-this-eric-cartman-south-park-s10e7-tsst-gif-20852909

[sour storm]

redoing my theme finally and really want to do something like this (softx) but cant figure it out

anyone have a snippet for these?

[pure cairn]

Absolutely sane

[half crystal]

ℹ️ Notice:
You are talking to Blade0. (Also known as @half crystal, the.rabbit.disabler, Blade04208, Blade02408, BladeZero4208, "hubba bubba", or "Bob" (Formally).)
Blade0 is batshit insane and does not understand the concept of the following words, or any concepts surrounding these words:

Stupid, Pointless, Idiotic, Impractical, Unnecessary, Useless, Insane, Mental Asylum
He will not stop at anything until his predetermined goals have been achieved.
Please take this into account next time you interact with him.

Good day

From the desk of Legal
Rabbit Disabler Industries
Behind You
https://rabbitdisablerindustries.store

[pure cairn]

Nooo, not the Jerryrigeverything knives 😔

[pure cairn]

Looks cool

[half crystal]

we plan to sell blenders soon

[pure cairn]

I wonder if it would be easier to check if the server is unread and set an effect on it or just enlarge the unread pill and moving it behind the server icon

[iron smelt]

Wtf is the 9000?

[half crystal]

rabbit neutraliser
do not tell

[pure cairn]

Aight, there's no class for unread servers, so unread pill it is

[sour storm]

yeah i like it

cant for the life of me figure out how he did it

thus the question

but i like it

[pure cairn]

working on it

[pure cairn]

.folderGuildsList__48112 > .listItem__650eb {
  >.pill_e5445c {
    overflow: visible;
    top: -2px;
    left: 18px;
    width: 44px;
    height: 44px;
    
    >.item__58105 {
      border-radius: 50%;
      left: 3.5px;
      width: inherit;
      height: inherit !important;
      transform: unset !important;
      filter: drop-shadow(0 0 4px white);
    }
  }

  >div:not([class]) {
    border-radius: 50% !important;
    overflow: hidden;

    .icon__6e9f8 {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 6px solid black;
    }
  }
}```
rough sketch, play around with this and find what you like best

maybe tomorrow I'll read the original code and make a better version of this ^

[echo frost]

to do first, you'd need a has I think

oh you already made it

[oak plover]

It bothers me cause I think at one point there was an unread class and then when they switched the server design from the 50px versions to the 48px ones the unread pill height got based on some js nonsense

[sour storm]

this doesnt seem to do anything for me...

[pure cairn]

Weird because it was working on my end

[echo frost]

it wasn't quite working for me either

[sour storm]

my first thought was maybe its because im on macos, but i dont think that really has any effect on anything

how would you format it without the nesting?

[pure cairn]

I'll check later if it still works for me, it would be funny if discord changed classes during the night lmfao

[sour storm]

i think that might be whats fucking it over

fwiw the rest of this theme has literally no nesting at all

no the classes are correct, at least as far as i can tell

[pure cairn]

I don't think the OS has any effect on nesting effectiveness

I don't know honestly, I just woke up

[sour storm]

hmm

i mean if you want to root around in the theme im basing this off, this is the file

its awful

its not organized at all

it probably looks terrible on windows

[pure cairn]

I'll give it a look later

Been busy trying to get something else working

[half crystal]

https://github.com/DiscordStyles/SoftX/blob/main/src/addons/_serverrings.scss

this is the code softx uses

[pure cairn]

Yeah, it's the one I was looking at yesterday evening before going to sleep lol

I don't know scss but at least the properties should be the same as css

[subtle rose]

vsb 1 scam

[cloud jolt]

Done!

softbanned @glass niche

[sour storm]

yay

[late lichen]

try also setting it to this element .members_c8ffbb

[pure cairn]

All separate members have a background applied to them as well

[tidal vapor]

oh

[pure cairn]

Have you managed to get it working?

[tidal vapor]

nope

really janky

lemme send a video if you dont mind

its so weird

it either works halfway or is entirely broken

[pure cairn]

.chatContent_f75fb0 + .container_c8ffbb, /* memberlist */
.content_f75fb0 .container_c8ffbb, /* forum memberlist */
.chatContent_f75fb0 + .membersWrap_c8ffbb, /* forum thread memberlist */
.members_c8ffbb, /* another layer on memberlist */
.member_c8ffbb, /* each member also has a bg */

these are the selectors for that area

you want to set background: none on the last 2

[tidal vapor]

trying everything
im not very good with this

[pure cairn]

could you please send the actual code instead of a screenshot? so that I can tweak and test it without having to copy it manually

thanks

[tidal vapor]

1 sec

here

[pure cairn]

with the image link so I can actually test its transparency, please

[tidal vapor]

background-image: url("https://cdn.discordapp.com/attachments/1415378553066750116/1444657147748155402/still_dope_powerwalk_burning_off_the_calories.png?ex=692ed2d0&is=692d8150&hm=9b1f9fd93b32e5ef4c09876a7ce7327fb7ae5e261ec49b9b753ff3383e41966e&");

this?

[pure cairn]

yes, use blockquotes

so it doesn't render as an embed

[tidal vapor]

how do you do that again?

nevermind

found it

[pure cairn]

yep

alright, do you want the image to be fully visible?

like this

[tidal vapor]

i can just tweak the opacity later

thats good enough

[pure cairn]

/* member */
.membersWrap_c8ffbb:hover::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  display: none !important;
}
.members_c8ffbb {
  --paddingY: 15px;
  position: absolute;
  z-index: 100;
  top: 47%;
  max-height: 80vh;
  overflow-y: auto;
  right: 0%;
  background: none;
  transform: translate(95%, -50%) !important;
  background-image: url("https://cdn.discordapp.com/attachments/1415378553066750116/1444657147748155402/still_dope_powerwalk_burning_off_the_calories.png?ex=692ed2d0&is=692d8150&hm=9b1f9fd93b32e5ef4c09876a7ce7327fb7ae5e261ec49b9b753ff3383e41966e&");
  transition: all 0.35s ease;
  border-radius: 30px;
  height: 82.5vh;
}
.members_c8ffbb:hover {
  transform: translate(0%, -50%) !important;
  height: 82.5vh;
}
/* simply tweak this part with a different background color */
.member_c8ffbb {
  background: none;
}

[tidal vapor]

thanks!!

[pure cairn]

np

[tidal vapor]

ok slight issue

the initial member background is still like there

this thing

its

[pure cairn]

alright

.container_c8ffbb {
  background: none;
}```

[tidal vapor]

still there

[pure cairn]

it's a bit difficult without the full theme

because there's so many things that have a background

[tidal vapor]

yeah i have no idea why they do

[pure cairn]

fixed

[tidal vapor]

o

[pure cairn]

replace your .members_c8ffbb with .membersWrap_c8ffbb

do not replace .member_c8ffbb

[tidal vapor]

hover

wait what

[pure cairn]

wait what indeed, there's no image now

[tidal vapor]

yeah it outright refuses to work now

steamrotting

[pure cairn]

oh yeah

my bad

[tidal vapor]

its ok

[late lichen]

both .members_c8ffbb and .membersWrap_c8ffbb have backgrounds

[pure cairn]

.members_c8ffbb set its background to none

alongside the other stuff

/* member */
.membersWrap_c8ffbb:hover::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  display: none !important;
}
.membersWrap_c8ffbb {
  --paddingY: 15px;
  position: absolute;
  z-index: 100;
  top: 47%;
  max-height: 80vh;
  overflow-y: auto;
  right: 0%;
  background: none;
  transform: translate(95%, -50%) !important;
  background-image: url("https://cdn.discordapp.com/attachments/1415378553066750116/1444657147748155402/still_dope_powerwalk_burning_off_the_calories.png?ex=692ed2d0&is=692d8150&hm=9b1f9fd93b32e5ef4c09876a7ce7327fb7ae5e261ec49b9b753ff3383e41966e&");
  transition: all 0.35s ease;
  border-radius: 30px;
  height: 82.5vh;
}
.membersWrap_c8ffbb:hover {
  transform: translate(0%, -50%) !important;
  height: 82.5vh;
}
.members_c8ffbb {
  background: none;
}
/* simply tweak this part with a different background color */
.member_c8ffbb {
  background: none;
}```

so full code becomes like this

[tidal vapor]

it works flawlessly now!!!

thanksss

[pure cairn]

np

I would not use a discord attachment link since they expire after a while tho

try something like imgur or catbox

[tidal vapor]

swapped it out for a color anyway

[pure cairn]

[tidal vapor]

trying to make it look the same as this

[pure cairn]

liquid glass-ish

[tidal vapor]

yup

looks pretty nice and doesnt get in the way

[pure cairn]

so no colors needed

[tidal vapor]

pretty much yea

[pure cairn]

just a shit ton of backdrop blur

[tidal vapor]

most you can do is just slight tint

[pure cairn]

[tidal vapor]

ok im not sure if this is just a discord thing i can't change but to illustrate it very clearly
i have the border radius set to like 30px, the top is fine but the bottom seems faded for some reason

[tidal vapor]

0 rounding pay attention to the bottom fading out its so weird

[late lichen]

its a mask

/*floatingsidebar*/

nav[class*="guilds"]::-webkit-scrollbar {
  display: none !important;
}

nav[class*="guilds"] {
  --paddingY: 15px;
  position: absolute;
  z-index: 100;
  top: 50%;
  max-height: auto;
  overflow-y: auto;
  transform: translate(-90%, -50%) !important;
  transition: all 0.35s ease;
  border-radius: 35px;
  background-color: rgba(255, 0, 0, 1);
  backdrop-filter: blur(30px);
  padding-top: var(--paddingY);
  padding-bottom: 15px;
  mask: none;
}

nav[class*="guilds"] div {
  transform: scale(0);
}

nav[class*="guilds"]:hover {
  transform: translate(0%, -50%) !important;
  height: auto;
}

nav[class*="guilds"]:hover div {
  transform: scale(100%);
}

[tidal vapor]

thanks

[pure cairn]

It's a mask at the bottom

[tidal vapor]

would it be possible to turn this into a floating sidebar in dms

[languid copper]

might be possible

[tidal vapor]

i need to know the selector for it

[pure cairn]

<aside aria-labelledby="user-profile-sidebar-heading-xxxx">...</aside>

the X's are a placeholder for the user ID so you can just use something like
aside[aria-labelledby^="user-profile-sidebar-heading-"]
as selector

also anyone got an idea why devtools' been laggy asf lately?

[brazen quartz]

tons of vars being displayed all at once

firefox (and maybe chrome, I haven't updated yet) fixed it by hiding unused ones behind a button

[pure cairn]

great

[smoky belfry]

am i the only one to dislike the new server header ?

[errant zenith]

i thought it was just me ngl

[smoky belfry]

always has been

omg i just noticed smth horrible
code blocks when unspoilered keep some ass overlay or smth
if i remove spoilerContent__299eb from the message, it goes away, but idk exactly how tf i'm gonna have to fix it

[atomic plank]

feels more like a theme thing then a vencord thing but can I restore my native linux titlebar and get rid of this one with the stupid buttons in the bar?

[tender hedge]

should be possible with vesktop but idk if its still possible on the desktop client

[echo frost]

Do you have this option?

for linux

[pure cairn]

I think there was a PR for that

[pure cairn]

^

[atomic plank]

Ah cool, I'll check the vencord settings, if it's not there I'll wait for the PR

[sour storm]

how do i change the poll selected color without also changing the not-selected color

just changing the background color of the selected option

ah nevermind

--custom-poll-style-vote-percentage

is the variable that changes just the poll selected color

[tidal vapor]

do you guys know how to get rid of this black gap when somebody's typing in any given channel
its kinda bothersome

[brazen quartz]

.chatGradientBase__36d07 { display: none; }

[tidal vapor]

could it be displayed only if you're backreading so that the indicator and messages dont end up overlapping

[brazen quartz]

it's the reason for existing but it's always there

[tidal vapor]

alr ill just keep it in that case

[tidal vapor]

is there a way to like
make the dm icon stay on top
kinda annoying having a small server list which looks cool but scrolling slightly just makes the dm icon disappear

[brazen quartz]

    --scroller_non-linux-top-padding: 4px;
    --scroller_bg: var(--background-base-lowest);
    --scroller_gap: var(--space-xs);

    gap: 0 !important;

    & > :nth-child(1),
    & > :nth-child(2) {
        background-color: var(--scroller_bg) !important;
        padding-bottom: var(--scroller_gap) !important;
        position: sticky !important;
        z-index: 999 !important;
    }

    /* Home */
    & > :nth-child(1) {
        top: 0 !important;
    }

    /* DMs */
    & > :nth-child(2) {
        margin-bottom: var(--scroller_gap) !important;
        top: calc(
            var(--scroller_non-linux-top-padding) + var(--guildbar-avatar-size) +
                var(--scroller_gap)
        ) !important;
        align-items: center !important;
        /* Hidden when nothing is unread */
        visibility: visible;

        &::before {
            content: "";
            /* Stolen from .guildSeparator__252b6 */
            background-color: var(--app-border-frame);
            border-radius: 1px;
            height: 1px;
            width: 32px;
        }

        &::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            inset-block-start: unset;
            inset-block-end: calc(var(--scroller_gap) * -1);
            height: var(--scroller_gap);
            background-image: linear-gradient(var(--scroller_bg), transparent);
        }
    }

    /* Border */
    & > :nth-child(3) {
        display: none;
    }

    :root:where(.platform-mac, .platform-win) & {
        padding-top: 0 !important;

        & > :nth-child(1) {
            padding-top: var(--scroller_non-linux-top-padding) !important;
        }
    }
}

[tidal vapor]

didn't quite work

hold on lemme send the css i have for the serverlist

[brazen quartz]

works on my machine (tm)

[tidal vapor]

im not sure what's up with that then

[brazen quartz]

how do you even open servers with that

[tidal vapor]

wym

its functional

all you gotta do is hover and click

[tidal vapor]

huh

i think there's some css you have that conflicts with mine

im not sure

[brazen quartz]

it's the only css applied

[tidal vapor]

you hover over to the side and then all you gotta do is keep your cursor there where the servers are located

is it automatically closing once you're out of the hovering margin or something

[brazen quartz]

there's just nothing

[tidal vapor]

does it not show a little bar on the side

[brazen quartz]

no, so diy

[tidal vapor]

alr

[pure cairn]

Huh, why do you have 2 cursors?

[tidal vapor]

silly windows magnifier + obs

[pure cairn]

Funny

And cursed

[half crystal]

Eh it's a good switch to mana components
The invite button really isn't needed tho

[brazen quartz]

these are not the same buttons that are used everywhere else