HorizontalServerList Server bar back on the left side with icons rotated 90° clockwise.

Describe the bug

Title: Server bar back on the left side with icons rotated 90° clockwise. I'm guessing discord update changing the markup.

To Reproduce

Use the theme. Has been replicated with settings file removed in case that mattered.

Screenshots

Infomation

Discord channel: Stable OS: Windows Mod: Vencord Discord language: English

Additional context

Probably discord changing things per the usual.

Oct 30 '25 17:10 Benji7010

@Benji7010

found the values that have been changed

.sidebar_c48ade > .sidebar__5e434 .content_c48ade -> .content__5e434 .guilds_c48ade -> .guilds__5e434

or just _c48ade -> __5e434

here's the full thing to use in your quick css, or file until someone fixes it and updates, don't use the link on vencord until then

.content__5e434 { margin-top: var(--custom-guild-list-width); overflow: visible !important; }

#app-mount .sidebar__5e434 { border-radius: 0; overflow: visible !important; } #app-mount .guilds__5e434 { transform-origin: top left; rotate: -90deg; height: 100vw !important; bottom: unset; position: absolute !important; left: 0; } #app-mount .tree_ef3116 { padding-top: var(--HSL-top-padding, var(--size-sm)); } #app-mount .wrapper_cc5dd2 { rotate: 90deg; } #app-mount .itemsContainer_ef3116, #app-mount .stack_dbd263 { flex-direction: var(--HSL-server-direction); justify-content: var(--HSL-server-alignment); }

.container_c48ade > div[style]:not(.base_c48ade) { width: 100vw !important; height: var(--custom-guild-list-width) !important; position: absolute; top: calc(var(--custom-guild-list-width) + var(--custom-app-top-bar-height)); pointer-events: none; z-index: 1; } .container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade { pointer-events: all; } .container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 { margin-top: calc(var(--custom-guild-list-width) * 2); }

:root { --HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column / --HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */ }

Oct 30 '25 20:10 PoTPeM

@PoTPeM thank you for the fix it works could I ask you to see if you can fix the issue in #79 ?

Oct 31 '25 08:10 AerinUWU

How do i change , so i can put the server list on the bottom?

Oct 31 '25 20:10 DarkShadow012

Same with BetterDiscord mod

Information

Discord channel: Stable OS: Linux Mint 22.1 Mod: BetterDiscord Discord language: English

stable 463311 (9861980) Host 0.0.81 x64 Build Override: N/A Linux 64-bit (6.8.0-85-generic)

Nov 01 '25 05:11 DontBotherYT

How do i change , so i can put the server list on the bottom?

I copied the values from the bottomhsl.css file into the above and it worked for me, here it is for easier copying:

overflow: visible !important;
margin-top: unset;
margin-bottom: var(--custom-guild-list-width);
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
top: calc(100% + var(--custom-guild-list-width));
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
pointer-events: none;
z-index: 1;
bottom: calc(var(--custom-guild-list-width) * 2);
top: unset;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
top: calc(100% + var(--custom-guild-list-width) * 2) !important;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: unset;
margin-bottom: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}```

Nov 03 '25 09:11 DazedFairywren

Can confirm is an issue and that @PoTPeM 's fix does work.

Nov 04 '25 15:11 Oroborius

How do i change , so i can put the server list on the bottom?

I copied the values from the bottomhsl.css file into the above and it worked for me, here it is for easier copying:

overflow: visible !important;
margin-top: unset;
margin-bottom: var(--custom-guild-list-width);
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
top: calc(100% + var(--custom-guild-list-width));
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
pointer-events: none;
z-index: 1;
bottom: calc(var(--custom-guild-list-width) * 2);
top: unset;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
top: calc(100% + var(--custom-guild-list-width) * 2) !important;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: unset;
margin-bottom: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}```

This has not worked for me, infact all it did was entirely remove the servers list

Nov 04 '25 23:11 LuxLauncher

How do i change , so i can put the server list on the bottom?

I copied the values from the bottomhsl.css file into the above and it worked for me, here it is for easier copying:

overflow: visible !important;
margin-top: unset;
margin-bottom: var(--custom-guild-list-width);
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
top: calc(100% + var(--custom-guild-list-width));
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
pointer-events: none;
z-index: 1;
bottom: calc(var(--custom-guild-list-width) * 2);
top: unset;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
top: calc(100% + var(--custom-guild-list-width) * 2) !important;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: unset;
margin-bottom: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}```

This has not worked for me, infact all it did was entirely remove the servers list

just use the one from @PoTPeM like below

.content__5e434 {
margin-top: var(--custom-guild-list-width);
overflow: visible !important;
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
top: calc(var(--custom-guild-list-width) + var(--custom-app-top-bar-height));
pointer-events: none;
z-index: 1;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}

Nov 05 '25 02:11 IndividualZenbo21

How do i change , so i can put the server list on the bottom?

I copied the values from the bottomhsl.css file into the above and it worked for me, here it is for easier copying:

overflow: visible !important;
margin-top: unset;
margin-bottom: var(--custom-guild-list-width);
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
top: calc(100% + var(--custom-guild-list-width));
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
pointer-events: none;
z-index: 1;
bottom: calc(var(--custom-guild-list-width) * 2);
top: unset;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
top: calc(100% + var(--custom-guild-list-width) * 2) !important;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: unset;
margin-bottom: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}```

This has not worked for me, infact all it did was entirely remove the servers list

just use the one from @PoTPeM like below

.content__5e434 {
margin-top: var(--custom-guild-list-width);
overflow: visible !important;
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
top: calc(var(--custom-guild-list-width) + var(--custom-app-top-bar-height));
pointer-events: none;
z-index: 1;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}

sure i could, but i do not like it on the top. i prefer it on the botton and i rather not use it if its on the top

Nov 06 '25 01:11 LuxLauncher

How do i change , so i can put the server list on the bottom?

I copied the values from the bottomhsl.css file into the above and it worked for me, here it is for easier copying:

overflow: visible !important;
margin-top: unset;
margin-bottom: var(--custom-guild-list-width);
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
top: calc(100% + var(--custom-guild-list-width));
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
pointer-events: none;
z-index: 1;
bottom: calc(var(--custom-guild-list-width) * 2);
top: unset;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
top: calc(100% + var(--custom-guild-list-width) * 2) !important;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: unset;
margin-bottom: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}```

This has not worked for me, infact all it did was entirely remove the servers list

just use the one from @PoTPeM like below

.content__5e434 {
margin-top: var(--custom-guild-list-width);
overflow: visible !important;
}

#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}

.container_c48ade > div[style]:not(.base_c48ade) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
top: calc(var(--custom-guild-list-width) + var(--custom-app-top-bar-height));
pointer-events: none;
z-index: 1;
}
.container_c48ade > div[style]:not(.base_c48ade) .guilds_c48ade {
pointer-events: all;
}
.container_c48ade > div[style]:not(.base_c48ade) + .base_c48ade .content__5e434 {
margin-top: calc(var(--custom-guild-list-width) * 2);
}

:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column /
--HSL-server-alignment: flex-start; / Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}

This fixed the horizontal server list, but now the mute button cuts into the profile picture. Not sure how/if to fix this myself.

Nov 06 '25 01:11 VisualBuddhist

just drag the boarder

Nov 07 '25 00:11 LuxLauncher

Should be fixed now?

Nov 07 '25 00:11 Gibbu

it is but when i enable the bottom it works but the top part stays. well it moves to the bottom

Nov 07 '25 03:11 LuxLauncher