💾 Archived View for zelena.flounder.online › knowledge › Discord_Custom_CSS.gmi captured on 2023-11-04 at 11:31:24. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
This is the custom styling I use to improve my Discord experience. This CSS removes unnecessary buttons, making a cleaner interface experience with minimal changes.
/* 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;}
/* Hide sidebar Nitro button */
[href="/store"] {display: none;}
/* Hide sidebar Shop button */
[href="/shop"] {display: none;}
/* Hide Super Reaction button and Context Menu */
div[aria-label="Add Super Reaction"] { display: none; }
div[class^="item-5ApiZt labelContainer-35-WEd colorPremiumGradient-38tGFG colorDefault-2_rLdz"] {display: none; }
The first three entries hide extra buttons that are beside the message input field. They are completely unnecessary because you can still reach those by opening the remaining emoji picker and changing tabs. The nitro button is hidden for being an ad.
The fourth is for the pop-up that happens randomly while typing. You may find this useful if you've paid for stickers, but as a free user who is not permitted to use the feature, it's just an annoyance. Blocking this won't interfere with the emoji selector that pops up when you type a colon.
The sidebar buttons are the buttons in the sidebar that function as ads. No reason to have them always in view.
The super reaction buttons are hidden for the same reason as the sticker pop-ups. I have no reason to use them, but you may if you have nitro.
To use this CSS, first install OpenAsar from the link below. Follow the instructions that appear after clicking Install.
Once installed, launch Discord. Open the settings using the gear icon near the bottom left. Scroll the left sidebar all the way down until finding the version information on the very bottom. Click on the version line for OpenAsar. This should open up a window for customizing it.
Switch to the tab labeled Theming. Here is a window you can enter any custom CSS you wish. Copy the CSS you want from the code block above and paste it below any existing CSS there.
Once done, restart Discord and your CSS should be applied.