#User Area Redesigned

1 messages · Page 1 of 1 (latest)

tender smelt
#

Feel free to give feedback here !

iron shadow
#

nice

#

i wonder how i could fix this

IH8NQFFIqR.png
tender smelt
#

i would guess if you have another theme it could set a margin or smth like that maybe ?

iron shadow
#

fixed it

tender smelt
#

oh wait no is it just aligned to the right ?

tender smelt
iron shadow
#

[class^=avatarWrapper] /* Change the user box /
{
margin-right: 120px !important; / Useless /
margin-left: unset !important; / Useless /
padding-left: 4px !important; / Make it slightly bigger for consistency with the right side */
}

#

set margin-right to 120px

tender smelt
#

WA ?!?

iron shadow
#

wht

tender smelt
#

i mean i wouldn't have gone for that, but if it works for you

iron shadow
#

😂

tender smelt
#

maybe if you apply enough force on the right it push it to the left

#

and the hover thing look correct with that ?

#

this thing

image.png
iron shadow
#

the white rectangle around it?

tender smelt
#

yeah it appear when you hover the name or the icons

iron shadow
#

it looks fine

#

i can send a ss for u to see

#

oh wait

#

just realised it doesnt show the full username

#

srry for quality

tender smelt
#

yeah the margin is breaking it

#

try to set margin right and margin left to 0px instead of unset

iron shadow
#

anyways i have to go

tender smelt
#

probably due to another CSS thing editing one of the attributes
if you find a way to ubreak it tell me

iron shadow
#

now i have to find which

copper ore
#

looks really good. I have something similar, but instead of moving the buttons up, I slide them over to the right and move the settings button to cover the profile picture.
You can still open the user popout by clicking anywhere else in the User Area, but clicking on the icon itself now opens settings.

div[class^="avatarWrapper_"] {
  min-width: 150px;
}
div[class*="container_"] > div[class*="buttons_"] > button:last-child {
  right: 222px;
  opacity: 0;
}
image.png
vocal goblet
tender smelt
stone flame
#

this is my first time doing this specific thing and i’m not sure how to add this to my discord. so if someone can walk me through it it would be greatly appreciated :)

buoyant dock
tender smelt
tender smelt
buoyant dock
tender smelt
#

@stone flame
click edit quickcss here, enable custom CSS and paste it in the window
or in openasar settings that you access by clicking the openasar text at the bottom of the settings, you go on theming, paste it, and restart

image.png image.png image.png
buoyant dock
#

what is openasar

tender smelt
#

don't worry about that way then and use the quickcss method
it's a thing that can be installed alongside vencord (you have the option on the installer) that enhance discord perf and cleanness

buoyant dock
#

oh yeah i remembeber seeing that in vencord installer now

buoyant dock
stone flame
#

thanks for the help ❤️

tender smelt
buoyant dock
#

oh I didn't realize that was a plugin oops
but it is built into vencord. it isn't a third party one that I installed

tender smelt
#

yeah indeed, but still optional

shrewd citrus
#

this was made by ChatGPT but it still works great for me, if you have a long display name it might not be for you. this rearranges the display name and the status and puts a line between them.

yo05oBZra9PK6tF7.png
# 
/* Center the profile container and align items horizontally */
.avatarWrapper_b2ca13 {
    display: flex;             /* Use flexbox for alignment */
    align-items: center;       /* Vertically center items */
    justify-content: center;   /* Horizontally center items */
}

/* Ensure the avatar icon is displayed correctly */
.wrapper_c51b4e {
    margin-right: 6px;        /* Space between avatar and text */
}

/* Container for profile text with separator */
.nameTag_b2ca13 {
    display: flex;             /* Use flexbox for horizontal layout */
    align-items: center;       /* Vertically center text */
}

/* Profile text elements with a separator line between them */
.panelTitleContainer_b2ca13 {
    margin-right: 8px;         /* Space between title and separator */
    display: flex;             /* Ensure title container is a flexbox item */
    align-items: center;       /* Vertically center title text */
    font-size: 1.2em;          /* Increase the font size for title */
}

.panelSubtextContainer_b2ca13 {
    margin-left: 4px;          /* Space between separator and subtext */
    display: flex;             /* Ensure subtext container is a flexbox item */
    align-items: center;       /* Vertically center subtext text */
    font-size: 1.2em;          /* Increase the font size for subtext */
    max-width: 100%;           /* Ensure it doesn't exceed container width */
    overflow: hidden;          /* Hide overflow */
    text-overflow: ellipsis;   /* Add ellipsis for overflowing text */
    white-space: nowrap;       /* Prevent line breaks */
}

/* Separator line between text elements */
.panelTitleContainer_b2ca13::after {
    content: "";
    display: inline-block;
    width: 1px;                /* Width of the separator line */
    height: 20px;              /* Height of the separator line */
    background-color: #454545; /* Match the background color of the chat */
    margin-left: 10px;          /* Space between title and separator */
}
#

you can adjust the px-s for whatever fits your name/status length requirements :)

buoyant dock
#

you should use a variable for this

2024-08-18_01.png
#

maybe var(--background-modifier-accent)? (the color of seperators in the channel list)

visual helm
#

not bad but a little bit more space between the bottom and a cenered avater and text will be the better and peak way

#

also it isnt line up with the server scroller

tender smelt
#

more space at the bottom can be done easily
centred avatar and text is not smth i wanted, bu i think it still stay simple to add
lining up with the discovery stuff is straight up impossible unless you scale down avatar + icons + text down

coral pawn
#

ythis works

tender smelt
#

because

shrewd citrus
#

hmm i think it'd be a bit too cramped with anything else and heightened discovery would look weird

#

nvm !!

tender smelt
shrewd citrus
#

yeah

#

i c now lol

pastel perch
tender smelt
pastel perch
#

Discord update

#

broken

#

Rip

tender smelt
#

That happen

pastel perch
tender smelt
tender smelt
# pastel perch Rip

alr it's fixed, you can copy the new stuff and it should now work as intended !

loud hamlet
#

sick i despaired when i saw it broke

tender smelt
#

also i am on stable and slightly behind vencord, so i might or might not be slower to update

tender smelt
#

i updated it again to use nested CSS functionality

pastel perch
tender smelt
pastel perch
tender smelt
#

Welp guess i know what i'll do on my lunch break

#

Wait

#

Maybe they did just revert

#

:cope:

tender smelt
tender smelt
#

it's indeed only broken on canary

#

they half reverted

tender smelt
# pastel perch they broke it again <:sobbign:1267900159698669588>

here's what you need (only works on canary)
they flattened content again

[class^=panels] > [class^=container] /* User area redesign */
{
    height: unset !important; /* Height being dynamic is fine */
    align-items: unset !important; /* Don't need that */
    padding: 6px 8px !important; /* Let those boxes breathe */
    flex-direction: column-reverse !important; /* Instead of going one next to the other, go stacked */
    gap: 2px !important; /* Again let them breathe */
    > [class^=avatarWrapper] /* Change the user box */
    {
        margin-right: unset !important; /* Useless */
        margin-left: unset !important; /* Useless */
        padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */
        ~ [class^=flex] /* Change the quick settings */
        {
            justify-content: space-evenly !important; /* Let them breathe */
        }
    }
}
tender smelt
coral pawn
#

oh

tender smelt
#

the duplication is ugly, but it's the price of nested CSS

coral pawn
tender smelt
coral pawn
tender smelt
#

welp good

#

doesn't visual refresh has one mode where it's a similar style tho

coral pawn
#

i dont think so

tender smelt
#

ideally the name would be more centered

coral pawn
#

hmm

#

oh

tender smelt
# pastel perch they broke it again <:sobbign:1267900159698669588>

alright i fixed it and made it work both on stable and canary

[class^=panels] > [class^=container] /* User area redesign */
{
    height: unset !important; /* Height being dynamic is fine */
    > [class^=content], &:not(:has(> [class^=content])) /* User area redesign */
    {
        align-items: unset !important; /* Don't need that */
        padding: 6px 8px !important; /* Let those boxes breathe */
        flex-direction: column-reverse !important; /* Instead of going one next to the other, go stacked */
        gap: 2px !important; /* Again let them breathe */
        > [class^=avatarWrapper] /* Change the user box */
        {
            margin-right: unset !important; /* Useless */
            margin-left: unset !important; /* Useless */
            padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */
            ~ [class^=flex] /* Change the quick settings */
            {
                justify-content: space-evenly !important; /* Let them breathe */
            }
        }
    }
}
tender smelt
coral pawn
#

wait what'

tender smelt
#

also since there is the space next to the name, it's not really useful

coral pawn
#

oh yeah

tender smelt
#

like i did this snippet cause without visual refresh, the name and status get cut off

coral pawn
#

oh

tender smelt
#

i mean you can use it if you like it, but imo it looks kinda bad

coral pawn
#

nah its ok

pastel perch
#

Thank you

loud hamlet
#

back to normal 🙏

image.png
#

i originally started using this so i could see my own status without it being cut off lol

tender smelt
tender smelt
#

MF

#

they broke it again

#

like bruh

image.png
#

WHY DISCORD WHY

image.png
tender smelt
# tender smelt alright i fixed it and made it work both on stable and canary ```css [class^=pan...

updated snippet, misplaced game activity icon needs vencord update to fix

[class^=panels] > [class^=container] /* User area redesign */
{
    height: unset !important; /* Height being dynamic is fine */
    align-items: unset !important; /* Don't need that */
    padding: 6px 8px !important; /* Let those boxes breathe */
    flex-direction: column-reverse !important; /* Instead of going one next to the other, go stacked */
    gap: 2px !important; /* Again let them breathe */
    > [class^=avatarWrapper] /* Change the user box */
    {
        margin-right: unset !important; /* Useless */
        margin-left: unset !important; /* Useless */
        padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */
        + [class^=buttons] /* Change the quick settings */
        {
            justify-content: space-evenly !important; /* Let them breathe */
        }
    }
}
loud hamlet
coral pawn
#

yeah

high rampart
pastel perch
tender smelt
#

i'll look into it tmr

tacit knot
#

does anyone have the most recent css snippet for radical status here?

#

like the full thing u put into the themes folder

pastel perch
tacit knot
#

thanks a lot! it's only a picture?

buoyant dock
tacit knot
#

oh yeah on a closer look that pic was NOT this css

#

lol

tender smelt
#

i'll do it now

tender smelt
#

you have this version right ?

[class^=panels] > [class^=container] /* User area redesign */
{
    height: unset !important; /* Height being dynamic is fine */
    align-items: unset !important; /* Don't need that */
    padding: 6px 8px !important; /* Let those boxes breathe */
    flex-direction: column-reverse !important; /* Instead of going one next to the other, go stacked */
    gap: 2px !important; /* Again let them breathe */
    > [class^=avatarWrapper] /* Change the user box */
    {
        margin-right: unset !important; /* Useless */
        margin-left: unset !important; /* Useless */
        padding-left: 4px !important; /* Make it slightly bigger for consistency with the right side */
        + [class^=buttons] /* Change the quick settings */
        {
            justify-content: space-evenly !important; /* Let them breathe */
        }
    }
}
pastel perch
#

Idk what happened then

tender smelt
#

what's funni is the snipper nearly work perfectly on Visual Refresh

pastel perch
#

Paired with mine, make a account panel perfect

image.png
neat whale
tender smelt
#

yeah
i'm maybe gonna slightly edit it on refresh at some point, but not now

tender smelt
neat whale
#

its alright, doesnt sound too bad actually

#

no idea how i have tho i just logged in one day and had it

pastel perch
tender smelt
tender smelt
molten mantle
#

@tender smelt @pastel perch Is there currently a bug with the voice filter experiment? When I enable flamingo it shows the voice filter drop down however it then displays "something went wrong" "try again or restart discord" and it won't show any of the voice filters

pastel perch
molten mantle
pastel perch
tender smelt
#

Lmao

#

Alright i'll look at it and hope i can catch it

#

I can't look this whole morning, but this afternoon for sure it won't have changed

pastel perch
#

I swear to God you’re gonna look at the file and everything’s gonna be perfectly fine

tender smelt
#

do you have specific experiments flags or smth enabled ?

#

can you send me the panels element like this ?

pastel perch
#

Honestly idk

#

Im not at my computer rn

#

I’ll look later

#

Also discord just hates me soo thats prolly it

tender smelt
#

this is on canary btw

pastel perch
#

Bruh I main canary

shrewd citrus
#

this is currently my layout btw

FFHUJ2VQEERjDfMM.png
tender smelt
#

broken again, will fix

worthy marsh
#

is it broken again? its not working for me

tender smelt
#

it should still be working, but if you are on an outdated Vencord version, stuff like game activity toggle can be missing

image.png
flint hare
#

i just updated vencord and its still broken

image.png
worthy marsh
worthy marsh
tender smelt
#

Are you guys on stable or canary ?

worthy marsh
#

im on stable

#

i just opened up canary to test it and it does the same thing

flint hare
#

Same, I'm on stable

tender smelt
#

mmmmmmmmm

#

how come it breaks on other people but not me

worthy marsh
#

ive noticed discord updating some of their icons and UI stuff and idk if its out for everyone maybe it just hasnt updated for you yet?

#

stuff like this and other shit

image.png
tender smelt
#

no i don't have that

#

but i force the old settings

worthy marsh
#

thats prob why

pastel perch
tender smelt
#

it's been a very long time i didn't update

#

i'm gonna make it a new snippet probably

pastel perch
#

It’s been working for me. Just fine until now.

tender smelt
#

well discord does a lot of changes

pastel perch
#

Ik

tender smelt
#

i'll probably split the part of special 2 bar design with the part where the more global user area is edited so it's inside of the channel stack

pastel perch
#

I like the idea

tender smelt
#

my god

#

they played with it YET AGAIN

tender smelt
#

at least i have a diff screenshot so finding out the values should be easy enough

image.png
#

wait they just renamed avatarWrapper into accountPopoutButtonWrapper

#

WHY

tender smelt