Skip to content

Instantly share code, notes, and snippets.

@cheesits456
Last active April 4, 2024 09:51
Show Gist options
  • Star 30 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • 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;
}
@Lurku
Copy link

Lurku commented May 8, 2021

Thanks :)

@toydotgame
Copy link

toydotgame commented May 28, 2021

@3thv, That code appears to be broken now. I made a patch which uses the HTML id attribute [in the CSS] to see what the Stage Discovery, Friends, and Nitro tabs were (They're private-channels-1, private-channels-0, and private-channels-2 respectively); inside the friends tab (The clickable-1JJAn8 class attribute in the HTML of Discord), and then hide those with the display: none:

/* Remove Big Nitro Button */
#private-channels-2.clickable-1JJAn8 {
    display: none;
}
/* Remove DogeHouse Competition */
#private-channels-1.clickable-1JJAn8 {
    display: none;
}

Edit (2021-06-4): Updated code and paragraph to match Discord's recent design update.

@aarav2you
Copy link

aarav2you commented Jun 19, 2021

If anyone is having trouble and something isn't working, here's the code you need to paste into Custom CSS (you need BetterDiscord)

/* 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 */
.da-channelTextArea > .container-JHR0NT {
    display: none;
}

/* Remove Big Nitro Button */
#private-channels-2.clickable-1JJAn8 {
    display: none;
}

/* Remove DogeHouse Competition */
#private-channels-1.clickable-1JJAn8 {
    display: none;
}

@FlurryShy
Copy link

FlurryShy commented Jul 1, 2021

a godsend indeed.
would there be a way to remove the sticker-autocomplete as well? cause it's bugging the heck out of me - especially cause it seems to limit the number of emoji autocompletes.

//edit
also an addition to the list - if you want to remove the sticker selector from the emoji / gif selector

[aria-controls="sticker-picker-tab-panel"]
{
    display: none;
}

//
someone wrote a plugin to disable the sticker autocomplete... my hero ❤
https://betterdiscord.app/plugin/DisableStickerSuggestions

@OshidaBCF
Copy link

Why the CSS isn't working at all ?

please don't tell me it's because my discord is in french

@toydotgame
Copy link

It may be, because some of the code relies on English text.

@eishiya
Copy link

eishiya commented Jul 6, 2021

I've been using this language-agnostic CSS for a while now to hide the buttons in the text field:

[class^=buttons-]>*:not(:last-child) {
    display: none; /* Hide all the buttons except the last one (emoji) */
}

This will hide all the buttons but the last one (which is the emoji button). Instead of targeting individual buttons by their aria-label, it targets them as child nodes of the button container.

To hide all of them including the emoji button:

[class^=buttons-]>* {
    display: none; /* Hide all the buttons */
}

If you want to target specific buttons, you can target them with nth-child:

[class^=buttons-]>*:nth-child(1), [class*=buttons-]>*:nth-child(2), [class*=buttons-]>*:nth-child(3) {
    display: none;
}

As Discord keeps adding more buttons to the bar or reorders them, the numbers here may need to change. As of this writing, 1 is Gift, 2 is GIF, 3 is Stickers, and 4 is Emoji.

March 17 2022 edit: Recently-ish (I don't update often), Discord changed the class name for the button container from buttons-3JBrkn to buttons-uaqb-5. Instead of trying to update for the new name, I made the references more generic, so this code should continue to work even if the numbers at the end of the class name change again.

@CostaCiruela
Copy link

It's not working. I tried the different CSS of the comments, but none work either. My Discord is in English, so that shouldn't be the problem...

@pademinune
Copy link

thank you so much

@zfauser
Copy link

zfauser commented Aug 23, 2021

/* Remove Sticker Tab in emoji menu */
#sticker-picker-tab.navItem-3Wp_oJ	{
		display: none;
}

/* Remove Gif Tab in emoji menu  */
[aria-controls="gif-picker-tab-panel"]
{
    display: none;
}

This code removes the gif and stickers tab from the emoji menu. No clue if anyone else would want this code but thought I might as well share

@net-wayfarer
Copy link

Why the CSS isn't working at all ?

please don't tell me it's because my discord is in french

@OshidaBCF Can you try my variant as described here? https://gist.github.com/cheesits456/41d659f932b5a574b5dfb9b391a4506e#gistcomment-3552143

As far as I am aware, there are buttons that are localised to specific spoken languages, depending on the language the user sets. These localised variants will not match against the specific string as specified in the English only variant, it has to match what is specified exactly in quotes. So either you use the English variant, or you have to manually add the string(s) to match for it to "block" (not show up, in other words).

@ASgihiufdghi
Copy link

Is there one to remove the emoji button

@zfauser
Copy link

zfauser commented Aug 30, 2021

Is there one to remove the emoji button

/* Hide emoji picker button */
button[aria-label="Select emoji"] {
    display: none;
}

@ASgihiufdghi
Copy link

Like is there also away to like remove the /tenor and /giphy commands? Idk how there would be

@Xurish
Copy link

Xurish commented Oct 4, 2021

Hello ive made a fork of this that ive added more stuff to
https://gist.github.com/breadfetish/36c38f3665569af765388f24424e3ebb

@ASgihiufdghi
Copy link

Is there also one to like disable the slash commands for tenor and giphy they are kinda annoying

@gotex007
Copy link

gotex007 commented Dec 7, 2021

How can I hide the Snowsgiving thing?

@annoyedguy97
Copy link

anyone know how to hide the gift icon now that the stupid christmas bullshit changed how the code works for that button specifically? like it's gone now but now even this hide button css doesn't even work for it after it's gone.

@eishiya
Copy link

eishiya commented Jan 5, 2022

anyone know how to hide the gift icon now that the stupid christmas bullshit changed how the code works for that button specifically? like it's gone now but now even this hide button css doesn't even work for it after it's gone.

Have you tried the language-agnostic CSS I posted a few posts above?

@TheSunCat
Copy link

I have made a more aggressive custom CSS for my own use, but it seems it randomly stopped working about a week ago. It looks like Discord changed most of the CSS class names (the numbers/letters at the end of the name).
Is there a way to get around this? Maybe target based on beginning of class names instead of the full name?

@eishiya
Copy link

eishiya commented Mar 17, 2022

I have made a more aggressive custom CSS for my own use, but it seems it randomly stopped working about a week ago. It looks like Discord changed most of the CSS class names (the numbers/letters at the end of the name). Is there a way to get around this? Maybe target based on beginning of class names instead of the full name?

That should be doable. While updating my CSS above, I decided to give [class^=buttons-] (match class names that begin with "buttons-") a try instead of the new buttons class name, and it worked. It doesn't look like any other classes have buttons- in their name. Your code references a lot more classes (but, surprisingly, not the buttons element, despite it being the simplest way to hide the junk buttons), but the same idea should apply. Just remember that partial name matches are less exact, so you need to test and make sure you're not accidentally affecting unrelated elements.

@leeann-chu
Copy link

/* Remove Big Nitro Button */
#private-channels-2.clickable-1JJAn8 {
    display: none;
}

Wasn't working for me, so after a bit of trial and error I've settled on:

/* Remove Big Nitro Button */
[href="/store"] {
	display: none;
}

For some reason adding #private-channels to the front broke it, and removing it fixed it. (Code taken from here)

@Estebanrex
Copy link

On the chat bar there is a "Upgrade this server with a Boost!" is there any code to remove it?

I tried below but it doesn't work.

button[aria-label="Upgrade this server with a Boost!"] {
display: none;
}

@Estebanrex
Copy link

I searched and there is one
Credits : https://gist.github.com/RealTheSunCat/58fedaa19d6154ef3e4b2b676c286906

/* Boost in chat bar */
button[aria-label="Boost this server"] { display: none; }

@octomoo
Copy link

octomoo commented Jul 2, 2022

How to hide the new Nitro button is the server list

/* Hide Nitro button in server list */
.fixedBottomList-1yrBla {
    display: none;
}

@aarav2you
Copy link

Hello, I have made an improved version that I tested on the current discord canary version
It has tons of more features and modifications.
https://gist.github.com/aarav2you/d66e2369074fb70f74e061062c77e9c4

@cheesits456
Copy link
Author

I edited the gist to use the proper metadata formatting so you can actually use it as a theme file instead of needing to put it into your custom CSS. also updated the class names for the sticker suggestion popup cuz those keep changing

@luisl173
Copy link

luisl173 commented Oct 7, 2023

I've been using this language-agnostic CSS for a while now to hide the buttons in the text field:

[class^=buttons-]>*:not(:last-child) {
    display: none; /* Hide all the buttons except the last one (emoji) */
}

...

This works, but it also kills these buttons on the messages themselves
image
so i had to edit the code to point to the specific class name :/

@0aShadow
Copy link

0aShadow commented Mar 30, 2024

I know, this is an old thread, but if you still want to remove the button, embed this into your custom css:

.buttons__7ecff > .grow__4c8a4.colorBrand__27d57.lookBlank_a5b4ca.button__581d0 > .button__493d9.button__437ce.contents__322f4{
    display: none;
}

@antonify
Copy link

antonify commented Apr 4, 2024

I know, this is an old thread, but if you still want to remove the button, embed this into your custom css:

.buttons__7ecff > .grow__4c8a4.colorBrand__27d57.lookBlank_a5b4ca.button__581d0 > .button__493d9.button__437ce.contents__322f4{
    display: none;
}

Works, thank you so much!
For Vencord users, copy and paste @0aShadow 's code into your Discord settings: Vencord > Themes > Edit QuickCSS

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