Skip to content

Instantly share code, notes, and snippets.

@aarav2you
Last active May 5, 2024 10:10
Show Gist options
  • Save aarav2you/d66e2369074fb70f74e061062c77e9c4 to your computer and use it in GitHub Desktop.
Save aarav2you/d66e2369074fb70f74e061062c77e9c4 to your computer and use it in GitHub Desktop.
Modifications for the Discord client to remove the clutter
/*==========
RemoveClutter.theme.css by aarav2you
How to inject: Paste in "Custom CSS" tab in BetterDiscord or download and use as theme
========== */
/* Stickers same size as emojis */
.assetWrapper-3GNt0z {
max-width: 48px;
max-height: 48px;
}
/* Removes the nitro button at left-bottom */
.fixedBottomList-1yrBla {
display: none;
}
/* Removes the Search Bar at the top of DMS */
.searchBar-3TnChZ {
display: none;
}
/* Removes the Big Nitro Button */
a[href="/store"] {
display: none;
}
/* Removes "Inbox" button */
div[aria-label="Inbox"] {
display: none;
}
/* Removes "Support" question mark button */
a[href="https://support.discord.com"]
{
display: none;
}
/* Removes "Support" question mark button from search popup */
.searchLearnMore-1gNL3A {
display: none;
}
/* Removes "Active Now" section in Friends tab */
*[class^='nowPlayingColumn'] {
display: none;
}
/* Removes the "Group DM" button and divider in Friends tab */
.inviteToolbar-2k2nqz {
display: none;
}
/* Removes "Gift nitro" button from message bar */
button[aria-label="Send a gift"] {
display: none;
}
/* Removes "Sticker picker" button from message bar */
button[aria-label="Open sticker picker"] {
display: none;
}
/* Removes "GIF picker" button from message bar */
button[aria-label="Open GIF picker"] {
display: none;
}
/* Hides "Mark as Read" and icon in the "Unread messages" notification */
.barButtonAlt-TQoCdZ.barButtonBase-Sk2mdB {
display: none;
}
/* Hides the New Message indicator next to only folders */
.wrapper-38slSD > .listItem-3SmSlK > .pill-2RsI5Q {
display: none;
}
/* Nitro Shop */
[data-list-item-id*="__nitro"] {
display: none;
}
[data-list-item-id*="__shop"] {
display: none;
}
[aria-label="Send a gift"]{
display: none;
}
/* Disable Store button in Home tab */
a[href="/shop"] {
display:none;
}
@aarav2you
Copy link
Author

If you want to add anything to the list and don't know how just ask here, I will likely do it

@verbes4
Copy link

verbes4 commented Nov 18, 2022

would it be possible to remove the "Explore Public Servers" button from the bottom of the server list

@verbes4
Copy link

verbes4 commented Nov 18, 2022

also maybe the entire "Billing Settings" section in the settings menu if possible thank you

@aarav2you
Copy link
Author

@verbes4 Sure, I will add that. Is the current code working as of now? It is not for me. If it is also not for you then I will have to re-write it completely.

@verbes4
Copy link

verbes4 commented Nov 21, 2022 via email

@aarav2you
Copy link
Author

aarav2you commented Nov 21, 2022

@verbes4 I personally do use the public servers option, so I am not going to include it in the code. However you can add the following code to do that

div[aria-label="Explore Public Servers"] {
        display: none;
}

Some people would like to use the billing section, so this might work for you but it is very hacky:
EDIT: This code is only for 1 button, for the whole billing section scroll down

#app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div:nth-child(2) > div > div.sidebarRegion-1VBisG > div > nav > div > div:nth-child(15) {
        display: none;
}

@verbes4
Copy link

verbes4 commented Nov 21, 2022

thank you very much :)

@aarav2you
Copy link
Author

thank you very much :)

Np, did you mean the whole Billing section or the button that says Billing in the Billing section?

@aarav2you
Copy link
Author

Because the code is only for the latter, but I could make it for the former if needed

@verbes4
Copy link

verbes4 commented Nov 22, 2022 via email

@aarav2you
Copy link
Author

aarav2you commented Nov 22, 2022

just the button is fine, but if you have the time the whole section would be nice too

Here:

Removed, see latest comment

Please consider starring this gist, thanks

@aarav2you
Copy link
Author

#app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div:nth-child(2) > div > div.sidebarRegion-1VBisG > div > nav > div > div:nth-child(9)~div:not(#app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div:nth-child(2) > div > div.sidebarRegion-1VBisG > div > nav > div > div:nth-child(16) ~ div) {
  display: none;
}

Looks like the previous code stopped working unexpectedly, can confirm this works

@verbes4
Copy link

verbes4 commented Nov 25, 2022

thank you, this works perfectly. i starred the gist :)

@verbes4
Copy link

verbes4 commented Dec 8, 2022

would it be possible to remove the new snowsgiving button at the top of the dms list? :)

@NayooZ
Copy link

NayooZ commented Dec 10, 2022

would it be possible to remove the new snowsgiving button at the top of the dms list? :)

/* Hide Snowsgiving */
a[class^="anchor-1MIwyf anchorUnderlineOnHover-2qPutX snowsgivingLink-1TZi3c"] { display: none; }

@verbes4
Copy link

verbes4 commented Dec 12, 2022

would it be possible to remove the new snowsgiving button at the top of the dms list? :)

/* Hide Snowsgiving */ a[class^="anchor-1MIwyf anchorUnderlineOnHover-2qPutX snowsgivingLink-1TZi3c"] { display: none; }

works perfectly, thanks :)

@Shaddow798
Copy link

If you could please modify your hide public servers code to fix it when you are hovering over the whitespace and for when the window is too small remove the gap at the bottom of the list it creates.
image

@aarav2you
Copy link
Author

If you could please modify your hide public servers code to fix it when you are hovering over the whitespace and for when the window is too small remove the gap at the bottom of the list it creates. image

i guess you can use the following instead of the original code but its hacky. if i had more time i would have done a proper solution

#app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div > div.container-1eFtFS > nav > ul > div.scroller-3X7KbA.none-2-_0dP.scrollerBase-_bVAAt > div:nth-child(5) {
        display: none;
}

@ahm-t
Copy link

ahm-t commented Nov 8, 2023

@aarav2you Could you remove the new nitro shop that's under the "Message Requests" button in the dms screen

@NayooZ
Copy link

NayooZ commented Nov 9, 2023

@aarav2you Could you remove the new nitro shop that's under the "Message Requests" button in the dms screen


[data-list-item-id*="__nitro"] {
  display: none;
}
[data-list-item-id*="__shop"] {
  display: none;
}
[aria-label="Send a gift"]{
  display: none;
}

@C-Kenny
Copy link

C-Kenny commented Dec 3, 2023

The Discord div class names seem to have a random string at the end of the name that changes on their builds. For example it used to be nowPlayingColumn-1eCBCN and now it's nowPlayingColumn_f5023f. Is there a way to match only the prefix of the element names?

For now the latest way to hide "active now" users is:

/* Removes "Active Now" section in Friends tab */
.nowPlayingColumn_f5023f {
        display: none;
}

@Nightblade
Copy link

Nightblade commented Jan 17, 2024

@C-Kenny

/* Removes "Active Now" section in Friends tab */
*[class^='nowPlayingColumn'] {
    display: none;
}

@forever-and-a-day
Copy link

Could you also all a rule removing the shop?

@Nightblade
Copy link

Nightblade commented Feb 22, 2024

@forever-and-a-day

/* Disable Store button in Home tab */
a[href="/shop"] {
    display:none;
}

@LavenderAndChamomile
Copy link

LavenderAndChamomile commented Apr 28, 2024

Glad to see that this long code still works!

@USBCharger
Copy link

USBCharger commented Apr 29, 2024

Could you drop the css code here on how I can remove the Download Apps button? (I'm using vesktop, hence why it appears)

Also, how would we go about finding the css code that goes to a button in case I want to remove more in the future, or modify other
things?

Edit: I'm realizing this is not caused by Vesktop but a my-theme-is-old-and-has-problems issue lol
Edit 2: I just went with another theme, but being linked to a tutorial or smth to learn how to do this may still be helpful in the future to me - or others

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment