| So, you've probably gotten the new desktop client's UI if you're reading this and wondering how to revert the UI back to the classic look of Discord. | |
| This is pretty easy if followed properly, For context, this new UI is called the "Desktop Visual Refresh" and was experimented with by Discord from May 2024. | |
| Anyway, back to the actual guide. | |
| 1. Download Vencord's installer from https://vencord.dev (This is the only official Vencord link!) | |
| 2. Open the installer, install Vencord (It should show your Discord install path) | |
| 3. Once installed, relaunch your Discord client and go to settings, you should see a "Vencord" category. | |
| 4. Go to plugins, search for the plugin called "Experiments" and restart the Discord client. | |
| 5. Go back to settings, scroll down in the menu and you should see alot of new options in the category "Developer Only" | |
| 6. Go to Experiments and search for "Desktop Visual Refresh" then click on it and set it to "Not Eligible" | |
| 7. Enjoy it while it still lasts! | |
| If you want to fix up the UI (padding, scaling, etc.) you can use this CSS listed here: https://gist.github.com/n1d3v/0a856d98b9adda5dda96c0deae32b4f3?permalink_comment_id=5519959#gistcomment-5519959 (Not mine, thank you qyurila) | |
| If you don't know how to import it, you can follow these steps: | |
| 1. Open Discord settings, go to the "Vencord" category and click the "Vencord" option. | |
| 2. Click "Edit QuickCSS" and paste the code in | |
| 3. Exit the QuickCSS window and your done! Discord should be looking mostly normal again. |
they removed it. they are trying to force this shitty UI down our throats. I dont think they understand how much we hate it. well just keep finding new work arounds. Im using oldcord
Im a bit upset that half of my themes just dont work now lol, what can ya do
well.. i tried unshittify, i didnt like the top bar, especially as the search bar became unusable so here is some css that is a bit better and also uses some code from unshittify to move your profile back to the right. You can also combine this with the Desktop Refresh Fast Follows experiment on treatment 3 to hopefully make the server list a bit more like before
.visual-refresh { div.subtitleContainer_f75fb0, main.container__133bf section.container__9293f { width: calc(100% - 172px); } div.page_c48ade { &:not(:has(> div.chat_f75fb0)) { anchor-name: --vr-header-snippet; } & > div.chat_f75fb0 { anchor-name: --vr-header-snippet; } } div.base_c48ade { grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end]; &:has(div.bar_c38106 > div.trailing_c38106 > *:nth-child(3)) { & div.subtitleContainer_f75fb0, & main.container__133bf section.container__9293f { width: calc(100% - 216px); } } & > div.bar_c38106 { position: absolute; position-anchor: --vr-header-snippet; top: 0; right: anchor(right); width: anchor-size(width); padding: 0; } & div.trailing_c38106 { background: var(--background-base-lower); border: none; border-bottom: 1px solid var(--border-subtle); height: var(--custom-channel-header-height); } } :not(:has(div.page_c48ade > div.chat_f75fb0)) div.base_c48ade > div.bar_c38106 { right: 0 !important; } ul[data-list-id="guildsnav"] > div.itemsContainer_ef3116 { margin-top: 16px; } div.topic__6ec1a { -webkit-app-region: no-drag; } } .visual-refresh .panels_c48ade { right: var(--space-xs) !important; left: auto; bottom: var(--space-xs); width: calc(100% - var(--space-xs) * 2 - var(--custom-guild-list-width)); } /* from https://github.com/MaiRiosIPla/unshittify-discord to move profile container :3 */ .visual-refresh .guilds_c48ade { margin-bottom: 0; } .visual-refresh .base_c48ade { grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end]; }
does this make the new ui little bit better and would that be all?
Discord I hope you and all your loved ones fucking die
https://gist.github.com/qyurila/f82e1b4719b156e7710d64fcd07f4c09
Anyway feel free to check out my personal QuickCSS I just updated: it reverts some and polishes some others
Anyone has a CSS snippet to make the server icons bigger?
:root {
--guildbar-avatar-size: 48px !important;
--blob-scale: 48;
--guildbar-folder-size: var(--guildbar-avatar-size);
--folder-blob-scale: var(--blob-scale);
}The above snippet doesn't work for me, it just shifts the icons. source
original:
with the above css snippet:
Anyone has a CSS snippet to make the server icons bigger?
:root { --guildbar-avatar-size: 48px !important; --blob-scale: 48; --guildbar-folder-size: var(--guildbar-avatar-size); --folder-blob-scale: var(--blob-scale); }The above snippet doesn't work for me, it just shifts the icons. source
@MP3Martin You missed the most important (or the only relevant) line. Insert the following line right above the codes you posted -- or replace them with it if you're not gonna customize the icon size.
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");Also note that generally @import rules should be at the top of the CSS scripts (alongside each other - refer my QuickCSS if you're not certain) to work as intended.
set "width: calc(100% - 216px);" to width: "calc(100% - 75px);" to remove the black box. It worked for me.
This is obviously a shitty job discord is doing by literally forcing us to switch to this new ui which has similarities to hot trash, but is it a case of Discord actually removing the experiment or is Discord slowly making the app harder to use on the old ui?
@qyurila thanks, that did it. I was using that one @import at the end of the custom CSS file instead of start
is anyone gonna polish up oldcord or make a better version? there is no way im sticking with this horrible UI. thanks in advance. for now, the only thing that keeps the UI from being absolute dogshit is @qyurila 's QuickCSS.
best i got is enabling Vencord ToolBox then open Quick CSS and
@import url('https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css');
@import url('https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css');
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
:root {
--guildbar-avatar-size: 48px !important;
--blob-scale: 48;
--guildbar-folder-size: var(--guildbar-avatar-size);
--folder-blob-scale: var(--blob-scale);
}
set "width: calc(100% - 216px);" to width: "calc(100% - 75px);" to remove the black box. It worked for me.
works for me too, thanks. also, just so everyone knows, it's the one under div.base_c48ade, not the one at the top under .visual-refresh, keep that one at 216 pixels
there has to be a way to revert to an older version of discord and bring back the desktop visual refresh option in experiments.
https://www.reddit.com/r/BetterDiscord/comments/1jzic8i/new_discord_ui_revert_using_oldcord_guide/ found this reddit post that helped make a new theme.
there has to be a way to revert to an older version of discord and bring back the desktop visual refresh option in experiments.
This would be a temporary solution and could potentially pose a risk to your account in the long term. The old UI is truly dead, but themes can still mimic it with enough effort.
With the CSS script, does anyone know how to widen the space between the help button and the edge of the screen?
Yep, Discord has removed the experiment sadly. They never listen to their users, it's only to make the private investors happy. I made some personal fixes for the client which makes it slightly more usable for me. I'm not great with CSS so it might be awful, but it does work.
It looks like this for anyone curious:
(Edit: Fixed typing indicators)
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
/* Taken from https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css */
/* Fix for user modal rescaling */
.button__201d5 {
padding: unset !important;
}
.visual-refresh .panels_c48ade {
right: var(--space-xs) !important;
left: auto;
bottom: var(--space-xs);
width: calc(100% - var(--space-xs) * 2 - var(--custom-guild-list-width));
}
.visual-refresh .guilds_c48ade {
margin-bottom: 0;
}
.channelTextArea_f75fb0 {
margin-bottom: var(--space-xs);
.inner__74017 {
--custom-channel-textarea-text-area-max-height: 56px;
--custom-channel-textarea-text-area-height: var(
--custom-channel-textarea-text-area-max-height
);
}
}
/* Fixes for the native titlebar (Remove this if you don't use it) */
.title_c38106 {
align-items: center;
justify-content: left;
padding-left: 16px;
}
.trailing_c38106 {
padding-right: 16px;
gap: 3px !important;
}
.winButtons_c38106 {
display: none;
}
/* Removes the "Play Again" section in Direct Messages */
.container__675e5 {
display: none;
}
.sectionDivider__35e86 {
display: none;
}
.privateChannelsHeaderContainer__99e7c {
margin-top: 6px;
}
/* Fixes the off padding on the message box */
.uploadInput__0923f {
padding-left: 16px;
}
/* This removes the app launcher button in the chat bar */
.channelAppLauncher_e6e74f, .buttonContainer_e6e74f, .app-launcher-entrypoint {
display: none;
}
/* This fixes the typing indicators clipping through the message box */
.typing_b88801 {
margin-bottom: 12px;
margin-left: 8px;
}
.form_f75fb0:has(.typing_b88801) {
.channelTextArea_f75fb0 {
padding-bottom: 16px;
}
}
For those of you who don't want the ugly thick titlebar at the top of the screen and also want the server messages box to be aligned with your profile box, I've modified Pixel1011's script with some of the code from n1d3v's script.
.visual-refresh {
div.subtitleContainer_f75fb0,
main.container__133bf section.container__9293f {
width: calc(100% - 216px);
}
div.page_c48ade {
&:not(:has(> div.chat_f75fb0)) {
anchor-name: --vr-header-snippet;
}
& > div.chat_f75fb0 {
anchor-name: --vr-header-snippet;
}
}
div.base_c48ade {
grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end];
&:has(div.bar_c38106 > div.trailing_c38106 > *:nth-child(3)) {
& div.subtitleContainer_f75fb0,
& main.container__133bf section.container__9293f {
width: calc(100% - 75px);
}
}
& > div.bar_c38106 {
position: absolute;
position-anchor: --vr-header-snippet;
top: 0;
right: anchor(right);
width: anchor-size(width);
padding: 0;
}
& div.trailing_c38106 {
background: var(--background-base-lower);
border: none;
border-bottom: 1px solid var(--border-subtle);
height: var(--custom-channel-header-height);
}
}
:not(:has(div.page_c48ade > div.chat_f75fb0)) div.base_c48ade > div.bar_c38106 {
right: 0 !important;
}
ul[data-list-id="guildsnav"] > div.itemsContainer_ef3116 {
margin-top: 16px;
}
div.topic__6ec1a {
-webkit-app-region: no-drag;
}
}
.visual-refresh .panels_c48ade {
right: var(--space-xs) !important;
left: auto;
bottom: var(--space-xs);
width: calc(100% - var(--space-xs) * 2 - var(--custom-guild-list-width));
}
/* from https://github.com/MaiRiosIPla/unshittify-discord to move profile container :3 */
.visual-refresh .guilds_c48ade {
margin-bottom: 0;
}
.visual-refresh .base_c48ade {
grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end];
}
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
.trailing_c38106 {
padding-right: 8px;
gap: 3px !important;
}
.channelTextArea_f75fb0 {
margin-bottom: var(--space-xs);
.inner__74017 {
--custom-channel-textarea-text-area-max-height: 56px;
--custom-channel-textarea-text-area-height: var(
--custom-channel-textarea-text-area-max-height
);
}
}
Here's a screenshot:
In my opinion, this is as close to the old UI as we'll ever get.
@Tulugaak I used the above code and for me there is still a "ghost" of the server logo and name towards the top is there something i missed in the above code as i dont see it in your presented screenshot but here is what mine looks like
@n0cturnal0709 from the looks of it, it could just be a broken window theme (the theme which controls the three buttons in the top right) that hasn't been updated yet, try switching back to the default one and seeing what happens
@Tulugaak That worked Thank you so much! hope i can find a new theme that was close to that one though. Really irritating that it breaks almost all themes that were present before :/
https://github.com/Meekiavelique/revert_visual_refresh
I made a similar theme that is trying to be close to the old one, contribute if you can !
In my opinion, this is as close to the old UI as we'll ever get.
I'm sure someone will at some point recreate the old UI, I could try at some point, but I'm not great with this stuff. If I attempt anything I'll post it here.
Fuck discord, literally unusable. Also return russian voice servers
I cant find "Desktop visual refresh" in experiments anymore?? My discord was with the old UI by doing this before but I don't know why today it's just disappeared.
I cant find "Desktop visual refresh" in experiments anymore?? My discord was with the old UI by doing this before but I don't know why today it's just disappeared.
They removed it
Why did they remove it!?!?!?
F
@import url('https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css');
@import url('https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css');
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
:root {
--guildbar-avatar-size: 48px !important;
--blob-scale: 48;
--guildbar-folder-size: var(--guildbar-avatar-size);
--folder-blob-scale: var(--blob-scale);
}
thanks, i've tried doing this before on Vesktop, and that worked. however, discord rolled out an update, and now the "Desktop Visual Refresh" flag got removed, so now i'm stuck on the new ui.
is there another flag or some CSS code (or anything else advanced) i could do to turn it off again?