🎨-theme-development

[echo frost]

what's the problem?

[dreamy osprey]

the slider is not correct

[echo frost]

the first image?
it looks like the second image for me

[dreamy osprey]

compair where the circle is

its right of the toggle instead of below with a green and orange

[dreamy osprey]

dose that clear it up

[echo frost]

so the current one is the first image?

it looks like the second image for me

[dreamy osprey]

the 2nd one is with no theme

[echo frost]

so it's a problem with your theme not discord?

[dreamy osprey]

yes i should have stated that

[echo frost]

ok, then open devtools and see what part of your theme is messing it up

[dreamy osprey]

ok how do i do that on desktop app

[echo frost]

ctrl+shift+i

or you can delete part of your theme until you find what part causes it

[dreamy osprey]

uhhh soo what if amd software has overwirted that key bind rebind amds shit?

[dreamy osprey]

my theme has nearly 300 lines debuging the other way will be much easier

[echo frost]

un bind that

[echo frost]

300 lines isn't that much

if you binary search it

[dreamy osprey]

on another note how dose one go about adding a font

[echo frost]

depends
you might just be able to import something, or you might need to use @font-face https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

[dreamy osprey]

ok ty for pointing me that way

and i can use google fonts with fontface

[echo frost]

google fonts just have an import

[vital echo]

is it possible to bring searchbar from titlebar to memberlist?

[half crystal]

really interesting idea tbh

.chat_f75fb0:has(.members_c8ffbb) {
    .members_c8ffbb {
        margin-top: 54px;
    }

    .search__49676 {
        position: absolute;
        right: 8px;
        bottom: -44px;
    }
}

[vital echo]

holycow thankss ur so cool!!

[delicate grotto]

does anybody has any css for transparent call background?

[half crystal]

wdym transparent? all that would be behind is a --bg-base color

[delicate grotto]

like when you select the voice channel

you see all the users etc in big

[half crystal]

so you want to replace that black with....what?

[delicate grotto]

i want that transparent instead of black

yea

[half crystal]

@delicate grotto really dont see the point of this but

.root_bfe55a, .callContainer_cb9592 {
    background: transparent!important;
}

[delicate grotto]

tysm

[smoky belfry]

I wish we had a tool that could like tell us if a CSS rule doesn't match anything for long enough or smth

[pure cairn]

I usually set it to background-color: red !important

It's easy enough to spot if the selector is working

[echo frost]

could you use a sibling selector on the members list toggle button instead of has

[oak plover]

hm

[half crystal]

work at discord please

[eager heart]

?

[wintry cape]

There was a guy sending scam advertise things

Look logs

[dreamy osprey]

Honest ly if this was the new ui discord went with it would be a +1

[tranquil whale]

i am that 0.000000001 percent that got it before the 1%

[crisp sluice]

Gods I wish this wasn't real.

[onyx mesa]

where my border go between server list and channel list

[onyx mesa]

a temp solution

[pure cairn]

I'm missing the one on the right too

[onyx mesa]

fixed everything

[half crystal]

making dropdown server and channel lists and oh my god what the actual fuck is this code

:has stacking

[gilded radish]

I need some help with hiding this absolute GARBAGE button in the DM list
I tried using

channel__972a0 container_e45859 {display: none;}
link__972a0 {display: none;}

but neither worked

[half crystal]

you're not using dots at the start of your classes
.class looks for the following in html: <element class="class">
class looks for the following: <class>
always hover over your rules to double check what its trying to target

[gilded radish]

ohhh lemme try with the .

nope, didn't work

I think I got the wrong class or summ

[half crystal]

this would be valid syntax, but appears to just delete all dms
you need to be more specifc

.channel__972a0 .container_e45859 {display: none;}
.link__972a0 {display: none;}

[gilded radish]

yea that's the effect on my end as well

[pure cairn]

Or just exclude dms with :not(.dm_classhashidontremember)

[gilded radish]

I didn't know that was a thing

[half crystal]

@gilded radish this is valid

.link__972a0[href="/quest-home"] {
    display: none;
}

[gilded radish]

it worked, thank you!

I need to learn more CSS lmao

[half crystal]

https://developer.mozilla.org/en-US/docs/Web/CSS is the best source for practially everything in current css spec somewhere

[gilded radish]

ty ty

[tranquil whale]

are u turning into obsidian with does mdn docs

[proven echo]

Hey chat, I'm trying to test out changing the font that Discord uses, I downloaded Burbank Big Regular for it, and now I'm confused as to what to actually use for the code?

[iron smelt]

#🎨-css-snippets message

[proven echo]

I'm using that code, but I wanna use a font on my desktop.

I tried "Burbank Big Regular", "BurbankBigRegular-Medium", neither of those work, I've tried it with a TTF file, an OTF file...

Is it only fonts available through Google Fonts that are compatible with Discord?

[half crystal]

wut

[tranquil whale]

nvm

[half crystal]

have any of you heard of a piece of software called copyparty?

[crimson skiff]

copyparty my goat

turns anything into a file storage

[errant zenith]

i like that theme a lot

[pure widget]

Theme developers make anything worse challenge (impossible)

[river pecan]

you sure?

Please someone apply linear gradient to every single thing in css

[echo frost]

* {
  background: linear-gradient(rgba(255, 0, 0, 0.1), rgba(0, 0, 255, 0.1)) !important;
}

[burnt lake]

Does anyone collect the HTML and CSS of the entire Discord via repo? Or something like that, because I'd like to change something, but I don't know what yet.

[wintry cape]

What do you want to change?

[clear siren]

would only be useful for archival purpose, track changes etc

no point otherwise, just ctrl shift i there you have it

[rugged tusk]

anyone have a quickcss where i can use gifs as a background

[clear siren]

any theme that has an image background should work

I have a css just to set a background but it's kinda ass rn because of some discord changes

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

also idk how well it works with other themes if you have any

[onyx mesa]

idk wtf discord is doing but they changed all these buttons from <button> to role=button except for the middle one which is left the same

now i have to have both inside my css for it to work

[pure cairn]

I love discord devs

[clear siren]

disconsistent

[late lichen]

why does my scroll bar refuse to go down more?

nvm, found a fix

[late lichen]

you can "margin" on scrollbars right?

[harsh harbor]

me too, they remind me of myself (in the worst way possible)

[harsh harbor]

try it and find out

[late lichen]

i did, and it works

[harsh harbor]

there's your answer then

[burnt sky]

i find it stupid they redesign the main discord settings but didn't even touch server settings

[oak plover]

possible design though not sure yet

[oak plover]

they'll probably start working on it after they've finalized the design for user settings

[burnt sky]

you doing that in figlet or what ever its called

[oak plover]

figma yeah

[crude mesa]

does anyone have a working collapsing sidebar css snippet? ive been looking and trying for a while. its kinda my fault cuz i had a working snippet but i didnt save my css like a dummy before installing a new OS.

[crimson skiff]

the members list collapsing to a smaller one with only the profiles visible?

i remade that recently to improve performance, i might release it but it is in my snippet stash, i can grab it if necessary

[crude mesa]

no, the channel list collapsing lol. i found smt that works but im using replugged now to use it

might work tho since its just css

channel list sidebar drop down collapse or any other keyword someone might search to find it. it only kicks in after u resize the window for me but im on sway wm on linux

        width: 0;
        min-width: 0;
    }
    .panel__5dec7,
    .wrapper_e131a9,
    .buttons__37e49 {
        opacity: 0;
        pointer-events: none;
    }
    
    /* On hover, expand and reveal */
    .sidebar_c48ade:hover .sidebarList_c48ade {
        width: 200px;
        min-width: 20px;
    }
    .sidebar_c48ade:hover .panel__5dec7,
    .sidebar_c48ade:hover .wrapper_e131a9,
    .sidebar_c48ade:hover .buttons__37e49 {
        opacity: 1;
        pointer-events: auto;
    }```

[pure cairn]

I'm afraid that might be a bit laggy due to all the resizing

[crude mesa]

It is a little but I don't know css and can't fix it

It's nothing crazy though

I just need something like this cuz I put discord in a tall and thin window and I don't need the channel list taking up like 75% of the screen

[echo frost]

what are .panel__5dec7, .wrapper_e131a9, and .buttons__37e49

I think you could just do this

.sidebarList_c48ade {
  will-change: width;
}
.sidebar_c48ade:not(:hover) .sidebarList_c48ade {
  width: 0;
}

and I think adding will-change helps a bit with the lag

[crimson skiff]

yall want this?

literally all there is to it

[plain kelp]

Nice picture of text you've got there

[crimson skiff]

yes

should i also add this to #🎨-css-snippets?
those who are in this screenshot, you werent stalked or anything, i used #👾-core-development message for it

[wintry cape]

Is it possible to recolor the captcha background?

It is white and i can't seem to make it darker or change the color

After you complete a quest

[river pecan]

most likely

[wintry cape]

I can't find a way how to do it

[sage tusk]

Captcha's are iframes so you can't I'm pretty sure

[wintry cape]

Thought so, sad :(

[river pecan]

if iframe got custom classes, we may could

i think

[wintry cape]

It has, but one of them is style="background-color: rgba(255, 255, 255, 0)", so that doesn't make sense

[river pecan]

iframe > some class > div? idk

cant get captcha rn

[sage tusk]

Don't know if the captcha's do though, plus that's just other classes, not the actual iframe itself

[crude mesa]

that works yes

[wintry cape]

The iframe has a whole document in there, you can't edit that

[echo frost]

no, that doesn't work

[river pecan]

😢

[plain kelp]

The iframe is a different universe, outside styles don't apply

[pine needle]

Is there any way to make nameplates active all the time, not just when I hover over them? (especially in dm tab)

[vital echo]

is it possible to change an svg's viewbox from pure css?

[wintry cape]

I was looking into the same thing lol

But discord adds classes when you hover it, so yeah

[wintry cape]

No

[onyx mesa]

i just noticed this and now i can't unsee it

why is this so low rez

[echo frost]

your pfp? there's variables added by styleattributes
apparently i'm using it already

:is([width="40"], [width="49"]).mask__44b0c .avatar__44b0c:not([src^="/assets/"]) {
  content: var(--avatar-url-128);
}```

[onyx mesa]

it's using the 32 one by default

but it looks way more blurry than a 32

[oak plover]

because the image pfp size is actually 28 not 32

[pine needle]

so imposible to make it right? 💀

[crimson skiff]

could intercept the class's styles and apply onto the base

[wintry cape]

Idk if it is impossible, but you probably have to make custom animation to try it

[sage tusk]

Not possible with only css since it adds classes

[echo frost]

no unless you hardcode the nameplate

[pine needle]

hmmm.. thanks

[late lichen]

https://dontasktoask.com/

[eternal ore]

Ok

Lol

[echo frost]

that doesn't mean delete your message and then don't ask
it means ask your actual question

what was your problem?
If i remember right, you were wanting someone to make some css?
what did you want

[wintry cape]

It works, but it needs some more tweaking

My animation is a bit weird and it overrules server role colors now lol

[half crystal]

which experiment enabled the usersettings redesign? cant get it working for the life of me

[pure cairn]

Vee forcefully disabled it

[half crystal]

god-damn it i was gonna do some css to it

[pure cairn]

#👾-core-development message

[wintry cape]

I actually made it work, the animation works and it is only in dm

[pine needle]

lemmesee

[wintry cape]

I can show soon, i am gonna try to add a different color for the other user

[wintry cape]

Btw, do you want the style only for yourself or also for the other user

[pine needle]

should be look the same in member list.
whoever got the nameplate.. it will show active in DM list. (is like i dont need to hover it to)

[half crystal]

what the fuck
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll
you can animate by-scroll??????????? and its based of the animation timeline??????????
every day i find stupider and stupider shit in the css spec

[wintry cape]

It's nothing to do with hovering, it is automatic and infinite animation loop, but do you want it just for you or for everyone else in dm/group dm aswell?

[pine needle]

in dm/group*

[wintry cape]

Ok

But you didn't answer my question

[pine needle]

sent u a dm 🫡

[wintry cape]

I thought of something different

But i can give that a try aswell

[wintry cape]

I don't think you can autoplay a video with css

[brazen quartz]

stupid shit you say ? https://developer.mozilla.org/en-US/docs/Web/CSS/:heading

[echo frost]

:is(h1,h2,h3,hr,h5,h6) 🥺

[stoic fjord]

how do i make this thing the same size as the thing above it

and how do i make this white instead of grey

[stoic fjord]

as im using this rn

and idk how to resize that specific thing

[wintry cape]

/* other options */
    --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */
}

Try to switch this to "off" and see if that makes a difference

[wintry cape]

Change the --text-3 variable color

[plain kelp]

It's stupid, yes, but it's less stupid than implementing those same stupid animations with js

[half crystal]

Only problem is you still have to do that because it's not Baseline

[plain kelp]

It's not baseline yet

[stoic fjord]

alr thx

[echo frost]

this is actually pretty cool

it's not that far off of baseline

[tranquil whale]

modifiying midnight for my friend what css snipets should I use

[crimson skiff]

mine

[tranquil whale]

wat do u mean

[crimson skiff]

https://github.com/NSPC911/themes/blob/main/vencord/MidnightIslandChatStatus.theme.css

https://github.com/NSPC911/themes/blob/main/vencord/midnight.theme.css

[tranquil whale]

not very good

he like crazy ne wanted me to hue rotatae the whole app and slow hue rotate change which looks like shit

this would be like his minimum

[crimson skiff]

fym hue rotate bruh he wants it to be red or smth??

[tranquil whale]

it would look so bad

[crimson skiff]

then why hue rotate?? i dont get it

[tranquil whale]

he loves it it sucks

I made him a theme before bassed of clearvision and he loves it but I hate seeing it

it was called glitchcord

[tranquil whale]

I cant belive some pre dvr shit still works

[half crystal]

made this https://blade0.net/absolute-css/embed.png

[burnt sky]

damn this here is now broken
miss my bell icon already

[half crystal]

FUCK THATS MINE

[burnt sky]

lemme know if you end up fixing it

cause i tried everything i could think of

[half crystal]

send me to the link to the snippet and i will

[burnt sky]

https://github.com/madmaxgrey/Vertical-Spacious-Refresh/blob/main/vencord/QualityofLife.css#L13-L48

[tranquil whale]

Fixed a theme halfway after fucking forever

its so annoying

it edits the nitro themes

but is almost 3000 lines

[onyx mesa]

my discord has been shitting itself, having some weird visual artifacting and freezes

i think it might be a drivers problem but i ain't sure yet

[plain kelp]

Check if your gpu is physically on fire

[onyx mesa]

it started happening after the most recent driver update, might roll back and check if it fixes

[oak plover]

Does the background on channels in the sidebar randomly flash for you

[burnt lake]

how to again hide this bar?

no work: @import url('https://chloecinders.github.io/visual-refresh-compact-title-bar/desktop.css');

[plain kelp]

#1429194559052713994

[onyx mesa]

mostly the the popups would glitch out, like pressing on someone's profile and only a small square of the whole popup would appear

[stoic fjord]

how do i flip this? like everything flipped arround

only for my messages as this is how mine looks rn im trying to make it less confusing

but keeping it as it is for other peoples messages

[brazen quartz]

    display: flex;
    flex-direction: row-reverse;
}```

[onyx mesa]

well i regret updating my discord

[vivid flame]

same

they changed .panels_c48ade to .panels__5e434 and that broke a lot of shit for me

[onyx mesa]

yeah it definitely broke some shit for me

[echo frost]

i think change _c48ade to __5e434 fixes it

[onyx mesa]

oh yeah with the panel you just need to update the classes

.visual-refresh nav[class*="guilds_"] {
    [class*="sidebar_"]:has(&)::after {
        height: 0;
    }
}
.wrapper_ef3116 {
    position: absolute;
    top: -35px;
    height: calc(100vh - -34px);
}
[class^="stack_dbd263 scroller_ef3116"] {
    padding-top: 29px !important;
}

this has completely broken for me, it has something to do with the absolute but i ain't sure what yet

guildbar revert is also broken so i guess there's no point for me to try and fix it right now

[echo frost]

why are you using class^= and using the whole class name

use .

.stack_dbd263.scroller_ef3116

[onyx mesa]

the code is not mine, i don't remember where i got it from

it's suppose to fix the padding for the server list with the revert snippet

[echo frost]

i'd recommend just using the larger guild icons fast follows experiment dev://experiment/2025-04_desktop_refresh_fast_follows

and a few modifications

[sage tusk]

I never noticed a difference with this, was there one?

[echo frost]

whoa actually it doesn't make a difference anymore

except for the darker background

[sage tusk]

I don't think the experiment does much of anything anymore

[vivid flame]

Yeah that solved most of the problems, weird that the class updater doesn't work properly anymore tho

[echo frost]

it probably just needs a bit to update

but usually it's for when all the classes change

but for some reason only this one did

well maybe a couple more, but this is the only one i've noticed

[vivid flame]

it's been broken for quite a bit for me

maybe 2-3 weeks

[onyx mesa]

not the first time they roll out an update and change one class name for no reason

[vivid flame]

I wonder why they do this in the 1st place

I swear these people just do changes for the sake of changing shit

[onyx mesa]

discord devs move in mysterious ways

nobody knows

[vivid flame]

they added these new display name thingies and they don't even show the color unless you hover on it in dms which makes them half useless imo

[sage tusk]

__35e86 > _e6b769 possibly?

I only edit css for it on one div so I can't confirm

[vivid flame]

days like this I wish I never made my own theme

[scenic mantle]

Is the dou8le __ intentional?

[sage tusk]

Yes

[echo frost]

yes

most classes use double underscore now

[scenic mantle]

Alright that fixed it, thank you so much

[last shale]

same

[cinder galleon]

anyone know how to hide the title bar icons?

[sage tusk]

.guildIcon_edbb22 { display: none; }

[prisma lynx]

anyone else notice the font on discord looks a little oversmoothed/smudgy on linux all of a sudden?

probably not, i am the only person who notices these things

[cinder galleon]

ty

[cinder galleon]

anything on this one as well?

[sage tusk]

Uhh

[sage tusk]

.title_edbb22 > svg { display: none; }

[cinder galleon]

tysm

[serene grove]

is there any way to tell when a post is open in a forum channel with the view where it opens next to the channel? I want to change an element only when that's the case

[river igloo]

discord has once again added the obnoxious spacing above the chat bar for me 😔

[prisma lynx]

nvm, my fontconfig was just severely messed up

grayscale > rgba

[neat bay]

hey how do i fix the custom css

@import url('https://chloecinders.github.io/visual-refresh-compact-title-bar/desktop.css');
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");

:root {
    /* Only include this part if you wish to change these variables */
    /* You can change the size but only to be less than 48px, you must change the blob scale too */
    --guildbar-avatar-size: 48px;
    --blob-scale: 48;

    --guildbar-folder-size: var(--guildbar-avatar-size);
    --folder-blob-scale: var(--blob-scale);
}

.visual-refresh section.panels__5e434 {
  left: calc(var(--custom-guild-list-width) + var(--space-xs));
  width: calc(100% - var(--custom-guild-list-width) - var(--space-xs)*2);
  box-sizing: border-box;

  .actionButtons_e131a9 button {
    padding: 0;
  }

  /* GameActivityToggle Fix (delete if you don't use) */
 .container__37e49 {
    padding: var(--space-xxs);
    gap: var(--space-4);
    >.buttons__37e49 {
      gap: 0;
    }
    >.avatarWrapper__37e49 {
      min-width: 32px !important;
      >.avatar__37e49 {
        scale: 0.9;
      }
    }
  }
}
nav.guilds__5e434 {
  margin-bottom: 0 !important;
}
.sidebar__5e434:after {
  display: none;
}
/* BetterFolders fix (delete if you don't use) */
.vc-betterFolders-sidebar~section.panels__5e434 {
  left: calc(var(--custom-guild-list-width)*2  + var(--space-xs));
  width: calc(100% - var(--custom-guild-list-width)*2 - var(--space-xs)*2 ) !important;
}

.visual-refresh .scrollerInner__36d07 {
    padding-bottom: 5px;
}

.visual-refresh .membersWrap_c8ffbb .membersGroup_c8ffbb {
    padding-bottom: 25px;
}

.visual-refresh .button__74017,.buttonContents_e6e74f:not([class*="enabled__67645"]) {
    transform: scale(1.25) !important;
}

.visual-refresh .spriteContainer__04eed {
   transform: scale(1.1) !important;
}```

heres the css

[wintry cape]

What needs fixing exactly?

[sterile rain]

would anyone know how to get this working? it's supposed to reduce the width of the profile bar thing to be roughly the width of the channels

.visual-refresh section.panels_c48ade {
  margin-left: 70px;
  width: calc(100% - var(--space-xs)*2 - 67px) !important;
  .actionButtons_e131a9 button {
    padding: 0;
  }
}
nav.guilds_c48ade {
  margin-bottom: 0 !important;
}```

fyi i didnt make this and i dont know anything abt css

[wintry cape]

The panel class is renamed.
panels_c48ade -> panels__5e434

[neat bay]

well the titlebar needs 2 b fixed

[sterile rain]

thanks
would i be able to find these classes myself so i can manually attempt to fix a couple of the others i have without needing to paste here?

actually nvm i figured it out

its only that that needs changing evidently

[wintry cape]

Doesn't making the panel that small hide your name?

[neat bay]

and the detailed timestamps

[sterile rain]

it does and idk how to fix that but i'm used to it being smaller so

[wintry cape]

Like this?

[sterile rain]

yeah

i fixed it

[wintry cape]

Okay

[cosmic kestrel]

im still learning, do i update that for every instance of _c48ade? any help would be greatly appreciated

or just the panel?

[echo frost]

yes

[cosmic kestrel]

tysm

godsend

it didnt quite fix the direct messages box (not showing dms)

but its still better than before

[velvet crow]

another day, another time discord update breaks my theme

can I get an amen?

[late lichen]

does it change the channel list by any chance?

[gilded radish]

can anyone help me with a starting point for updating this old piece of CSS?

@import url(https://maendisease.github.io/BetterDiscordStuff/css/ChatBubbles.css);

:root {
    --chat-bubble: 1;

    --chat-bubble-background-color: var(--background-secondary);
    --chat-bubble-border-color: var(--background-secondary-alt);
    --chat-bubble-code-background-color: var(--background-secondary-alt);

    --chat-bubble-max-width: 90%;
    --chat-bubble-border-radius: 8px;

    --chat-bubble-box-shadow-h-offset: 0;
    --chat-bubble-box-shadow-v-offset: 4px;
    --chat-bubble-box-shadow-blur: 4px;
    
    --chat-bubble-box-shadow-color-h: 0;
    --chat-bubble-box-shadow-color-s: 0%;
    --chat-bubble-box-shadow-color-l: 0%;
    --chat-bubble-box-shadow-color-a: 0.16;
}

[cosmic kestrel]

did for me

[late lichen]

can i keep it

[wintry cape]

I think i fixed it, but the theme uses alot of class names as is and that can cause the theme to break very quickly.

[neat bay]

wheres it at?

[wintry cape]

I send it soon, i am adding all classes in [] so when discord changes things it doesn't break as quick.

[smoky fog]

[wintry cape]

I removed 1 import url, because i added the css from that url in your theme (That url had the broken css).

[neat bay]

now the buttons r huge :<

[wintry cape]

Uh

Oh indeed, let me see.

Let me find the snippet rq and then you can remove that.

[wintry cape]

[class*="visual-refresh"] [class*="button__"],
[class*="buttonContents_"]:not([class*="enabled__"]) {
  transform: scale(1.25) !important;
}

Remove this from your theme.

[dapper wraith]

When making the user panel shorter, there is this new fade effect that overlaps servers (they used to extend to the bottom of the window)
What would I need to do to remove it?

[echo frost]

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

[late lichen]

didnt notice they also changed the class of the title (idk why i have that text there, i just do)

[atomic plank]

Is there a way to hide this top bar? I was sure I had a quickCSS thing for it from #🎨-css-snippets but it must've stopped working or I removed it from my quick CSS without realizing

Nevermind found it

Plopped it into it's own file cause it's big

[dapper wraith]

Hey sorry to bother you! Do you know what _c48ade updated to?

[echo frost]

.

[dapper wraith]

Ah thanks! I searched for it before asking and couldnt find it

[crimson skiff]

the update broke everything wallahi

[hoary stone]

I just fixed my Midnight theme edit to work with the new Discord changes by running the edit and original main css file through Syndishanx's Update Classes, it seemed to have worked perfectly, I highly recommend it while waiting for official updates from themes you use

[crimson skiff]

some was still messed up

[raven marten]

issue with clear vision overlapping with channel names and such... anyone know a fix?

https://raw.githubusercontent.com/ClearVision/ClearVision-v7/master/ClearVision-v7.theme.css

my quick css

[crimson skiff]

okay, fuck this man, i finally fixed my themes

[echo frost]

there's actually a toggle for it in settings

definitely more reliable than my snippet

[real quarry]

noted

[stoic fjord]

how can i move images, gifs and videos sent by me to this side but keeping it the same for other people

for instance like this

[brazen quartz]

  margin-inline-start: auto;
}```
?

[tranquil whale]

I know blade u gotta fix tabs v2

[mighty radish]

apologies for ghost ping, i resolved the problem

discord changed the stupid css class

_c48ade -> __5e434

[tranquil whale]

yup

[mighty radish]

genuinely infuriating

i have a lot of custom css

every month i need to change stuff

[tranquil whale]

very for blade

[mighty radish]

oh yeah 😭

[tranquil whale]

and I have themes

[mighty radish]

also my message bar is super wide

[mighty radish]

poor you😢

[mighty radish]

dont think there's a fix

might check

[zinc flume]

did anyone fix the css for title bar

[tranquil whale]

send photo

[zinc flume]

wait wrong channel

mb

[tranquil whale]

not sure

[mighty radish]

currently looking

[mighty radish]

its very very very thick

[tranquil whale]

that not bad

[zinc flume]

/* remove title bar */
.trailing_c38106{
    transform: translateY(25px)  translateX(-95px)  !important;
    overflow: visible !important;
    z-index: 9999
}
.visual-refresh {
    --custom-app-top-bar-height: 0px;
    --vr-header-snippet-space: 230px;

    div.chat_f75fb0:not(.threadSidebarOpen_f75fb0),
    main.container__133bf,
    div.chatLayerWrapper__01ae2 {
        & section.container__9293f {
            padding-right: var(--vr-header-snippet-space);
        }
    }
}

i got this but it removes minimize and close buttons

[mighty radish]

its not BAD it used to be better

[zinc flume]

and im one of the 3 people who uses those

[mighty radish]

oh yeah the title bar is brokken too now

i think they changed the css class ill take a look

[zinc flume]

what

what else is broken

[tranquil whale]

a loooooooooooooooooooooooooooooooooooot

[mighty radish]

this used to fully extend to the left

[zinc flume]

oh yea that did also break

[tranquil whale]

gonna take a few hours to fix problems and im already back on one of my themes

[mighty radish]

yay

nice job

[tranquil whale]

?

[zinc flume]

can someone try fix this

@import url('https://chloecinders.github.io/visual-refresh-compact-title-bar/desktop.css');

for the title bar

idk how to code css

[mighty radish]

waow that is pretty sucks that discord is poo poo

[tranquil whale]

I know its fucking shit

[mighty radish]

you're just chaning classnames?

so happy this is a thing

[mighty radish]

i thinkk its just a matter of renaming the classes

[vivid flame]

that link doesn't work because of the ' at the end btw

like to click on it and open it in a browser

[zinc flume]

its not a link

its a import

its a link in a string

[tranquil whale]

it is

[mighty radish]

hes helping you

its a link

[empty gyro]

many hours have been saved by this one feature

[mighty radish]

YES LITERALLY

does anyone know the class name changes for

https://raw.githubusercontent.com/surgedevs/visual-refresh-compact-title-bar/refs/heads/main/desktop.css

[empty gyro]

i can look into it if u want!

[mighty radish]

that would be much appreciated

[vivid flame]

I know I'm just saying, you should be able to get that snippet up and running by just changing all of the _c48ade to __5e434

[mighty radish]

im looking right now

but they seemed to have changed lots

[mighty radish]

WAIT REALLY

let me check

[vivid flame]

I think so

[zinc flume]

yea but i have no idea where to get the class names

[mighty radish]

ill send it in a bit

[mighty radish]

gang you're absolutely right

im just going to make my own file

and import it

[zinc flume]

yes

finally

someone fix this

for a cookie

🍪

[vivid flame]

I really loved that snippet but as time went on I just got used to discord's new ui tbh

[mighty radish]

im too autistic

im chaning it back

till it breaks

then i will learn to accept

[vivid flame]

--custom-app-top-bar-height: 25px; This is the only thing I do besides hiding the server name and server icon too

[zinc flume]

its trash

[vivid flame]

It is

[zinc flume]

like why do i need a whole bar to tell me the server i am in when this exists

[mighty radish]

i put the file here, and did @import

@import "visual-refresh-compact-title-bar.css";

why it no work

[zinc flume]

even if this didnt exist im pretty sure if im in a server id know what it is from the channels

[mighty radish]

might be missing something

[zinc flume]

why arent you just copy pasting the code directly into the css

instead of importing

doesnt that work

[mighty radish]

yes it does

but i want it to be easily viewable

[zinc flume]

you're creating problems that did not exist before

🙏

[mighty radish]

eh

when it works its better

ill send the file for you thoughh

[zinc flume]

quick css rat

frfr

[empty gyro]

got sidetracked

@mighty radish did u fix it or

[mighty radish]

changed the classes

didnt seem to fix

only added padding to the top

[vivid flame]

QuickCSS the best thing

[empty gyro]

prob not the right classes

i'll look into it hol on

gimme ur current snippet

[mighty radish]

it works.. but the bar did not get removed

[mighty radish]

bet

[empty gyro]

ah

gracias

[vivid flame]

https://syndishanx.github.io/Website/Update_Classes.html try dumping it in here

[mighty radish]

omg who made this

is a fucking legend

[vivid flame]

it doesn't work everytime tho

[mighty radish]

na it fixed it

[empty gyro]

wait which bar do u want removed

[empty gyro]

o

[vivid flame]

peak

[mighty radish]

yes

deleting my old css snippet to prevent confusion

[empty gyro]

ok peak i don't have to do CSS today

[mighty radish]

@zinc flume heres your snippet

[mighty radish]

i do have a question

[vivid flame]

Someone at discord will think it's funny and release another visual ui refresh in 6 months, just watch

[mighty radish]

can i make a second css file and @imort it

[mighty radish]

real sigh

@zinc flume

[zinc flume]

i got it

.visual-refresh {
    --vr-header-snippet-top: 0px;
    --vr-header-snippet-server-padding: 16px;
    --vr-header-snippet-space: 230px;
    --vr-header-snippet-button-padding: 0;
    --vr-header-snippet-winbuttons: flex;

    div.chat_f75fb0:not(.threadSidebarOpen_f75fb0),
    main.container__133bf,
    div.chatLayerWrapper__01ae2 {
        & section.container__9293f {
            padding-right: var(--vr-header-snippet-space);
        }
    }

    div.headerBar__8a7fc.overlay__8a7fc {
        padding-right: var(--vr-header-snippet-space);

        & .tab__65d41,
        & .searchBar__1ac1c {
            -webkit-app-region: no-drag;
        }
    }

    div.videoControls_bfe55a div.subtitleContainer__49508 {
        padding-right: calc(var(--vr-header-snippet-space) - 20px);

        & .toolbar__9293f {
            -webkit-app-region: no-drag;
        }
    }

    div.page__5e434 {
        &:not(:has(> div.chat_f75fb0)) {
            anchor-name: --vr-header-snippet;
        }

        & > div.chat_f75fb0 {
            anchor-name: --vr-header-snippet;
        }
    }

    .winButtons_c38106 {
        display: var(--vr-header-snippet-winbuttons);
    }

    div.base__5e434 {
        grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end];

        &:has(div.bar_c38106 > div.trailing_c38106 .updateIconForeground__49676) {
            & div.chat_f75fb0,
            & div.subtitleContainer_f75fb0,
            & main.container__133bf,
            & div.chatLayerWrapper__01ae2 {
                & section.container__9293f {
                    padding-right: calc(var(--vr-header-snippet-space) + 50px);
                }
            }

            & div.videoControls_bfe55a .topControls_bfe55a div.toolbar__9293f {
                margin-right: calc(var(--vr-header-snippet-space) + 30px) !important;
            }
        }

        & > div.content__5e434 {
            z-index: 0;
        }

        & > div.bar_c38106 {
            position: absolute;
            position-anchor: --vr-header-snippet;
            top: var(--vr-header-snippet-top);
            right: anchor(right);
            width: anchor-size(width);
            padding: 0 var(--vr-header-snippet-button-padding) 0 0;

            & > .title_c38106 {
                display: none;
            }
        }

        &:has(> .notice__6e2b9) {
            & > div.bar_c38106 {
                top: anchor(top);
            }
        }

        & div.trailing_c38106 {
            background: none;
            border: none;
            height: var(--custom-channel-header-height);
        }

        &:has(.threadSidebarOpen_f75fb0.threadSidebarFloating_f75fb0) > .bar_c38106 {
            z-index: 0;
        }
    }

    :not(:has(div.page__5e434 > div.chat_f75fb0)) div.base__5e434 > div.bar_c38106 {
        right: 0 !important;
    }

    ul[data-list-id="guildsnav"] > div.itemsContainer_ef3116 > div.stack_dbd263 {
        margin-top: var(--vr-header-snippet-server-padding);
    }

    section.headerBar__80679,
    section.header__0b563 div.toolbar__9293f,
    section.header_c791b2 div.toolbar__9293f,
    section.header_c791b2 div.children__9293f,
    :not(.videoControls_bfe55a) div.topic__6ec1a {
        -webkit-app-region: no-drag;
    }

    .shop__6db1d section.showToolbar__9293f {
        padding-right: var(--vr-header-snippet-space);

        .balanceWidgetMenu__80679 {
            margin-right: 0;
        }
    }

    .div.videoControls_bfe55a .topControls_bfe55a {
        z-index: -1;
    }

    .profileThemedContainer__656be .topRow__34940 {
        align-items: end;
        padding-bottom: 0;

        & .closeAction__34940 {
            -webkit-app-region: no-drag;
        }

        & .memberNameContainer__34940 {
            padding-bottom: 12px;
        }
    }
}

[mighty radish]

yes

i was about to send that

[zinc flume]

who even made https://syndishanx.github.io/Website/Update_Classes.html

unknown legend

[mighty radish]

syndishanx

[empty gyro]

uhhhh

i think so?

[mighty radish]

i thougt so too

[empty gyro]

should be just @directory/file.css

[mighty radish]

but it doesnt work

so im messing it uo

[empty gyro]

yeah idk

i am not a very good CSS person

[mighty radish]

wait @directory?

[empty gyro]

idk man

[mighty radish]

hmmmm

[empty gyro]

that's how u do it on typescript

whenever i need to import like a function from another plugin

i do that

[mighty radish]

a

what i have rn is

@import "C:\Users\Redacted\AppData\Roaming\vesktop\settings\visual-refresh-compact-title-bar.css";

[empty gyro]

hmmm

[mighty radish]

clicking enter opens the file btw

[empty gyro]

do u need to do absolute path?

[mighty radish]

i tried without

didnt work

[empty gyro]

hmmmm

yeah idk gangalang might need to just look at mdn web docs

or whatever its called

[mighty radish]

i already did

sigh

[empty gyro]

https://developer.mozilla.org/en-US/

[empty gyro]

💔

last resort

[mighty radish]

il just paste this thing in there

[empty gyro]

ask ai

[mighty radish]

bet

[empty gyro]

that's always my last resort when i deadass couldn't figure something out

[zinc flume]

wait why doesnt this work

@import url('https://gist.githubusercontent.com/MinerovyLP/d2a7acc9e302800641116bab4728b19f/raw/d6f17e0600fa2959a31cc0bdaa5ec52cea3f91ce/titlebar.css');

can you not import from gists

[mighty radish]

what did you do

[empty gyro]

i think its cuz ur using ' instead of "

[zinc flume]

just upload the code to a gist

[empty gyro]

or does that not matter idk

[mighty radish]

nope

[zinc flume]

the original one used '

[mighty radish]

doesnt matter

[zinc flume]

shouldnt matter

[empty gyro]

gotcha

[mighty radish]

link seems good

[zinc flume]

i tired both

[empty gyro]

stupid question but is the import at the top

[zinc flume]

yes

[empty gyro]

ok just had to make sure lmfao

[mighty radish]

yeah it just doesnt work

i tried it as a file

[zinc flume]

are imports broken maybe

[mighty radish]

just paste it fully

[empty gyro]

i just hit CMD+Q on the quickcss thing thinking it would ONLY close the quickcss window

it closed my entire discord

[zinc flume]

its fucking 200 lines

[mighty radish]

gulp

[mighty radish]

yes

see why i wanted to import

[empty gyro]

https://tenor.com/view/tesla-and-einstein-luma-ai-gif-14475294631445060178

greatest minds

[mighty radish]

HAHAHA

[zinc flume]

yea but trying to fix imports before actually fixing the code

is like sped

[brazen quartz]

github doesn't serve the proper mimetype, use "online themes" tab

[mighty radish]

ooooooooooo

thanks mate

also gang this is the wrong channel @zinc flume

just realized

😭

[zinc flume]

i am aware

[mighty radish]

its cuz someone talked about the class change here

[zinc flume]

but the other channels are dead

[mighty radish]

same

[mighty radish]

hmmm

[zinc flume]

and that fuckass bot that keeps saying read this post

so annoying

[empty gyro]

could just make CSS to hide it

[zinc flume]

dont worry bro we are developing

trusttt

[mighty radish]

good point

[empty gyro]

although my alternative is this:

https://nest.rip/f/Z42aNbeNKU

its just there permanently lol

oh fuck wait

i forgot to update that for the new stupid discord message bar

[mighty radish]

i dont see it

[empty gyro]

that's why it looks off LMFAO

[mighty radish]

HAHA

yeah

same

it looks SHIT

[empty gyro]

https://nest.rip/f/zpm1Xn0AnA

stupid spacing!

i don't even know why they did that to the message bar

there is still that odd spacing, i had some CSS to remove it but lowk accidentally deleted it lolz

https://nest.rip/f/P6t82z10EQ

look at that bro

abysmal

who thought THAT much padding was okay

[brazen quartz]

it's for typing users

[empty gyro]

yeah but

[zinc flume]

can you disable this

[empty gyro]

idk man i wish there was a better way

[zinc flume]

so every channel is always added

[empty gyro]

what if they just had users typing..below

not above

like it used to be

lmfao

[brazen quartz]

then the user area wouldn't be aligned with the chat bar

[empty gyro]

i don't even think that's important tbh

it looked fine without it being aligned to me

maybe it looked off to others idk

[brazen quartz]

it was the most complained about thing in the redesign

[empty gyro]

oh deadass?

i didn't know that

[brazen quartz]

yeah

[empty gyro]

https://nest.rip/f/90HqzjiO6Z

oh my days bruh

now i gotta figure out what CSS is doing that lol

[tranquil whale]

is there a simple snipet I can use to set bg

[full pebble]

no matter what i do i just cant remove box shadow

any fixes?

[stoic fjord]

thx g ur a life saver

[full pebble]

even selecting * and setting box shadow to none doesnt work

[stoic fjord]

how do i move this down to where the blue line is?

current code for the profile thing :

[full pebble]

try negative padding/margin

[stoic fjord]

man im stupid wym

i barely know css

i only know how to edits

[stoic fjord]

il try -1

nope

[full pebble]

use pixels

-1px

[stoic fjord]

ohhh

[full pebble]

0 is when value is like none

[stoic fjord]

nope

does nothin

[full pebble]

literally none of these work

[stoic fjord]

ohhh

'i had that problem

try copying some of my code it should fix that vox

idk which line it was tho

so ur going to need to experiment

[full pebble]

maybe other script is doing this wait

[stoic fjord]

ye

[full pebble]

nope

no mention of 'shadow' nor 'drop' in my code

[stoic fjord]

idk then

but i know i did smth

and it fixed that

[pure cairn]

Iirc it's a pseudo-element

[full pebble]

nav[class^="wrapper_"] {
    margin-bottom: 0 !important;
}

this seems to fix it

but small thing left out

@stoic fjord is this the thing youre trying to get rid of?

/* Don't cover server list with panels */
.visual-refresh section[class^="panels__"] {
    margin-left: var(--custom-guild-list-width);
    width: calc(100% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
}

nav[class^="wrapper_"] {
    margin-bottom: 0 !important;
}

div[class^="content__"]>div[class^="sidebar__"]::after {
    margin: -10px;
}

div[class^="itemsContainer_"]>div[class^="stack_dbd263"] {
    padding-bottom: 4px;
}

should work now

yes i will use ^= because i dont want to go to quickcss to change shit and i wont use import github with some software that auto tracks changes in classes

[echo frost]

is that an old version of my snippet?
#🎨-css-snippets message

[full pebble]

yes im still using it

[echo frost]

why not use the updated one that's fixed

[full pebble]

i had to modify some shit

[full pebble]

idk i just like

[echo frost]

the updated one is much better and actually works

[smoky belfry]

very funni how people's CSS seems to constantly break and my own seems mostly stable unless they specifically touch the area i patch

like my custom user area snippet has worked for so long and barely needed changes
and even when it needed changes it was like adding removing or changing a single line

[stoic fjord]

the line

[full pebble]

div[class^="content__"]>div[class^="sidebar__"]::after {
    margin: -10px;
}

[full pebble]

i fixed it dw

[stoic fjord]

where do i add it in the code

this line as when im in dms it shows through this line and its annoying

aka just moving the user pannel down

this

so like moving the user profile down

so that it doesnt show

its the same in discord servers as it shows the channel names below the profile

[wintry cape]

section[class^="panels_"] {
  bottom: 0;
}

[stoic fjord]

doesnt wanna work

nvm im stupid i was editing a java

not css

mb

[wintry cape]

.visual-refresh section[class^="panels_"] {
  left: calc(var(--custom-guild-list-width) + var(--space-xs));
  width: calc(100% - var(--custom-guild-list-width) - var(--space-xs)*2);
  box-sizing: border-box;

  [class^="actionButtons_"] button {
    padding: 0;
  

  /* GameActivityToggle Fix (delete if you don't use) */
   .container__37e49 {
    padding: var(--space-xxs);
    gap: var(--space-4);
    >.buttons__37e49 {
      gap: 0;
    }
    >.avatarWrapper__37e49 {
      min-width: 32px !important;
      >.avatar__37e49 {
        scale: 0.9;
      }
    }
  } 
}
nav[class*="guilds_"] {
  margin-bottom: 0 !important;
}
[class^="sidebar_"]:after {
  display: none;
}
/* BetterFolders fix (delete if you don't use) */
* .vc-betterFolders-sidebar~section[class^="panels_"] {
  left: calc(var(--custom-guild-list-width)*1.9  + var(--space-xs));
  width: calc(103.4% - var(--custom-guild-list-width)*2 - var(--space-xs)*2 ) !important;

} 

[class^="messageListItem__"][data-is-self="true"] [class^="visualMediaItemContainer_"] {
  margin-inline-start: auto;
}

Updated version with the correct class names.

[onyx mesa]

i need to remove this line at the bottom of the banner

i just can't find how

[wintry cape]

What line

[brazen quartz]

.banner__68edb::before { display: none !important; }

[wintry cape]

[class^="banner__"]:before {
  display: none;
}

[wintry cape]

No need for important and it's better to use brackets to be able to use it longer before it breaks.

[brazen quartz]

don't want my discord to lag, ty

[wintry cape]

How is that lag? It litterly selects the same but more future proof.

[onyx mesa]

ok i think i have fixed everything that discord has broken

still waiting for the vencord tool plugin to be fixed

[low ibex]

is there someway to remove this top bar?

[wintry cape]

Search titlebar in #🎨-css-snippets

[onyx mesa]

there is a snippet in #🎨-css-snippets but it doesn't work rn
use this instead: https://discordapp.com/channels/1015060230222131221/1134844326933954622/1433735055431172171

[wintry cape]

Indeed

[plain kelp]

#1429194559052713994

Got some reports that it's not working on latest update though, gotta look into that

[brazen quartz]

for one rule sure, for a theme it's going to lag very badly; I learned this the hard way, twice

you also have to be more specific for what you want to do in case you're doing something like [class*="container_"] (lol), i.e. [class*="container_"][data-toggleable-component="switch"]

but if you insist, only use _ and not __

[minor panther]

does anyone have a working theme that changes the way this currently looks into how it used to look in the old ui

the css i was using for it broke

also this happened too, so if someone has a fix for it i'd appreciate it

[smoky belfry]

roughly

[minor panther]

can you give me the css for it

[wintry cape]

rue

True*

[smoky belfry]

my snippet is there : https://discord.com/channels/1015060230222131221/1271232889081565317

tho idk if it's up to date

that part of my CSS has become cursed

[loud forum]

idk if this is what ur looking for, but it works
https://discord.com/channels/1015060230222131221/1361443579905445898

[minor panther]

ah

ty

this started happening

[smoky belfry]

here's the non-minified code for it
it has other patches in it such as color and shit, but untangling it will be pain

[minor panther]

is there a fix for it somewhere

[loud forum]

Do you have another snippet active that changes the user area in any way?

[minor panther]

i don't think so

[loud forum]

Did this happen with the snippet I shared or with Juliens?

And did you maybe change the guild list?

[minor panther]

it happened with this #1354331484831354952 message

i thought it would fully work lol

[loud forum]

yeah no, for me it didn't work either xd

That's why I'm using the one I shared now xd

It's this one if you want to use it
https://discord.com/channels/1015060230222131221/1361443579905445898

[minor panther]

which css file should i use from there? the original one gave me the same problem

[loud forum]

I used the snippet at the top

[minor panther]

i just pasted it into quickcss and this happened

[loud forum]

what other snippets do you use?

maybe some of them conflicts

[minor panther]

just checked my css and i didn't find anything that would conflict

[minor panther]

i'll send a screen recording

@loud forum

also this started happening

[burnt sky]

well RIP compact titlebar snip

had to update and remove quite a bit of stuff thank you discord

[minor panther]

fixed it

[minor panther]

still having this problem tho

i deleted the css that was causing it for now

i'll wait for a fix

[onyx mesa]

https://discordapp.com/channels/1015060230222131221/1134844326933954622/1433735055431172171
fixed version for the compact title bar

[burnt sky]

ended up fixing it myself had to make some adjustments for the spacing aswell

[onyx mesa]

what is that

[burnt sky]

no idea lol

its just there

there we go

[stoic fjord]

how do i fix channels being behind the user profile?

[onyx mesa]

it should just adjust it automatically, unless the user panel got an absolute position

[stoic fjord]

i kinda moved my user profile

[mystic kiln]

YESSSSS IT WORKED TY FOR WHOEVER MADE THIS I GIVE YOU MY BLESSINGS

[stoic fjord]

alr i did smth and amma not mess arround

[burnt sky]

i have mine setup like this

[sage tusk]

This is really cool I like this a lot

[late lichen]

the only "cool" thing i have on mine is that the icons dont go full red when crossed

[echo frost]

I've already updated it. use the new updated version

[scenic coral]

Server folders are overlapping and stuff, does anyone know how can I fix this?

[sage tusk]

Are you using oldcord?

[scenic coral]

Yeah Oldcord

[burnt sky]

im sastified with my folders :)

[loud forum]

Did you find one yet?
I'm curious what caused it xd

[minor panther]

yea, @echo frost helped me

[loud forum]

Do you know what the problem was?

[minor panther]

not really lol

[loud forum]

._.

[minor panther]

idk how to fix this tho (for context i want it to be squared and fill in the remaining parts on the left, right and bottom)

not a big issue tho just kinda annoying

[loud forum]

yeah I have the same problem, I already asked @echo frost too, maybe he has a fix for it

[echo frost]

remove the rounded version of the snippet and use the legacy version

[minor panther]

i don't have the rounded one in my css i think

[echo frost]

it could be a conflict with another snippet

[minor panther]

maybe

idrk tho

[echo frost]

if it's the same css as you sent me earlier, it does work fine after removing the rounded one

[tranquil whale]

what is the mic class name got to fix a problem with something elses need to test

[burnt sky]

baahh why does css snippets channel keep saying theres a new post once an while when theres litterly nothing new in there lol

[wind geyser]

thread being made & the message being deleted is my guess

[chilly knoll]

@burnt sky i made status' use filled style

also mobile doesnt look as bad as it used to afaik

[chilly knoll]

nice, pushed the commit for it but forgot to copy paste the CSS file from themes folder

[harsh harbor]

could i have the code pretty please

[chilly knoll]

the code or theme

[harsh harbor]

i mean, what does the theme look like overall

that might help me determine which

[chilly knoll]

i shutdown my laptop but put this in themes page if u wanna see lol
https://vencord.mudaranrhiod.xyz/solar.css

[harsh harbor]

ty ty

[harsh harbor]

holy shit the theme is sick af, ty

[chilly knoll]

[burnt sky]

you can grab it the css from here if you want
https://github.com/madmaxgrey/Vertical-Spacious-Refresh/blob/main/vencord/Colorfull.css#L6-L36

it was but that one is broken and i put my own little change to it compared to it from the snippet channel

[scenic coral]

Ew

[static hemlock]

anyone know how to get rid of black bars at the top?

[late lichen]

thread got deleted

/* replace all display name fonts with a single one*/
[class*="zillaSlab"], /* Tempo */
[class*="cherryBomb"], /* Sakura */
[class*="chicle"], /* Jellybean */
[class*="museoModerno"], /* Modern */
[class*="neoCastel"], /* Medieval */
[class*="pixelify"], /* 8Bit */
[class*="sinistre"] { /* Vampyre */
  font-family: var(--cf) !important; /* use your font here (or font variable) */
}

[crimson skiff]

or you know, you could just turn it off in the accessibility settings

[late lichen]

yes

[harsh harbor]

probably got deleted because there's an easier way in accessibility settings

its pointless giving code to a single click button

[stoic fjord]

how do i remove this stupid yellow border when i stream games or apps

[limber nymph]

@tall grail

[onyx mesa]

discord looking a bit different today

[wintry cape]

Lol what

[pure cairn]

Damn

[tall grail]

Hello, I need someone who can make me a Vencord theme based on this video. Thank you.

[supple tartan]

guys do you know of any other tool to update discord classes apart from this one ? it doesn't seem to work

[chilly knoll]

does anyone know how to change these lottie icons?

ive been trying for ages

[chilly knoll]

this is what i got rn, it replaces the icon but the "gif" text remains, same for the sticker one

.buttons__74017 .buttonWrapper__24af7 g[transform="matrix(0.03999999910593033,0,0,0.03999999910593033,0,0)"] g g g path[fill="rgb(88,101,242)"] {
    d: path("M11.75 6.406c-1.48 0-1.628.157-2.394.157C8.718 6.563 6.802 5 5.845 5S3.77 5.563 3.77 7.188v1.875c.002.492.18 2 .88 1.597c-.827.978-.91 2.119-.899 3.223c-.223.064-.45.137-.671.212c-.684.234-1.41.532-1.737.744a.75.75 0 0 0 .814 1.26c.156-.101.721-.35 1.408-.585l.228-.075c.046.433.161.83.332 1.19l-.024.013c-.41.216-.79.465-1.032.623l-.113.074a.75.75 0 1 0 .814 1.26l.131-.086c.245-.16.559-.365.901-.545q.12-.064.231-.116C6.763 19.475 9.87 20 11.75 20s4.987-.525 6.717-2.148q.11.052.231.116c.342.18.656.385.901.545l.131.086a.75.75 0 0 0 .814-1.26l-.113-.074a13 13 0 0 0-1.032-.623l-.024-.013c.171-.36.286-.757.332-1.19l.228.075c.687.235 1.252.484 1.409.585a.75.75 0 0 0 .813-1.26c-.327-.212-1.053-.51-1.736-.744a16 16 0 0 0-.672-.213c.012-1.104-.072-2.244-.9-3.222c.7.403.88-1.105.881-1.598V7.188C19.73 5.563 18.613 5 17.655 5c-.957 0-2.873 1.563-3.51 1.563c-.767 0-.915-.157-2.395-.157m-.675 9.194c.202-.069.441-.1.675-.1s.473.031.676.1c.1.034.22.088.328.174a.62.62 0 0 1 .246.476c0 .23-.139.39-.246.476s-.229.14-.328.174c-.203.069-.442.1-.676.1s-.473-.031-.675-.1a1.1 1.1 0 0 1-.329-.174a.62.62 0 0 1-.246-.476c0-.23.139-.39.246-.476s.23-.14.329-.174m2.845-3.1c.137-.228.406-.5.81-.5s.674.272.81.5c.142.239.21.527.21.813s-.068.573-.21.811c-.136.229-.406.501-.81.501s-.673-.272-.81-.5a1.6 1.6 0 0 1-.21-.812c0-.286.068-.574.21-.812m-5.96 0c.137-.228.406-.5.81-.5s.674.272.81.5c.142.239.21.527.21.813s-.068.573-.21.811c-.136.229-.406.501-.81.501s-.673-.272-.81-.5a1.6 1.6 0 0 1-.21-.812c0-.286.068-.574.21-.812");
    transform: translate(-12px, -8px);
}

[tall grail]

Can someone put it in a vengeful theme for me?

pls

im poor

I feel sorry

[late lichen]

this removes the texts, idk why you would want that but

.buttons__74017 .buttonWrapper__24af7 g[transform="matrix(0.03999999910593033,0,0,0.03999999910593033,0,0)"] g {
    mask: none;
}

[chilly knoll]

bcuz the gif icon i want has the text, thanks btw

now for the sticker icon

[chilly knoll]

so this works but when you switch servers the icon reverts to stock and only changes back when hovered :/

.buttons__74017 .stickerButton__74017 g[transform="matrix(0.03999999910593033,0,0,0.03999999910593033,0,0)"] g g g path[fill="rgb(88,101,242)"] {
    d: path("m16.5 21.839-.038.008h-.004q-.023.007-.047.01l-.002.001.05-.01zM22 15c-.584 0-1.076 0-1.5.008-.928.016-1.528.069-2.045.237a5 5 0 00-3.21 3.21c-.168.517-.22 1.117-.237 2.045C15 20.924 15 21.416 15 22q.725-.001 1.41-.142l.048-.01h.004l.038-.01a7.01 7.01 0 005.339-5.338q.16-.726.161-1.5M2 12c0 4.714 0 7.071 1.464 8.535C4.93 22 7.286 22 12 22h1.5v-.26c-.001-1.607-.002-2.765.318-3.749q.104-.318.239-.623A5.7 5.7 0 0112 17.75a5.77 5.77 0 01-3.447-1.147.75.75 0 01.894-1.206c.728.54 1.607.853 2.553.853s1.825-.313 2.553-.852a.75.75 0 01.872-.016 6.5 6.5 0 012.566-1.564c.984-.32 2.142-.319 3.75-.318H22V12c0-4.714 0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12m13 0c.552 0 1-.672 1-1.5S15.552 9 15 9s-1 .672-1 1.5.448 1.5 1 1.5m-6 0c.552 0 1-.672 1-1.5S9.552 9 9 9s-1 .672-1 1.5.448 1.5 1 1.5");
    fill-rule: evenodd;
    transform: translate(-12px, -12px);
}

[tall grail]

Can someone put it in a vengeful theme for me?
Image

[iron smelt]

You don’t have to repeat yourself every hour

[tall grail]

okah

[spring pewter]

Just do it yourself??

Just put the url in the css

[tall grail]

I don't know how to do it

[spring pewter]

Open the theme file and read

Just about every theme has instructions

[tall grail]

CSS?

[spring pewter]

Css is what the theme is made of

Aka the file u downloaded or whatever

Open it and inside is the css with instructions

[tall grail]

I don't know anything about all that.

[spring pewter]

Just open the file and read

[tall grail]

open what

[spring pewter]

The theme

U download it as a file

Open the file

[tall grail]

I have no theme

[spring pewter]

Then what vengeful theme are you even talking about

[tall grail]

I want the photo in the theme

[spring pewter]

Ok so download clearvision or basically any other theme and put the url of the image in the css

[tall grail]

Okay

[tall grail]

Thanks you very mutch

[river igloo]

Are there any themes or css snippets that remove the unneeded space above the chat bar and add it back once somebody is typing?

[vestal field]

dawg its like 10px

you dont want your chat jumping up and down every time someone starts and stops typing

[sage tusk]

It would look really weird, I don't think you'd like it

Just like he said

[burnt sky]

thats why i got rid of the typing thing completely and the space that jumps up an down

[onyx mesa]

I just moved mine below

[tiny arrow]

is there a way to customize the taskbar ping circle color?

(windows vesktop)

[sage tusk]

Do you mean these?

[tiny arrow]

yes

[sage tusk]

You'll have to edit the the icon files

[tiny arrow]

oh thats perfect, thank you

[sage tusk]

Ofc, It's in roaming

[tiny arrow]

yea i just searched the filenames with everything

[viscid vault]

Is there any other experiment, that makes it look like this (This experiment doesn't work anymore)

[tiny arrow]

i think vesktop stores the icon files in another location to normal discord?

i cant get vesktop to respond at all to replacing or deleting the icons

ive gotten normal discord to crash by replacing them with read only ones

[smoky belfry]

It doesn't work because Vencord hard disable it

[muted knoll]

/* ================================================================= */
/* ======= < ADD DANGER COLOURS TO DANGEROUS USER ACTIONS > ======= */
/* =============================================================== */
#user-context-close-dm,
#user-context-remove-friend,
#user-context-block {
  color: var(--status-danger)
}

#user-context-close-dm:active,
#user-context-remove-friend:active,
#user-context-block:active {
  background-color: var(--red-500) !important;
  color: var(--white-500) !important;
}

#user-context-close-dm[class*="focused-"],
#user-context-remove-friend[class*="focused-"],
#user-context-block[class*="focused-"] {
  background-color: var(--button-danger-background);
  color: var(--white-500);
}```
Is there a newer version of this snippet 🙏🏻 that works

[burnt sky]

what would be pretty kool if this text in the chatbar would be replaced with people typing

[echo frost]

what would happen if you had text there though

[burnt sky]

the reply would stop until its empty

but gonna assume this would only be possible as a plugin just css won't work

[half crystal]

you could do this with just css

it'd require a :has or 2. but yes

[pure cairn]

Yes

[clear siren]

yeah slightly, negligible difference really

use ^= whenever you can, it's more performant than *= obviously

[pure cairn]

It's negligible when there are only a few attribute selectors, when the whole theme is made of only attribute selectors then stuff starts lagging

[clear siren]

well yeah

[vestal field]

non-negligible

source: trust me

imo for whole themes the performance benefit outweighs the maintenance cost
you can set up auto class updaters that work relatively well

if its just a few snippets you dont want to touch then obviously dont use class selectors

[echo frost]

i'd say it's easier to maintain classnames than class attribute selectors

easier to see where something changed

and you can just run it through the class updater

[echo frost]

and sometimes there's multiple classes that have the same name but not the same hash, and you only want one with a certain hash

[frigid sundial]

will this calc causing any laggy? should be ok right?

/* set user area not overlapping */
.panels__5e434 {
    left: calc(var(--custom-guild-list-width) + var(--custom-panels-spacing));
    width: calc(100% - var(--custom-panels-spacing)* 2 - var(--custom-guild-list-width));
}
.wrapper_ef3116 {
    margin-bottom: 0;
}

.scroller_ef3116 {
    padding-bottom: 1rem;
}

[echo frost]

that will be fine

[rancid haven]

My theme doesnt show up as its supposed to and only shows up on the top bar of the discord app, its meant to engulf the entire app page what do i do to fix this? any theme devs willing to check it out and try and fix it?

[pure cairn]

Try running it through the class updater
https://syndishanx.github.io/Website/Update_Classes.html

If it doesn't work, pray

[rancid haven]

ive tried, it doesnt work

shows up like this

[slim osprey]

How do i make my call background transparent when im in call

[pure cairn]

Can you send the theme file here?

[chilly knoll]

is it possible to replace the path of an svg with 2 paths when the svg only has 1 path to replace

[untold lintel]

does anyone have a css-snippet to make context menu's also follow your nitro theme?

[jovial arrow]

any way to hide the 2FA popup in servers? it shows up where i am most definitely not a mod because of badly designed roles

[pure cairn]

What's the 2fa popup you're talking about?

[pure cairn]

Maybe by combining the two paths into a single one but I'm not sure

[chilly knoll]

i know about that, issue is how would it work for duotone icons

cuz duotone ones have 2 paths, one for the fully opaque bit, another for the transparent bit

[wintry cape]

Try: fill-rule: evenodd;

Channels have the exact same thing

[wintry cape]

Here is a snippet:

.menu_c1e9c4 {
  background: linear-gradient(to bottom left, rgb(58, 70, 141), rgb(20, 32, 112) );
}

[chilly knoll]

was this directed at me

[wintry cape]

Yes

[burnt sky]

neat

[wintry cape]

That is good or bad?

[untold lintel]

nice, sadly it doesn't cover all the ui elements/popups

[wintry cape]

Like?

[untold lintel]

guild search, global search, emoji picker, apps, settings menu, etc

[late lichen]

why does border+gradient do this

[chilly knoll]

ahh, that wont work lol

[chilly knoll]

nitro themes are still inconsistent nice

[untold lintel]

has anyone fixed it?

[wintry cape]

Emoji, Sticker, Gif picker:

.contentWrapper__08434 {
  background: linear-gradient(to bottom left, rgb(58, 70, 141), rgb(20, 32, 112) );
  .unicodeShortcut_b9ee0c {
    background: linear-gradient(to bottom left, rgba(20, 41, 159, .9), rgba(10, 19, 77, .9) );
  }
  .emojiItem_fc7141.emojiItemSelected_fc7141,
  .emojiItem_fc7141.expandCollapseButtonSelected_fc7141,
  .stickerInspected_c6367b .inspectedIndicator_c636,
  .stickerCategoryGeneric__3ad28:hover {
    background-color: rgba(0,0,0,.2);
  }
  .wrapper__4e6ce,
  .categoryItemDefaultCategorySelected_b9ee0c,
  .categoryItemDefaultCategorySelected_b9ee0c:hover,
  .header__8ef02,
  .wrapper__14245,
  .inspector_aeaaeb,
  .firstPartyCategorySelected__3ad28,
  .firstPartyCategorySelected__3ad28:hover,
  .stickerCategoryGenericSelected__3ad28,
  .stickerCategoryGenericSelected__3ad28:hover,
  .container_fed6d3,
  .header_fed6d3 {
    background-color: transparent;
  }
}

[wintry cape]

Ok

[wintry cape]

/* Apps launcher */
.contentWrapper__9c62c {
  background: linear-gradient(to bottom left, rgb(58, 70, 141), rgb(20, 32, 112) );
  .container_cb32c7,
  .clickable__761e5 {
    background-color: transparent;
    border: 2px solid var(--app-border-frame);
  }
}

[wintry cape]

I'll do more later, i am tired now

[pure cairn]

I'm afraid the solution might be using a png of the icon instead

[chilly knoll]

oof

is it possible to replace a path with a full svg? im guessing it doesnt work like that

[half crystal]

i present to you discord hit with a sledgehammer

all of usersettings fits on a single screen lmfao

[pure cairn]

You should put the avatar inside the banner space

[onyx mesa]

couldn't you use the nitro theme vars to make it dynamic

[wintry cape]

Here is some variables

[wintry cape]

/* "Search" bar Server & Dm */
.container__55c99 {
  background: linear-gradient(to bottom left, rgb(58, 70, 141), rgb(20, 32, 112) );
  .queryContainer__55c99 {
    background: linear-gradient(to bottom left, rgb(15, 28, 100), rgb(7, 16, 71) );
  }
}
.searchToken_bd8186 {
  background-color: rgb(58, 70, 141);
}
.button__02a39 {
  background-color: rgb(10, 19, 69);
}
.searchResult__02a39,
.side_aa8da2 .themed_aa8da2.item_aa8da2:active:not(.disabled_aa8da2),
.side_aa8da2 .themed_aa8da2.selected_aa8da2.item_aa8da2,
.side_aa8da2 .themed_aa8da2.selected_aa8da2:hover:not(.disabled_aa8da2),
.topPill_aa8da2 .themed_aa8da2.item_aa8da2:active:not(.disabled_aa8da2),
.topPill_aa8da2 .themed_aa8da2.selected_aa8da2.item_aa8da2,
.topPill_aa8da2 .themed_aa8da2.selected_aa8da2:hover:not(.disabled_aa8da2) {
  background: linear-gradient(to bottom left, rgb(28, 37, 90), rgb(12, 22, 83));
}

/* Tooltip on hover */
.tooltip__4e35b,
.tooltip_c36707 {
  background: linear-gradient(to bottom left, rgb(58, 70, 141), rgb(20, 32, 112) );
  border: 2px solid var(--app-border-frame);
}
.caretIcon__4e35b {
  fill: rgb(22, 41, 150);
}

[onyx mesa]

i don't even own a console

[half crystal]

smart fridge

[onyx mesa]

my discord still be shitting the bed time to time unsure why, if it was my gpu i'd feel like it be not just discord that's fucked up

[spring hill]

If you have a game open that uses social SDK and you authorized the game, then it will appear

[onyx mesa]

that actually makes sense, thank you

[tranquil whale]

u should make these a full css snipet and post it in css snipets

And what does that one do

[wintry cape]

?

Which

[lethal agate]

fire game bro

just tab out and unscreenshare then rescreenshare

should work

[burnt sky]

need a bit of help whats the classname for the scrollbar

[pure cairn]

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar

[burnt sky]

guess its not possible just want to change the color of it

oh nvm got it

im satisfied

[pure cairn]

I think you can use scrollbar-color without the pseudo element

Unless you want to apply the styling to all scrollbars, in which case you have to use the pseudo element to avoid having to specify all the elements you want it to apply to

[tranquil whale]

IDK what to think

[burnt sky]

well going all this color lol

[tranquil whale]

looks good overall

better than what Im working on

[burnt sky]

i mainly started this to just make discord easier on a vertical monitor lol cause of how shit and small the windows were https://github.com/madmaxgrey/Vertical-Spacious-Refresh

[tranquil whale]

what should I make next

[river pecan]

i haven't been tracking what you been doing so far

change how current ui layout is?

[burnt lake]

Can I change the size of this title bar?

I can't find a class that matches what I want to achieve : |

[wintry cape]

There is a snippet in #🎨-css-snippets somewhere i think

[burnt lake]

Because of the mixed CSS, I had to do it this way.

@import url('https://raw.githubusercontent.com/surgedevs/visual-refresh-compact-title-bar/refs/heads/main/desktop.css');

div.toolbar__9293f {
    right: -235px ;
    position: absolute;
}

div.page__5e434 {
  &:not(:has(> div.chat_f75fb0)) {
    anchor-name: --vr-header-snippet;
  }

  & > div.chat_f75fb0 {
    anchor-name: --vr-header-snippet;
  }
}

div.base__5e434 {

  & > div.content__5e434 {
    z-index: 0;
  }

  & > div.bar_c38106 {
    position: absolute;
    position-anchor: --vr-header-snippet;
    top: var(--vr-header-snippet-top);
    right: anchor(right);
    width: anchor-size(width);
    padding: 0 var(--vr-header-snippet-button-padding) 0 0;
  }

}

except that I didn't achieve what I expected : {

[wintry cape]

It's a grid-row doing that

I just can't find it anymore lol

[burnt lake]

I find it just as hard to find something in this

[wintry cape]

But there was a snippet that made the whole topbar gone

[burnt lake]

I want to leave it but move it higher on the bar and channels/server name.

[burnt sky]

you could get into steam theming :)

[brittle iron]

.base__5e434 {
  grid-template-rows: [top] var(--custom-app-top-bar-height) [titleBarEnd] min-content [noticeEnd] 1fr [end];
}

replace var(--custom-app-top-bar-height) with the height you want

that is for shrinking the height of the top bar but i'm not sure if that's exactly what you wanted

[plain kelp]

Or just set that variable to whatever you like

[brittle iron]

or that yeah

[burnt lake]

It's hard to explain, but it's about the size of the belt on the side.

[brittle iron]

you want the servers to go over it..?

[burnt lake]

because the bar remains, but I want to move it to place dm and servers higher up + name server's

[brittle iron]

it's definitely doable, i will mess with the grid in a bit

[wintry cape]

Like this?

[burnt lake]

Yes, a little higher than the server names, level with dm.

[brittle iron]

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

.bar_c38106 {
  grid-column: channelsEnd / end;
}

.sidebar__5e434,
.content__5e434 {
  grid-row: top / end;
}

[burnt lake]

THX MANN!!!

[brittle iron]

np

i had a fair bit of fun with this grid before so it wasn't that hard

[burnt lake]

What are the dimensions of this text container + buttons, because I'm having a hard time with it?