Skip to content

Instantly share code, notes, and snippets.

@cheesits456
Last active January 5, 2026 03:39
Show Gist options
  • Select an option

  • Save cheesits456/41d659f932b5a574b5dfb9b391a4506e to your computer and use it in GitHub Desktop.

Select an option

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;
}
@murderpigs
Copy link

i really wish (as we all do) that discord would just make these things toggleable. alas.. the program has been beyond any accessibility for years. big respect to this threads contributors though ;P

@tinygwen
Copy link

changing to div worked for me, however not hiding the parent div messes with the formatting of the message bar buttons. If the user adds more custom buttons (such as with the SendTimestamps plugin vencord offers), the spacing will be far to the left.
This should fix that:

div:has(> [aria-label="Send a gift"]),
button:has(> [aria-label="Send a gift"]) {
  display: none !important;
}

/* hide GIF picker */
div:has(> [aria-label="Open GIF picker"]),
button:has(> [aria-label="Open GIF picker"]) {
  display: none !important;
}

/* hide sticker picker */
div:has(> [aria-label="Open sticker picker"]),
button:has(> [aria-label="Open sticker picker"]) {
  display: none !important;
}

This covers both div and button. Currently its a div at the time of writing.

@Doomelf
Copy link

Doomelf commented Oct 17, 2025

Any way to remove the Quests tab above DMs?

@FlurryShy
Copy link

FlurryShy commented Oct 21, 2025

Any way to remove the Quests tab above DMs?

here's how I removed it on my end:

/* remove quest button in DMs */
a[href="/quest-home"]{
    display:none;
}

@eishiya
Copy link

eishiya commented Oct 21, 2025

This is my current list of tweaks, removing multiple annoyances. These are just selectors, grab the ones you want, put them in a single rule, and use display: none !important as the rule body (the !important isn't required for most, but doesn't hurt and I think some do need it).

A few of these rely on element order. This makes them language-agnostic (unlike the aria-label method many others use), but it means they will break if Discord changes the order. That happens infrequently enough that I prefer this method.

All the buttons in the message field except the emoji button (and the + button, that's in a different container):

[class*=channelTextArea] [class*=buttons]>div:not(:nth-child(5))

All the buttons and their container, in case you don't even want the emoji button:

[class*=channelTextArea] [class^=buttons]

The "send longer messages with Nitro!" nag box:

[class*=upsell]

(This one might also affect other upselling pop-ups. Good riddance.)

Buttons that show up on messages on hover:

div[class*=buttons][role=group]

Events, shop, Nitro, Quests in DMs list:

a[href="/activities"], a[href="/shop"], a[href="/store"], a[href="/quest-home"]

App launcher (games in voice channels):

[class*=channelAppLauncher]

Edit image with apps hover button:

div[class*=imageContainer] > *[class*=hoverButtonGroup] > *:first-child

Server tags that show up on user names:

[class*="chipletContainer"]

And this one I usually don't bother with, but this removes the custom backgrounds in server member lists, because for some reason Discord doesn't have an option to disable/hide them:

[class*=member] img[class*=img] {
    display: none;
}
[class*=member] [class*=container] {
    background: none !important;
}

@jartf
Copy link

jartf commented Nov 23, 2025

I use Vencord, so I want to leave the plugin buttons on. Here's my list of tweaks, thanks to everyone above:

/* Hide unnecessary stuff */
[class^="buttons"] .expression-picker-chat-input-button:not(div[class*="vc-chatbar-button"]), /* Emoji, GIF and sticker buttons */
[class^="buttons"] *[aria-label="Send a gift"], /* Gift Nitro button */
[class^="buttons"] .buttonContainer_e6e74f.app-launcher-entrypoint, /* App launcher button */
[class^="channelAppLauncher"], /* Apps in VCs */
[class*="chipletContainer"], /* Server tags */
[class*="upsell"], /* Nitro upsell box */
[href="/activities"], /* Activities */
[href="/library"], /* Big library button */
[href="/store"], /* Big store button */
[href="/shop"], /* Big shop button */
[href="/quest-home"], /* Big quest/mission button */
.tutorialContainer__650eb+div, /* Discovery button in server list */
div[class^="containerDefault_"]:has(div[data-list-item-id^="channels___upcoming-events"]) /* Events list in server */
{
	display: none;
}

@murderpigs
Copy link

class stuff. thanks!

@OrieDargon
Copy link

OrieDargon commented Dec 23, 2025

If anyone's looking for an up to date theme or CSS code for the newest discord UI updates, I made my own. :::}

https://gist.github.com/OrieDargon/220ec8eee4bd6ae1da043ca6f3f0cf9d

/*You may remove or comment out any bit of code you want, if you would prefer to have certain buttons.*/

/*The code below removes the Sticker Picker button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Open sticker picker"] {
    display: none;
}

/*The code below removes the GIF Picker button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Open GIF picker"] {
    display: none;
}

/*The code below removes the Nitro Gift button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Send a gift"] {
    display: none;
}

/*The code below removes the "Apps" button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Apps"] {
    display: none;
}

/*The code below removes the "Apps" button in the bottom left user area, when in a voice call. You can also still access this if needed if you click into the voice call.*/
[class$="actionButtons"] button:nth-child(5) {
    display: none;
}

@MichaelDavidGK
Copy link

I updated them and and tweaked some for better UI experience and so they won't break as much

/* Hide unnecessary stuff */

/* Emoji, GIF and sticker button container (remove /* at beginning to delete all. All but main emoji button included below) */
/* [class$="buttons"] .expression-picker-chat-input-button:not(div[class*="vc-chatbar-button"]),

/* Sticker button + removes empty space */
[class^="expression-picker-chat-input-button"]:has([class*="stickerButton"]),

/* GIF button + removes empty space */
[class^="expression-picker-chat-input-button"]:has([aria-label="Open GIF picker"]),

/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),

/* All Gift buttons like shop, etc (leaves empty space in chat) */
/* [class$="buttons"] [aria-label="Send a gift"],

/* Vencord Stickers+ button */
/* div:has(> button > svg.vc-more-stickers-icon),

/* Server tags */
[class*="chipletContainer"],

/* App launcher button */
[class$="buttons"] .app-launcher-entrypoint,

/* Apps in VC (participants/screenshare screen) + removes empty space */
[class*="buttonContainer"]:has([aria-label*="Start an Activity"]),

/* Apps in VC (user panel) */
button[aria-describedby*="«ret»"],

/* Nitro Home/upsell box */
[class*="upsell"],

/* Activities */
[href="/activities"],

/* Big library button */
[href="/library"],

/* Big store button */
[href="/store"],

/* Big shop button */
[href="/shop"],

/* Big quest/mission button */
[href="/quest-home"],

/* Discovery button in server list */
[class*="tutorialContainer"] + [class*="listItem"],

/* Events list in server */
[class^="containerDefault_"]:has([data-list-item-id^="channels___upcoming-events"]),

/* Events in server */
li:has([aria-label="Events"]),

/* Server Boosts in server */
li:has([aria-label="Server Boosts"])
{
	display: none !important;
    pointer-events: none !important;
}

@OrieDargon
Copy link

@MichaelDavidGK the aria-describedby for apps in VC would change daily about a week ago, and be inconsistent naming schemes between devices. I don't trust that code remaining consistent anymore, so I specified the "child" in the actionButtons class to display none, and it worked consistently so far

@Swedishdogs
Copy link

@MichaelDavidGK

/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),

this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).

@coffeeyoda
Copy link

@Swedishdogs

/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),

this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).

Change it to this and it should work:
[class$="-container"]:has(> [aria-label="Send a gift"]),

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