revert user area

[livid verge]

.visual-refresh nav:has([data-list-id="guildsnav"]) {
  margin-bottom: unset;
}

Fixes the ugly bottom margin hanging out

[trim venture]

forgot that was a thing im not in many servers 😓

i added

[errant sonnet]

honestly this is all i needed to be fine with it thank you very much

[livid verge]

the settings icon is in the shadow realm but its fine XD

ctrl+,

[astral gulch]

honestly the main issue with the user area was how it looks janky next to the msgbox

clearly the ui team dont have anyone with eyes that work

[livid verge]

i dont think what they did really fixed that either

[trim venture]

id kill to have this back it looked better imo

css noob 🥀

[astral gulch]

its as if experiments mean nothing to discord, because i HIGHLY doubt people liked the wonkyness of this version of the visual refresh

they likely got feedback about it being wonky and went "guess what, its staying. get fucked lmao"

[trim venture]

its so baffling they shipped the wonk instead of the double height chat bar

[fierce lava]

huge thank you

[delicate crypt]

sorry for asking dumb questions, but how do i use it?
i installed vencord for the first time when this new shit UI released, and since they removed the desktop visual refresh thingy, im trying to find fixes for it

figured it out sorry

[indigo compass]

omg naked towel from twt

[delicate crypt]

---WHAT

HOW

[indigo compass]

Absurdo. Peidei no cinema e tiveram que me expulsar da sala. Achei muita mancada. #LevaNaBoa

[delicate crypt]

https://media.discordapp.net/attachments/540617887530876951/1053139897839534171/ezgif.com-gif-maker_10.gif

[urban prairie]

yoo badass

ill take any snippets that brings back the old ui to a degree

true xD

either way very nice

[tardy timber]

now we just need to somehow make server icons round instead of squares

[urban prairie]

for me they're rouhnd

just slightly smaller

[tardy timber]

like circles

and give them the same size as before

[urban prairie]

mines like this

[tardy timber]

HOW ARE THEY ROUND

[urban prairie]

uhhh

im not sure which visual refresh snippet does it xD

actually might be this

[class*="closedFolderIconWrapper_"] > [class*="guildIcon_"],
[data-list-item-id*="guildsnav_"] > [class*="icon_"] {
    border-radius: 50% !important;
}

[tardy timber]

quick css my beloved

[urban prairie]

yea my quickcss is expanding like the universe lol

[tardy timber]

yipeee they are round

[urban prairie]

yeah aware of that

didnt make the snippet just found it

[tardy timber]

chat i have no idea about css whatsoever (sorta offtopic from this), but has anyone found a fix for the massive bar with the server name

this

[trim venture]

the titlebar?

[tardy timber]

yes

[trim venture]

if u get rid of that then its no window management buttons for u buddy

[tardy timber]

like this

the one with the inbox thing

[harsh gate]

@tardy timber i can dm you the bits i have that turn my layout into this

it gets rid of the title bar + you can fix the spacing of the top icons (i need to redo mine a little since i think it got borked today), servers are round and the chat bar is lined up w the user panel

[tardy timber]

please do

[odd trellis]

I think this approach I sent a while back is better
:has() is very laggy, and aria label won't work for other languages

There's only a small downside of having to run your css through the class updater a couple times a year when the classes reroll

(Use the legacy version if you want it square) #🎨-css-snippets message

[odd trellis]

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

[fierce lava]

Do you mind sending me the CSS for the title bar?

[harsh gate]

can do! let me see if i can find the snippet i used and link it there; otherwise i'll dm you the code itself

[worldly owl]

@trim venture where do i put this code

[clear flint]

sorry for the ping! could i also request the bits? 👀

[harsh gate]

can do!!

[worldly owl]

shiloh

where do i put tihs code

im tryna get rid of ts

[harsh gate]

i have been summoned again will dm!

[velvet cove]

requesting the bits if I may

[harsh gate]

friend requesting and dming everyone who's asked but here is a doc with the bits + links to the original creators' threads or messages for anybody else who sees this!!

[odd trellis]

In your quickcss

[urban prairie]

Shiloh is a nice name imo

[harsh gate]

thank you! <3

[urban prairie]

I also like names like "Shawn" :p

[hearty jetty]

May I also have this please?

[harsh gate]

@hearty jetty here's the doc! send a friend req and dm me if you've got any questions about it <3

[storm cradle]

I guess my theme must have some line of code that prevent this css from working correctly, but this is still a great css

[prisma vine]

yo can I get that?

[harsh gate]

@prisma vine got a doc all done up and pretty! friend request and dm if you've got any questions about it, but i linked all the OG creators, so hopefully those threads can be helpful

[prisma vine]

thanks

[plush inlet]

Users with Better Folders should use this for the User Profile Area:

    width: 100%;
    left: 0px;
    bottom: 0px;
    border-radius: 0px;
    border: none;
}

.visual-refresh nav:has([data-list-id="guildsnav"]) {
  margin-bottom: unset;
}```
It doesn't look exactly the same, but it's as close as I could get. I just changed width to 100% and left to 0px to make it stick to the size of the sidebar in total.

[prisma vine]

I copied it but I still have the bottom margin

[livid verge]

I dont

[livid verge]

v+ snippet wtf is this just post it lol

[livid verge]

v+ snippet

hopefully i dont get nuked for doing that like i often do

and follow the format if you do please

[harsh gate]

i'm not sure what you're asking of me + i don't want to jump into somebody's thread with a concoction of other people's code!

that's why it's in its own doc <3

[livid verge]

It's fine, just link to their message/thread in your messsage :p

[harsh gate]

the links are in the doc

[livid verge]

I'm just giving you options cause css in a google doc is crazy

and i dont see what you're talking about anyway

It's just the css with no formatting for me

[harsh gate]

thank you, but unless given official direction to share it in a different format, this is easiest for me to share the link with all the people who've been asking or dming me + keep the links to the original creators in the comments on the doc

[livid verge]

uhhh you do you then lol

[prisma vine]

I copied the code exactly how it is wdym skill issue lmao

[livid verge]

I mean it works for multiple people so it must be a problem with something you have enabled/overriding it

:p

And works for me, I havent see anyone else say it doesnt work

[livid verge]

are they here? i'm almost 90% sure they dont mind

we all have the same common goal

But don't let me push you around i got stuff to do

[odd trellis]

#🎨-css-snippets message

.visual-refresh section.panels_c48ade {
  left: calc(var(--custom-guild-list-width));
  width: calc(100% - calc(var(--custom-guild-list-width)));
  bottom: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border-faint);
  /* Fix vc buttons resizing weirdly */
  .actionButtons_e131a9 button {
    padding: 0;
  }
  .activityPanel_c48ade {
    border-radius: inherit;
  }
}
nav.guilds_c48ade, #channels {
  margin-bottom: 0 !important;
}
/* optionally hide the bar at bottom of server list */
.sidebar_c48ade:after {
  display: none;
}
/* Better Folders Fix */
.visual-refresh [style$="grid-area: betterFoldersSidebar;"]~section.panels_c48ade {
  left: calc(var(--custom-guild-list-width)*2);
  width: calc(100% - var(--custom-guild-list-width)*2) !important;
}

[odd trellis]

use !important
and this should be significantly less laggy

nav.guilds_c48ade {
  margin-bottom: 0 !important;
}

[livid verge]

nice

[plush inlet]

:O It works

Thanks c:

[prisma vine]

idk what im doing wrong but I still got the bottom

[odd trellis]

you're probably copying it into your css wrong or maybe a theme conflict

[glass cave]

.visual-refresh section[aria-label="User area"] {
    width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px - 16px);;
    left: calc(var(--custom-guild-list-width) + 9px);

}

.visual-refresh nav:has([data-list-id="guildsnav"]) {
  margin-bottom: unset;
}

here if anybody want rounded corners

[dry steppe]

hey any way to make it smaller like the ol' days?

[glass cave]

what did it look like I forgot :A:

[dry steppe]

it was smaller https://cdn.discordapp.com/emojis/1257044839145668618.webp?size=48&name=thumb

i dont have a screenshot on me sorry

this server has this emoji im stupid

[glass cave]

is it like smaller overall?

[dry steppe]

its a bit shorter

width is ok since you can like drag it around

[glass cave]

ice sea

hold on I'll try

[dry steppe]

also just wanted to share a tip for discord's random classes
do this:

[class*="searchBar__"]

instead of hardcoding the values

[glass cave]

woah thanks

[odd trellis]

here's a slightly better version

#🎨-css-snippets message

[glass cave]

ah

thank you !!

[odd trellis]

This is actually worse for performance, and causes selectors to be more laggy, so it's generally discouraged to do this instead of using the actual class name

[dry steppe]

did not know that. although you will need to update your selectors every time discord does something

[odd trellis]

yeah, but it's super easy to do that with the class updater website

[dry steppe]

class updater?

[odd trellis]

#theme-support

[dry steppe]

thanks

got it

[spark brook]

Oh dear

[dry steppe]

LOL

[spark brook]

https://cdn.discordapp.com/emojis/967195996419420190.webp?size=64&name=headache~1

[glass cave]

@dry steppe is it something like this?

[spark brook]

Turns out it was a theme issue

[odd trellis]

does this work for you?
#🎨-css-snippets message

ig nvm, but slightly curious

probably won't either

[dry steppe]

yea

[glass cave]

okie hold on I will send the css o7

#popout_46 {
    left: 88px !important;
}

.visual-refresh section[aria-label="User area"] {
  margin-left: var(--custom-guild-list-width);
  width: calc(100% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  .actionButtons_e131a9 button {
    padding: 0;
  }
  .container__37e49 {
    padding: var(--space-xxs);
    padding-left: var(--space-xs);
    .avatar__37e49 {
        width: 32px !important;
        height: 32px !important;
    }
    .mask__44b0c {
      foreignObject {
        width: 32px !important;
        height: 32px !important;
        mask: url(#svg-mask-avatar-status-round-32);
      }
      rect {
        width: 10px !important;
        height: 10px !important;
        x: 22 !important;
        y: 22 !important;
      }
    }
  }

}
nav.guilds_c48ade {
  margin-bottom: 0 !important;
}
/* optionally hide the bar at bottom of server list */
.sidebar_c48ade:after {
  display: none;
}

sorry if the code is bad I tried my best T_T (please feel free to correct it!!)

[odd trellis]

what are you trying to do?

are you just trying to round the evie's snippet like this? or something else

also, I don't think #popout_46 will work
pretty sure that will change

[glass cave]

making the thing shorter like arsikk said ;w;

50% of what I wrote was for making the profile picture smaller
I couldn't figure out a better way

[odd trellis]

Maybe something like this?

.visual-refresh section.panels_c48ade {
  margin-left: var(--custom-guild-list-width);
  width: calc(100% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  .actionButtons_e131a9 button {
    padding: 0;
  }
  >div:not(.wrapper_e131a9) {
    height: 40px !important;
    padding: 4px !important;
  }
  .avatar__37e49 {
    scale: 0.8;
  }
}
nav.guilds_c48ade {
  margin-bottom: 0 !important;
}
:root {
  --custom-rtc-account-height: 0;
}
/* optionally hide the bar at bottom of server list */
.sidebar_c48ade:after {
  display: none;
}

[glass cave]

ooooh yeah that !!

[odd trellis]

it's smaller if you use get rid of the padding stuff around it like this or something

[glass cave]

thank you for fixing it!

it looks way cleaner than what I wrote xd

[glass cave]

@dry steppe here is better version o7

[odd trellis]

and doesn't break the status icon lol

[glass cave]

right?

[odd trellis]

why were you even trying to mess with the masks

[glass cave]

I had to change popout thingy because it broke T_T

[glass cave]

was trying to figure out in inspect element

basically pressing random buttons and see what changes stuff 💀

[odd trellis]

that's pretty much what i do lol

[glass cave]

I didn't know it was possible to just scale the avatar 🗿

anyways thanks again o77

[odd trellis]

yeah scale: can be pretty useful, but i don't like using it too much (just because i think it can be a bit janky, and i'd rather change the size of things the "real" way if possible)

[full heart]

the code doesn't work for me, any idea what the problem would be? i'm very new to this

[full heart]

this worked :P

[cobalt echo]

does anyone know if it's possible to hide the server name in the titlebar? it's a bit distracting

[odd trellis]

yes, but that's not at all related to this snippet. ask in #🎨-theme-development for stuff like this in the future
.title__85643 { display: none !important; }

[cobalt echo]

oh okay, sorry ^^'

and thank you!

[rough heath]

i love you

[mint delta]

dont let the discord uiux devs cook

[rough heath]

everything they touch turns into abysmal dogshit

[mint delta]

so far this theme is the first step in improvement

[random folio]

how

Which code do I paste where?

[forest acorn]

div[class^=sidebar_] section[class^=panels_] {
  width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);
  left: var(--custom-guild-list-width);
  bottom: 0px;
  border-radius: 0px !important; 
  border: none;
  padding: 0px;
}

div[class^=sidebar_] nav[class^=wrapper_] {
  margin-bottom: unset !important;
}

div[class^=sidebar_] .panel__5dec7 {
  border-radius: 0px !important; 
}

#vc-spotify-player {
  border-radius: 0px !important; 
}

div[class^=sidebar_] .scroller__629e4, .scroller__99e7c  {
  margin-bottom: unset !important;
}``` there is version without needing to have discord in english since evie used aria-label 😄

[odd trellis]

this snippet in quickcss

[odd trellis]

.

[random folio]

I did everything but my folders won't open

[odd trellis]

i have a fix for these corners and this margin here btw #1361443579905445898 message

[odd trellis]

you pasted this snippet into your quickcss?
#1361443579905445898 message

[random folio]

yea i did but it didn't happen

[odd trellis]

do you have other themes?
try disabling them, it might be a theme conflict

[lone sleet]

Is there any way to revert this to the old way

With snippet?

[odd trellis]

ask in #🎨-theme-development

[oblique fox]

that bricked my settings button 💔 i can't open them now. fixed

[forest acorn]

oh xD

fixed

i also have the new style

div[class^=sidebar_] section[class^=panels_] {
  margin-left: var(--custom-guild-list-width);
  width: calc(100% - var(--space-xs)* 2 - var(--custom-guild-list-width)) !important;
}

div[class^=sidebar_] nav[class^=wrapper_] {
  margin-bottom: unset !important;
}

div[class^=sidebar_] .scroller__629e4, .scroller__99e7c  {
  margin-bottom: unset !important;
}```

[clear flint]

very minor but, is it possible to remove the little margin on top? also i tried changing the background color for the username but no luck :( any tips?

[forest acorn]

yes

use css div[class^=sidebar_] .scroller__629e4 { margin-bottom: unset !important; }

[clear flint]

it worked!! thank you!!

[forest acorn]

no problem 😄

[forest acorn]

there is my updated code 😄

so people dont need to use english

[clear flint]

all i need now is change color, i'll try tweaking a bit more :3

[forest acorn]

which color?

[clear flint]

the one i sent rn was from the old ui, so to that one!

let me use color pick to see

[forest acorn]

the panel background?

[clear flint]

yeah!

#1f1405 if im not mistaken

[forest acorn]

so like this for example

[clear flint]

yes!

just to keep the og colors, sadly they also changed the grading so it looks different. trying to make it as close as possible

[forest acorn]

then in css div[class^=sidebar_] section[class^=panels_] div[class^=sidebar_] .panel__5dec7 #vc-spotify-player add background-color: COLOR !important;

[clear flint]

o i'll try it out!

does the hex code need the hashtag or nah?

[forest acorn]

yes

or you can use rgb() or color name

[clear flint]

mmm might be doing something wrong tho

[rugged gust]

How do I fix this?

.visual-refresh section[aria-label="User area"] {
width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 260px);;
left: var(--custom-guild-list-width);
bottom: 0px;
border-radius: 0px;
border: none;
}

.visual-refresh nav:has([data-list-id="guildsnav"]) {
margin-bottom: unset;
}

[forest acorn]

i dont see anything wrong in it

[clear flint]

it’s still not showing the color

i’ll try deleting everything else and see if it’s conflicting with anything i have

[onyx yoke]

The snippet causes the user area to be misaligned when using the betterfolders plugin and having a folder opened

[clear flint]

i noticed that the little margin on top is fixed on servers but still shows up to me in DMs! still something very minor so i dont mind

[dire stratus]

how do i use this

so done with this bum new ui

[clear flint]

add the code to quickcss and tweak around if something isn't fitting right

[dire stratus]

i did, but nothing happens

[clear flint]

do you have more codes? make sure nothing is conflicting with each other (plugins included). i can't help much code wise bc i barely know how to use css, i just go around changing margins and scales

[dire stratus]

nope, i just pasted that code there and restarted discord

[clear flint]

this one right?

if that didnt do anything then idk

[mellow isle]

Oh you are an absolute legend tysm

[dire stratus]

its like this now

[clear flint]

try tweaking around the width or left values!! like increasing or decreasing pixels

this is a very amateur-ish solution tho

https://tenor.com/view/tape-band-tank-slap-fix-gif-14999830

[dire stratus]

https://tenor.com/view/greed-apple-cat-cat-apple-cat-meme-gif-18100463515886680557

[lofty spire]

the fix I found personally for this was switching out the .scroller__629e4 at the end of the code with div[class^=scroller__] instead and it seems to fix the issue for me

[clear flint]

o i'll try it out then

[lofty spire]

But then again it's like putting a bandage on a nearly collapsing dam but it works so 🤷

[clear flint]

my entire code is like that

[lofty spire]

so much to fix discords naive choices

[lofty spire]

Same thing here, I have done quite a bit of tweaking to other peoples' css and it fits my needs so. 🥀

[clear flint]

it workeeed thank you!!

yup! basically haha

[warped warren]

for anyone viewing this, i decided to steal this snippet because its AWESOME and noticed a small issue that i fixed

if you are using spotify player, add this to prevent it from breaking the position:

#vc-spotify-player {
   height: 120px !important;
}

[plucky karma]

the button icons get tiny if you make the channel sidebar small 🤔

[odd trellis]

i have a fix for that here
https://discord.com/channels/1015060230222131221/1354331484831354952

[lucid ginkgo]

is there css to remove the padding here?

[odd trellis]

ask in #🎨-theme-development because that's unrelated to this thread

[lucid ginkgo]

oops thanks

[forest acorn]

i have fix for it

change css div[class^=sidebar_] .scroller__629e4 { margin-bottom: unset !important; } to

div[class^=sidebar_] .scroller__629e4, .scroller__99e7c  {
  margin-bottom: unset !important;
}```

[clear flint]

thank you!! worked perfectly! :D

[forest acorn]

no problem 😄

[odd trellis]

you can use #channels instead of .scroller__99e7c

[queen nest]

For me original version does not work, I took part here and corrected a little for myself and it turned out something like this, if someone needs it

.visual-refresh section.panels_c48ade {
  left: var(--custom-guild-list-width);
  width: calc(105% - var(--space-xs)*2 - var(--custom-guild-list-width)) !important;
  bottom: 5px;
  >div:not(.wrapper_e131a9) {
    height: 40px !important;
    padding: 1px !important;
  }
  .avatar__37e49 {
    scale: 0.8;
  }
  .actionButtons_e131a9 button {
    padding: 0;
  }
}
nav.guilds_c48ade {
  margin-bottom: 0 !important;
}
:root {
  --custom-rtc-account-height: 0;
}
.container__37e49 {
  gap: var(--space-4) !important;
}
.avatar__37e49 {
  width: 30px !important;
}
.wrapper_a629d4 {
  margin-left: 7px !important;
}

[chrome sable]

look kinda weird tho

well, better than nothing

[forest acorn]

mine stil work fine 🤷🏻

its even compatible with spotify controls

[lethal steppe]

how do i fix this side thing

[forest acorn]

use css div[class^=sidebar_] nav[class^=wrapper_] { margin-bottom: unset !important; }

[dense shadow]

keep in mind that where it says "User area" thats only if your discord is set to english. In my case its spanish so i had to change it to "Área de usuario"

[forest acorn]

yes that why i made version that dont need to use specific language

[forest acorn]

here

[stuck solstice]

im having this issue

like how do i move the box more right

[dense shadow]

oh thx didnt see. i was reading from top to bottom

[kindred lynx]

I placed the code and it still looks the same as the default, weird...

[kindred lynx]

Ohh now i get it why didn't worked for me because i'm using in a different language

That helped, thanks!!

[cloud hemlock]

When enabled I get this big black bar, any help would be appreciated. https://i.imgur.com/x8XgO2d.png

[trim venture]

by the way i updated the css so that its language agnostic now, it was an oversight by me

[velvet badge]

Hi, I'm trying to get this to work with a Hover Server List code (not mine), but it doesn't work no matter what I do.

.guilds_c48ade,
.tutorialContainer__1f388,
.listItem__650eb,
.sidebarList_c48ade {
  transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.guilds_c48ade:not(:hover) {
  padding-left: 25px;
  width: 60px;
  opacity: 0;
}
.sidebar_c48ade:has(.guilds_c48ade:not(:hover)) .sidebarList_c48ade {
  margin-left: -70px;
  width: calc(var(--custom-guild-sidebar-width) + -15px);
}

div[class^=sidebar_] section[class^=panels_]:has(.guilds_c48ade:not(:hover)) div[class^=sidebar_] section[class^=panels_]{
  width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 65px);
  left: 16px;
  bottom: 0px;
  border-radius: 0px !important; 
  border: none;
  padding: 0px;
}

div[class^=sidebar_] section[class^=panels_] {
  width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);
  left: var(--custom-guild-list-width);
  bottom: 0px;
  border-radius: 0px !important; 
  border: none;
  padding: 0px;
}

div[class^=sidebar_] nav[class^=wrapper_] {
  margin-bottom: unset !important;
}```
The goal is to have it shrink to a smaller size as I hover over where the servers are supposed to be.

[scenic drift]

Sadly, doesn't work with BetterFolders

[odd trellis]

#1354331484831354952 message

[scenic drift]

Thank you :D

[zealous cedar]

how do i change 5the color

[ruby loom]

where is the one that when you hover it shows the user profile

?

[odd trellis]

btw @trim venture :has() is quite laggy
it might be fine in this case since there aren't many navs, but even :has(>...) would be better so it only has to search immediate children
but that isn't even necessary, because you can just use nav[class*=guilds_] (probably needs an !important then), or the actual class name, .guilds_c48ade (because attribute selectors are slightly laggy, but they have the advantage of not needing to update them with the class updater the few times a year when discord rerolls classes)

[ruby loom]

?

[odd trellis]

does ntts not have the link in the description?

[ruby loom]

o

[trim venture]

tell @livid verge that i just pasted their thingy

im a css noob

[odd trellis]

oh

why'd you post it here then
oh you meant they made those lines

[trim venture]

but if you have any other working solution ill edit and add it

[odd trellis]

i have a better version of this snippet i made a while ago

with fixes for plugins

[livid verge]

u can fix it lol i made that snippet in like 2 and a half seconds

[odd trellis]

#1354331484831354952 message

[urban prairie]

randomly found this somewhere in this channel

@import url(https://davart154.github.io/Themes/Snippets/Old%20Chat%20Bar%20Layout/OldChatBar.css);

shit wrong thread

[odd trellis]

oh i spent so long bug testing, fixing problems with plugins, and making it pixel perfect since border widths are weird lol

[trim venture]

whatever yo the snippet works and in my experience with it theres no slowdown

again if u hve a solution ill edit and add it to the original message

[odd trellis]

yeah it's probably not that noticable with the one :has()

[odd trellis]

.

this is the version I made

it's probably good with all the people from ntts to use the attribute selectors like you're doing though

[trim venture]

using hashed selectors

id rather resilience

[odd trellis]

nav[class*=guilds_] and use !important

actually !important isn't necessary if you leave the .visual-refresh

[trim venture]

you didnt put that in ur original solution

[odd trellis]

yeah I used nav.guilds_c48ade

[trim venture]

i added to the original, thanks

[odd trellis]

and if you want to link to mine that has fixes for BetterFolders and GameActivityToggle plugins, you can

[trim venture]

i must also say i dont use this snippet so i dont know if or when it will break, i made it for a friend and i know people would appreciate it here

[trim venture]

sorry for ping but i also added credits

[tall sorrel]

hello, like Sneezing_panda, I still have the black bar on the side of the channel

[forest acorn]

sus

used original code and no line for me

[tall sorrel]

I have nothing but oldcord :/
but it's still buggy, idk

even when disabled (oldcord) still the same

[forest acorn]

well lemm check

🤷🏻

[forest acorn]

oldcord by milbits right?

[tall sorrel]

exactly

[forest acorn]

well

oldcord have its own rever user area xD

[tall sorrel]

but I'm too tired for fighting anymore, I gave up, my discord is ugly, whatever

[forest acorn]

thats not compatible with this one

cuz of the width that this one use

its longer than the oldcord channel list

it could be compatible if you change the width

for now it using the new resizable function

so thats the conclusion why u and i belive also panda have black line

[abstract forge]

is there a way to fix the discrepancy between the user area and the message box?

[forest acorn]

idk i dont see problem in my code xD

[abstract forge]

your code is fine, i mean is there another css snippet that rezises the message box anywhere?

[odd trellis]

There's some in #🎨-css-snippets

[abstract forge]

I tried to find one by scrolling/searching but I didn't see any, do you have a link or name? thanks

[odd trellis]

#🎨-css-snippets message

[abstract forge]

much appreciated

[left elk]

with the youtube nation theme from the better discord site

i'll try something else

[eager tree]

check if folder is open

[fierce roost]

so this happened

[odd trellis]

is that with betterfolders?

[fierce roost]

yea

[odd trellis]

I have a fix for that, apparently it broke though https://discord.com/channels/1015060230222131221/1354331484831354952
will fix tomorrow

[fierce roost]

ah

ty

@odd trellis can you lmk when its fixed

[onyx yoke]

not certain if this is the place to post this, but the snippet for round icons in the doc seems to have broken recently -- the bottom of folders cuts off the icons, the icons are too squished together and aren't centered in folders, and the notifications icon is wildly off

(changing ui density doesn't fix it)

[harsh gate]

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

prowl this thread! OP of the code has tidied stuff up after that broken update

[onyx yoke]

awesome! thanks a bunch~

[harsh gate]

ofc!!

[urban prairie]

oh cool you're in the bta server too

[calm haven]

i guess that interaction with betterfolder has been overlooked. also mildly irritated by it. maybe there's a way to attach the div to the chat channel separator on the left/right?

[odd trellis]

I have a fix for betterfolders #1354331484831354952 message

[calm haven]

perfect, thank you!

[small whale]

question

is there any way to make the profile picture smaller

[silk nymph]

any way to align these?

[dull night]

Where can i download it?

[odd trellis]

#🎨-css-snippets message

ok you deleted your message. does the link help?

I'm not really sure what you're asking if not that

[dull night]

Jamen hvor downloader du det? eller hvordan får jeg det, fatter hat lige nu

[odd trellis]

there's nothing to download. you just copy it and put it in your quickcss

[dull night]

shit jeg er dum mange gange tak for det b ❤️

Men skal jeg bare øre det med alt?

[odd trellis]

Can you speak english? I only know a little bokmål

[dull night]

Should I just do it with everything? @odd trellis

[odd trellis]

if you have other stuff in your quickcss, you can just copy it in there in addition to what's already there

[dull night]

ok thanks ❤️

[stuck solstice]

if you want to set the size equal to channel list bar this seems to be the best way

left: var(--custom-guild-list-width);

to

left: px;
and just set the amount you need to fit

[stuck solstice]

@trim venture its no longer alining proper

my personal fix

.visual-refresh div[class^="sidebar_"] section[class^="panels_"] {
    width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);
    left: var(--custom-guild-list-width);
    bottom: 0px;
    border-radius: 0px;
    border: none;
}

[astral inlet]

Yo, when I pasted in the css, it just made the channels overlap the user bar instead, and whenever I try changing the numbers it justs crops it too early like in the original issue this css was trying to fix. Is there any way to fix it and keep it consistent even when I join a vc? (Since the user bar is bigger when joining a vc of course)

[forest acorn]

ofc.. its not the full code

div[class^=sidebar_] section[class^=panels_] {
  margin-left: var(--custom-guild-list-width);
  width: calc(100% - var(--space-xs)* 2 - var(--custom-guild-list-width)) !important;
}
div[class^=sidebar_] nav[class^=wrapper_] {
  margin-bottom: unset !important;
}
div[class^=sidebar_] .scroller__629e4, .scroller__99e7c  {
  margin-bottom: unset !important;
}

[astral inlet]

Oh

Lemme try it out

[astral inlet]

Hmmm

Removed the top one out of the 3 to reposition it

[swift steppe]

welp the user area is broken

[odd trellis]

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

[swift steppe]

nvm it worked but the buttons are small

[odd trellis]

wait it's still working for me

what problem are you having

[swift steppe]

wait

those buttons obsidian

[odd trellis]

use this

here's the direct link to the snippet #1354331484831354952 message

[swift steppe]

i have the css pasted

like

wait

uhm

i broke it xD

welp the reason why the buttons are ao small it's because of the sidebar

like

here is maximum left

and when its maximum right it shows the icons big

i guess this css no longer works

/* sidebar fix*/
.base_c48ade .sidebar_c48ade {margin-right: -0.007px}
.visual-refresh
.base_c48ade .sidebar_c48ade > .sidebarList_c48ade {
width: 240.3px;
}

.reaction_f8896c, .reaction__23977 {
border-radius: 8px; }

/*left sidebar borders*/

.visual-refresh .theme-dark, .visual-refresh.theme-dark {
--app-border-frame: var(--background-secondary)
}

also

mr obsidian

do you know how to get rid of this?

like thingy on top

[odd trellis]

#🎨-theme-development

[swift steppe]

nvm i found the solution

#1354203100872835123 message

ez

[swift steppe]

i still don't know how to make the voice buttons bigger

i guess i will need to find an sweetspot

[odd trellis]

i already told you

#1354331484831354952 message

[fierce roost]

@odd trellis how do i uncomment the betterfolders fix? which /* */ do i remove?

there are a couple of them and i've tried it already but it doesn't fix this

[south bane]

🙏 Life saver

[forest acorn]

[frozen needle]

ts broken with the new discord update

[fierce roost]

yep

[hazy fable]

@trim venture it broke 😭

[tranquil rivet]

rip

[stuck solstice]

Fuck

If my discord updates I'll look at fixing iy

It

[odd trellis]

run it through the class updater found in #theme-support

[tranquil rivet]

that did not work for me

or do anything at all

nothing at all changes

[odd trellis]

oh it uses attribute selectors

change them all from [class^="name_"] to [class*="-name"]

or use this (after running it through the class updater) #🎨-css-snippets message

[tranquil rivet]

that has a rounded border that I don't like

[tranquil rivet]

thanks

it's still broken if you do that but you just have to use the

nav._5e434347c823b592-guilds {
  margin-bottom: 0 !important;
}

as well

I think

[livid vapor]

broken @trim venture

[sturdy portal]

.visual-refresh div[class*="-sidebar"] section[class$="-panels"] {
  width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);
  left: var(--custom-guild-list-width);
  bottom: 0px;
  border-radius: 0px;
  border: none;
}

.visual-refresh nav[class*=-guilds] {
  margin-bottom: unset;
}

decided to dig into it a bit myself and this works

yes i censored the server icons

but it works

[livid vapor]

thanks

[livid vapor]

https://tenor.com/view/thanos-fine-ill-do-it-myself-ill-do-it-myself-gif-22181201

[swift steppe]

it worked for me

[stuck solstice]

i hate how discord did this i have to fix so much now

[smoky oracle]

anyway to move this up a little bit it looks like there should be room there

[sturdy portal]

1. i just made the snippet work, thats it. i just wanted a working snippet
2. idk bro it looks fine for me

[smoky oracle]

okay idk it might be from other css for old dc ui

[warped warren]

can someone give me pointers to what fixes this.. trying to update the snippet as it is in my theme

i remember knowing this in the past but i have forgor

[frozen needle]

i love you

[stuck solstice]

Fr

[forest acorn]

.visual-refresh div[class*="-sidebar"] section[class$="-panels"] {
  margin-left: var(--custom-guild-list-width);
  width: calc(100% - var(--space-xs)* 2 - var(--custom-guild-list-width)) !important;

}
.visual-refresh nav[class*=-guilds] {
  margin-bottom: unset;
}``` my version

just like the new one but shorter like a old one

[sturdy portal]

WORKING VERSION HERE

[golden sun]

thanks you help me brooo

[elder cape]

sorry for the ping but is there also a fix for using better folders?

[odd trellis]

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

[odd trellis]

just run this snippet through the class updater before using it
I haven't updated the message yet

[pine forge]

ty it works

[sturdy portal]

-# does he know thats not the original

[pine forge]

I know but it's the only one that worked for me

[sturdy portal]

the working version i posted just a bit up:

[pine forge]

for some reason didnt work for me

[sturdy portal]

oh aight

[astral inlet]

.visual-refresh div[class*="-sidebar"] section[class$="-panels"] { width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) - 1px); left: 77px; bottom: 0px; border-radius: 0px; border: none; }

This part broke, did some testing and noticed that my panel kept getting added this in element view: _5e434347c823b592-disablePointersWhileSorting

Could someone try and look for a fix

[odd trellis]

what is it meant to do?

oh wait

try this one https://discord.com/channels/1015060230222131221/1354331484831354952

#🎨-css-snippets message

[astral inlet]

It's this part that breaks specifically, only when dragging a server around

[odd trellis]

yeah and mine does it but without being broken, and also not being hardcoded values

use the square legacy squared version

just change the border-radius: 0 in mine to this if you want the top corners rounded

  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

[chilly tulip]

I have a working snippet but I don't remember who made it

/*Fix to make borderless*/
._5e434347c823b592-panels {
    border-radius: 0 !important;
}

._37e49614b9f110a9-container {
    height: 56px !important; /*Experiment between 50 and 60 px*/
    [aria-label="Mute"],[aria-label="Deafen"] {
        border-radius: 8px; /*Changes buttons but not the borders*/
    }
    [aria-label="Input Options"] {
        display: none;
    }
    [aria-label="Output Options"] {
        display: none;
    }
}
._5e434347c823b592-panels > ._37e49614b9f110a9-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
._629e4c86564a4ee7-scroller {
    padding-bottom: 0 !important;
    margin-bottom: 16px;
}
.visual-refresh section._5e434347c823b592-panels {
    border: 0;
    margin-left: 58px; /*LEFT SIDE -- Play with these = 72px default 58px edited */
    margin-bottom: -5px; /*Up-down placement = -5px default*/
    width: calc(100% - var(--space-xs)*2 - 52px) !important; /*RIGHT SIDE -- Play with these = 72px, 52px edited */
    overflow: hidden;
    .e131a99484292a19-actionButtons button {
    padding: 0;
    }
}

Just try to modify the left side/right side thing if placement is off

[chilly tulip]

oh good to know

[odd trellis]

i'd recommend using mine that i linked above. that doesn't quite center it correctly
and i've spent many hours and extensively tested my snippet to get it pixel perfect, and also made fixes for plugins (it also isn't reliant on aria-labels which change depending on what language you have discord set to)

[chilly tulip]

i think it's better to let people choose

[chilly tulip]

bro your version covers the username and I do not consider this "pixel perfect" if I need to expand channel area just to see my username

I've tried your "legacy version" (that's buried under many messages btw) and original one

same effect so far

and I'm not sure if that was your intention but your message sounded like "my project is better because i put more effort into it so use mine"

[odd trellis]

that is pixel perfect. it covers your username because you didn't use the css in the message that removes the arrows (it is kind of confusing right now. i should probably make it a bit more user friendly to get the right fixes and stuff)
use the other css in my message to remove the arrows for more space (yours is removing them)

[odd trellis]

well it's objectively better. that other one requires manual adjustment to get the alignment correctly
but i also did put more effort in it

i'm not sure why there's a bit of a transparent thing above the panel in your screenshot (which you didn't mention, which is the only thing I see that's wrong)
that must be caused by some other css you're using

[chilly tulip]

Thanks for the suggestion I'll check if other css is causing the difference

[astral inlet]

Worked perfectly after some tweaking, thanks

[odd trellis]

the reason i recommend mine, is that it doesn't require tweaking to align the user area

[clear kernel]

No longer works for me.

Anyone got a fix?

[astral inlet]

Everything broke, not just you, read #1257025907625951423

[clear kernel]

A friend of mine got it working again mostly.

.panels__5e434 {
    border-radius: 0 !important;
}

.container__37e49 {
    height: 50px !important; /*Experiment between 50 and 60 px*/
    [aria-label="Mute"],[aria-label="Deafen"] {
        border-radius: 8px; /*Changes buttons but not the borders*/
    }
    [aria-label="Input Options"] {
        display: none;
    }
    [aria-label="Output Options"] {
        display: none;
    }
}
.-panels__5e434 > .container__37e49 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.scroller__629e4c {
    padding-bottom: 0 !important;
    margin-bottom: 16px;
}
.visual-refresh section.panels__5e434 {
    border: 0;
    margin-left: 64px; /*LEFT SIDE -- Play with these = 72px default 58px edited */
    margin-bottom: -8px; /*Up-down placement = -5px default*/
    width: calc(100% - var(--space-xs)*2 - 53px) !important; /*RIGHT SIDE -- Play with these = 72px, 52px edited */
    overflow: hidden;
    .actionButtons_e131a9 button {
    padding: 0;
    }
}```

Only thing not working is the masking covering up servers.

[odd trellis]

I have a fix that shouldn't need to be played with #1354331484831354952 message

[clear kernel]

Used them both together, and they kinda compliment eachother.

[odd trellis]

?

you don't need the one you sent if you use mine

[clear kernel]

Let me put it this way, yes I do.

As the way yours makes it, is not how I actually want it to look

Yours makes it look like this, which as far as I care? Not a good look to me.

Both together?

Like so

[odd trellis]

you didn't use the one i linked

you used the one above it

[clear kernel]

The main reason I have yours now, is to fix the masking issue it did covering up servers for me.

It still works for me.

[odd trellis]

use the one i linked and get rid of yours

[clear kernel]

As long as it works I do not care.

Nah, I'm good.

Mostly because I don't like being told to do something.

You could suggest, but I rather not you order me to do a thing.

If it works, it works for me.

Thats where my care ends.

Plus it forces me to fiddle with CSS a bit more.

Need to learn this shit anyways.

[odd trellis]

mdn is a great resource https://developer.mozilla.org/en-US/docs/Web/CSS/

[clear kernel]

I learn better by doing or by someone actively showing and talking with me about what is going on

Anyways, I'm out.

https://tenor.com/view/peace-out-gif-3584473422170938815

[odd trellis]

well mdn is documentation. it's more for looking up how to use a certain property or something

[clear kernel]

I was done with the conversation, please, stop.

[forest acorn]

.panels__5e434 {
  margin-left: var(--custom-guild-list-width);
  width: calc(100% - var(--space-xs)* 2 - var(--custom-guild-list-width)) !important;
}
.guilds__5e434 {
  margin-bottom: unset;
}```

this works fine ![shrug](https://cdn.discordapp.com/emojis/1410773326036733992.webp?size=128 "shrug")

[sturdy portal]

.visual-refresh div[class^="sidebar_"] section[class^="panels_"] {
  width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 1px);
  left: var(--custom-guild-list-width);
  bottom: 0px;
  border-radius: 0px;
  border: none;
}

.visual-refresh nav[class*="guilds_"] {
  margin-bottom: unset;
}

fixed yet again

discord needs to stop renaming their stuff

[stuck solstice]

bro so thats why it broke when i was setting it up

i had to replace left with a actualy px amount but that might be my set up is weird

[stuck solstice]

time to go to bed and have discord break the fix when i get up

[fading shale]

Idk why but for me to delete this weirs border I need to add "padding: 0px" xD. I don't know where i messed this up in the css xD

[swift steppe]

yeah same

and those arrows

how do i get rid of em

[fading shale]

Which arrows??

[swift steppe]

near the mic and headphones

[odd trellis]

.micButtonParent__37e49>.buttonChevron__37e49 {
  display: none;
}
.micButtonParent__37e49>.micButtonWithMenu__37e49 {
  border-radius: var(--radius-sm);
}

[swift steppe]

thx obsidian

it worked :D

still i need to get the serverlist fixed

[golden sun]

Help pls Colorful

[sturdy portal]

@golden sun

[golden sun]

it's huge again

[golden sun]

oh big thanks bro

[glossy light]

jumpscare

[glossy light]

hi!!!

[sturdy portal]

why are you here

[glossy light]

i use vencord

duh

[swift steppe]

bruh

[sturdy portal]

working version here

[soft cipher]

tried this and it results in the icons being the correct sizes, but the bounding boxes are still small and square

[odd trellis]

try this #1354331484831354952 message

[soft cipher]

no difference unfortunately

commenting this url import out actually just makes it look like normal discord which is really odd

[odd trellis]

// comments don't work in css

you have to use /* */ around the line

[sturdy portal]

-# i think youre in the wrong thread, this is user area

[soft cipher]

oh you're so right

my bad ^^;

[bold solar]

Hey idk if anyone else had this issue, but this revert cuts off the top way too much and i couldnt find out how to fix it for the longest

(i hate what im about to say)

but i used AI to look at the code and it gave me some CSS code that makes it fixed

what my bug in particular was this

the color diff is what im talking about

.visual-refresh div[class^="sidebar_"] section[class^="panels_"] {
    width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width) + 0px);
    left: var(--custom-guild-list-width);
    padding-top: 10px;
    bottom: 0px;
    border-radius: 0px;
    border: none;
}

padding-top: 10; is what the AI wrote in its blouted ass code but i just took it out and added it into the CSS code here