Skip to content

Instantly share code, notes, and snippets.

@cheesits456
Last active March 26, 2025 20:16
Show Gist options
  • Save cheesits456/41d659f932b5a574b5dfb9b391a4506e to your computer and use it in GitHub Desktop.
Save cheesits456/41d659f932b5a574b5dfb9b391a4506e to your computer and use it in GitHub Desktop.
Custom CSS for Discord to remove the GIF picker and Nitro Gift buttons from the message bar
/**
* @name Remove Buttons
* @version 1.1.1
* @author cheesits456
* @authorId 306018440639152128
* @description Remove the nitro gift, GIF picker, and sticker picker buttons from the message box. Also remove the sticker suggestion popup
* @source https://gist.github.com/cheesits456/41d659f932b5a574b5dfb9b391a4506e
* @invite 7QH4YeD
* @donate https://donate.haileybot.com
* @website https://cheesits456.dev
*/
/* Hide Nitro gift button */
button[aria-label="Send a gift"] {
display: none;
}
/* Hide GIF picker button */
button[aria-label="Open GIF picker"] {
display: none;
}
/* Hide sticker picker button */
button[aria-label="Open sticker picker"] {
display: none;
}
/* Hide annoying sticker popup window that appears when you type */
.channelTextArea-1FufC0 > .container-1ZA19X {
display: none;
}
@FlurryShy
Copy link

Anybody got a way to hide the "Discover" button in the server list via css? The newest update made it stuck at the bottom corner regardless of how many servers you have, and I don't plan on ever using it. image

been using the following for that...

/* Public server thing */
.tutorialContainer_c96c45+div { 
	display: none;
}

@BrambleTakato
Copy link

BrambleTakato commented Aug 19, 2024

Anybody got a way to hide the "Discover" button in the server list via css? The newest update made it stuck at the bottom corner regardless of how many servers you have, and I don't plan on ever using it. image

been using the following for that...

/* Public server thing */
.tutorialContainer_c96c45+div { 
	display: none;
}

Huh... This didn't work for me, but thank you for helping regardless ^^ Maybe it'll work for other people

@FlurryShy
Copy link

FlurryShy commented Aug 19, 2024

found it - you are in an A/B testing experiment. @BrambleTakato
you options: disable the experiment called "global discovery" or use the following code:

.footer_aa1bff{
    display:none;
}

@KulenFlulen
Copy link

There is a new "Apps Launcher" button thing added to all channels on the bottom right edge, outside the text box.
This CSS removed it for me

/* Remove App Launcher from chat channels */
div[class^="channelAppLauncher_"] {
    display: none;
}

@PancakeIdentity
Copy link

Thanks for the Apps Launcher CSS! It seems like the other chat buttons aren't being removed with the CSS above, though? I pasted all 3 in and none were removed.

@BrambleTakato
Copy link

found it - you are in an A/B testing experiment. @BrambleTakato you options: disable the experiment called "global discovery" or use the following code:

.footer_aa1bff{
    display:none;
}

OK this worked wonderfully! Kind of a shame they threw me into that experiment... This code is very helpful as I can see Discord definitely wedging this for other users in the future. Thank you so much!!

@King-Raz
Copy link

There is a new "Apps Launcher" button thing added to all channels on the bottom right edge, outside the text box. This CSS removed it for me

/* Remove App Launcher from chat channels */
div[class^="channelAppLauncher_"] {
    display: none;
}

Thanks for this! Exactly what I've been looking for.

@clownmedy
Copy link

There is a new "Apps Launcher" button thing added to all channels on the bottom right edge, outside the text box. This CSS removed it for me

/* Remove App Launcher from chat channels */
div[class^="channelAppLauncher_"] {
    display: none;
}

Thx

@0aShadow
Copy link

0aShadow commented Aug 24, 2024

For the "new" button for nitro gifts, here is the new code to remove it:
Will send the "new" Sticker and Gif stuff aswell.
They change the id's of the buttons from time to time (idk why) so it has to be updated.

/* Remove Gift-Button */
.container_efde15 > .grow_dd4f85.colorBrand_dd4f85.lookBlank_dd4f85.button_dd4f85 > .button_bdf0de.button_f9af59.contents_dd4f85 {
    display: none;
}

Also thank you @KulenFlulen for the App-Shit removal... sadly I did not get this working as clean as you got it with the Gift button 😄

Edit:
For those who also want to remove GIF / STICKER / EMOJI -Buttons there is a way to do so:
If you are using vencord and also have custom plugins like "Translator" or "Silent Message" you can use following thing for the buttons in order:

.buttonContainer_d0696b.expression-picker-chat-input-button:nth-of-type(XXXXX){
    display: none;
}

In this case the "XXXXX" is the number of the position from the icon/function you want to remove.
In my case for the GIF it would be the 4 like this:

.buttonContainer_bdf0de.expression-picker-chat-input-button:nth-of-type(4) {
    display: none;
}

The order goes from left to right 1 -> 2 -> 3 ....

Hope this helps a bit. :)

@MarioLuigi0404
Copy link

In this case the "XXXXX" is the number of the position from the icon/function you want to remove. In my case for the GIF it would be the 3 like this: dc-oder

Heads up @0aShadow, the image link there seems broken

@NotDarkn
Copy link

NotDarkn commented Sep 13, 2024

Edit: For those who also want to remove GIF / STICKER / EMOJI -Buttons there is a way to do so: If you are using vencord and also have custom plugins like "Translator" or "Silent Message" you can use following thing for the buttons in order:

buttonContainer_d0696b.expression-picker-chat-input-button:nth-of-type(XXXXX){
    display: none;
}

In this case the "XXXXX" is the number of the position from the icon/function you want to remove. In my case for the GIF it would be the 3 like this: dc-oder

buttonContainer_d0696b.expression-picker-chat-input-button:nth-of-type(3){
    display: none;
}

The order goes from left to right 1 -> 2 -> 3 ....

Hope this helps a bit. :)

yo heads up! make sure to include . in the beginning of the buttonContainer code boxes, as then it won't work.

@TheOttoZone
Copy link

TheOttoZone commented Oct 4, 2024

For the "new" button for nitro gifts, here is the new code to remove it: Will send the "new" Sticker and Gif stuff aswell. They change the id's of the buttons from time to time (idk why) so it has to be updated.

/* Remove Gift-Button */
.buttons_d0696b > .grow_dd4f85.colorBrand_dd4f85.lookBlank_dd4f85.button_dd4f85{
    display: none;
}

specifically the nitro button code isnt working for me, any fix?

@0aShadow
Copy link

0aShadow commented Oct 29, 2024

Updated original Post with new values (29.10.2024)
As long as they constantly changing these containers, it will start not working again.
I hope there is a good Plugin-Dev that can actually remove them regardless of ther div-names and can reach out to vencord.

If you keep posting here I'll try to maintain this code from time to time, but with Manifest 3 coming to chromium it'll be a lot harder to find these entrys in their shitty code :D

Have a nice day ladies n gentleman

@FlurryShy
Copy link

FlurryShy commented Oct 30, 2024

@0aShadow

if you don't mind it being language dependent you can just do this and be done with it:

/* Hide Nitro gift button, language dependent*/
button[aria-label="Send a gift"] {
    display: none;
}

For the other buttons you could use:

/* Hide gif picker button, language dependent*/
button[aria-label="Open GIF picker"] {
    display: none;
}
/* Hide sticker picker button, language dependent*/
button[aria-label="Open sticker picker"] {
    display: none;
}

finding those entries is actually fairly easy as long as you can access the dev tools - F12 in most browsers, [ctrl] + [shift] + [i] in vencord, then use [ctrl] + [shift] + [c] to "select" the object you want to inspect. it'll show you the item in the tree. that wont change with manifest v3...

image

@0aShadow
Copy link

@FlurryShy Sure, if this works the same way, i would prefer to use this, have u tested it?
Also does the label stays the same on every update? Or atlest for more then one update :D

@FlurryShy
Copy link

@0aShadow
been using it like that for probably a few years (?) at this point.
I'd need to check the commits on my theme to see how long it has survived the discord updates so far.
so yeah, works 👍

@0aShadow
Copy link

0aShadow commented Oct 30, 2024

@FlurryShy
It is working perfectly fine for me if I set it up for my enviroment.
As you mentioned, it is language dependent
So because I'am using a german enviroment, I have to change the labelnames to the german values like this:

/* Hide Nitro gift button, language dependent*/
button[aria-label="Send a gift"] {
    display: none;
}
button[aria-label="Ein Geschenk senden"] {
    display: none;
}

/*  gif selector  */
button[aria-label="GIF-Auswahl öffnen"] {
    display: none;
}
button[aria-label="Open GIF picker"] {
    display: none;
}

/*  sticker  */
button[aria-label="Open sticker picker"] {
    display: none;
}
button[aria-label="Stickerauswahl öffnen"] {
    display: none;
}

I'll keep the english versions, I'll soon change to fully english system so I'll keep that.

I'll look for a easy way to create a toggle plugin for Vencord so you can change each one as you like.

Thank you very much bro.

@FlurryShy
Copy link

FlurryShy commented Oct 30, 2024

@0aShadow kein problem 👍
bin seit Jahren nur noch Englisch unterwegs, daher die Englische variante. :)

if you are bored, check my github for the theme I am maintaining... some things may be broken but you may or may not like some snippets in there. keep in mind some things in there are English language dependent.

@0aShadow
Copy link

@FlurryShy Kuss ;)

So I created a plugin now, tested everything and will submit it to vencord, maybe you'll see it in the future in Vencord, maybe not.
Please suggest languages that should be added and provide the information in a way @FlurryShy has posted. Thank you guys.

@FlurryShy
Copy link

I highly doubt Vencord would make it into a plugin, since it's way too easy to do via CSS.
and since it's language dependent it's a bit of a messy code to just add every language in there.

@0aShadow
Copy link

Yeah they declined it anyway, atleast I have a plugin for this now ^^

@BrambleTakato
Copy link

Hey! Came to give a heads up (since I was helped before, I want to return the favor); They changed the .footer for the Discover button. Just change this;

.footer_aa1bff{
display:none;
}

To this;

.footer_d71945{
display:none;
}

@FlurryShy
Copy link

FlurryShy commented Nov 26, 2024

@BrambleTakato
here is my generalized take on it, which doesn't need updating when the class-name changes, unless they also change the structure:
(yes, I could have just gone for class*="footer_" since it hasn't appeared anywhere else yet, but I'd like to have it more specific to not break anything else)

/* Public server thing, new, always visible BS. */
div[class*="footer_"]:has(> div > div[class*="listItemWrapper_"])
{
    display:none;
}

@BrambleTakato
Copy link

@BrambleTakato here is my generalized take on it, which doesn't need updating when the class-name changes, unless they also change the structure: (yes, I could have just gone for class*="footer_" since it hasn't appeared anywhere else yet, but I'd like to have it more specific to not break anything else)

/* Public server thing, new, always visible BS. */
div[class*="footer_"]:has(> div > div[class*="listItemWrapper_"])
{
    display:none;
}

This works quite nicely, thank you! Kind of a pain that they kept trying to change the class-name :(

@FlurryShy
Copy link

FlurryShy commented Dec 12, 2024

@BrambleTakato here is my generalized take on it, which doesn't need updating when the class-name changes, unless they also change the structure: (yes, I could have just gone for class*="footer_" since it hasn't appeared anywhere else yet, but I'd like to have it more specific to not break anything else)

/* Public server thing, new, always visible BS. */
div[class*="footer_"]:has(> div > div[class*="listItemWrapper_"])
{
    display:none;
}

This works quite nicely, thank you! Kind of a pain that they kept trying to change the class-name :(

yeah that is why I try to keep the selectors generic, but "specific enough" to not cause issues elsewhere.
it will take more computing this way, but should be neglectable with most modern systems, but it will not break when class names change.

it's technically not (directly) their fault that class names change.
when they re-compile the whole app, the compiler will create those class names automatically and without regard for what the class names were previously.

@sharknado55
Copy link

@0aShadow

if you don't mind it being language dependent you can just do this and be done with it:

/* Hide Nitro gift button, language dependent*/
button[aria-label="Send a gift"] {
    display: none;
}

For the other buttons you could use:

/* Hide gif picker button, language dependent*/
button[aria-label="Open GIF picker"] {
    display: none;
}
/* Hide sticker picker button, language dependent*/
button[aria-label="Open sticker picker"] {
    display: none;
}

finding those entries is actually fairly easy as long as you can access the dev tools - F12 in most browsers, [ctrl] + [shift] + [i] in vencord, then use [ctrl] + [shift] + [c] to "select" the object you want to inspect. it'll show you the item in the tree. that wont change with manifest v3...

image

didn't expect this to work, thanks!

@Techbane
Copy link

Techbane commented Mar 26, 2025

For anyone else looking to get rid of the Apps button the same way, the aria-label is literally just "Apps", so:

/* Hide apps button, language dependent*/
button[aria-label="Apps"] {
    display: none;
}

@FlurryShy
Copy link

For anyone else looking to get rid of the Apps button the same way, the aria-label is literally just "Apps", so:

/* Hide apps button, language dependent*/
button[aria-label="Apps"] {
    display: none;
}

alternatively, not language dependent:

/* remove bs app-launcher button */
div[class^="channelAppLauncher_"]{
    display:none !important;
}

@Fauxtecual
Copy link

Fauxtecual commented Mar 26, 2025

Any way to hide "Events" without hiding the Channels & Roles and whatnot in other servers? Driving me absolutely insane that it's pinned in every single server I own, I have never used it even once in my life. :/

Contribution:
When you have a chain of quote replies and it yells at you to make a thread:

/* Stop nagging about threads /
[class
="threadSuggestionBar_"] {
display: none; }

@FlurryShy
Copy link

Any way to hide "Events" without hiding the Channels & Roles and whatnot in other servers? Driving me absolutely insane that it's pinned in every single server I own, I have never used it even once in my life. :/

Contribution: When you have a chain of quote replies and it yells at you to make a thread:

/* Stop nagging about threads / [class="threadSuggestionBar_"] { display: none; }

try this one:

div[class^="containerDefault_"]:has(div[data-list-item-id^="channels___upcoming-events"]){
    display:none;
}

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