Custom CSS for Discord to remove the GIF picker and Nitro Gift buttons from the message bar

RemoveButtons.theme.css

/**
 * @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;
}

anyone has one for the promoted games button?

Promoted Games are nested under "Apps"; see above.

I'm not best at making stuff, I kinda disliked that Ido have Vencord and too many buttons there in chat making textbox smaller and sometimes annoying to type especially when I switch to laptop where screen is smaller

For anyone if you want to use, modify or anything feel free to take:

[class^="scrollableContainer__"] {
    position: relative;
}

[class^="buttons__"] button[aria-label="Send a gift"],
[class^="buttons__"] button[aria-label="Open Translate Modal"],
[class^="buttons__"] button[aria-label="Disable Silent Typing"],
[class^="buttons__"] button[aria-label="Enable Silent Typing"],
[class^="buttons__"] button[aria-label="Insert Timestamp"],
[class^="buttons__"] button[aria-label="Encrypt Message"],
[class^="buttons__"] button[aria-label="Preview Message"],
[class^="buttons__"] button[aria-label="Open GIF picker"],
[class^="buttons__"] button[aria-label="Open sticker picker"],
[class^="buttons__"] button[aria-label="Select emoji"],
[class^="buttons__"] button[aria-label="Apps"] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease, transform 1s ease;
}

[class^="buttons__"]:hover button[aria-label="Send a gift"],
[class^="buttons__"]:hover button[aria-label="Open Translate Modal"],
[class^="buttons__"]:hover button[aria-label="Disable Silent Typing"],
[class^="buttons__"]:hover button[aria-label="Enable Silent Typing"],
[class^="buttons__"]:hover button[aria-label="Insert Timestamp"],
[class^="buttons__"]:hover button[aria-label="Encrypt Message"],
[class^="buttons__"]:hover button[aria-label="Preview Message"],
[class^="buttons__"]:hover button[aria-label="Open GIF picker"],
[class^="buttons__"]:hover button[aria-label="Open sticker picker"],
[class^="buttons__"]:hover button[aria-label="Select emoji"],
[class^="buttons__"]:hover button[aria-label="Apps"] {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

Adding new buttons is simple, I have no idea if discord changes numbers at the end that's why is a class. Feel free to use it in QuickCSS Editor or if you find better way to do it... tell me.

It works simply, if you hover mouse where usually discord buttons are, it reveals your buttons. Whenever textchat becomes scrollable it keeps buttons on top right.

How it looks:

When you hover on right top corner:

Theme used is:
https://refact0r.github.io/midnight-discord/build/midnight.css

or look at:
https://refact0r.github.io/midnight-discord/

You can remove the gift nitro button with this:

div[aria-label="Send a gift"] {
  display: none !important;
}

Put this in QuickCSS in Vencord settings. That button is actually a div.

If it doesn't work for you then:

1. Go to web discord.
2. Inspect the gift button.
3. See what label it is.
4. Modify the snippet accordingly.

ive made a discord theme with the help of code from this thread

customise to your needs by commenting out or removing code ;P

It's only changed to a div recently. I like using commas to group this stuff up just in case they revert it.

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

Hi folks,

Is there a tutorial about how to get this CSS into Discord? I don't really know how to apply these suggestions.

Thanks,

It's only changed to a div recently. I like using commas to group this stuff up just in case they revert it.

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

thanks! theme updated as such :)

Hi folks,

Is there a tutorial about how to get this CSS into Discord? I don't really know how to apply these suggestions.

Thanks,

what operating system do you use? regardless, i think vencord's install page is very useful! if you still cant figure out how to install vencord, there are several videos on how to do such if you need!

from there, once discord is restarted and such, go to user settings > vencord (right under "user settings") > themes >

and then you have 1 of 2 options:

1. paste the css you choose into "Edit QuickCSS"
2. "open theme folder" and download a css theme, drag it in, click "load missing themes" and simply flip the switch to enable

as said, if you have any more questions the internet has lots of documentation to look into, use any search engine you like to get to it. hope this helps somewhat! :D