Custom CSS snippets to make Discord have a more tolerable experience. Examples of features and fixes are, but are not limited to:
- Hiding Nitro, shop and library buttons on the contacts list.
- Startup promotion prevention.
- Camera mirror fix.
Tip
Using a third-party client or extension that can load in custom css for Discord is recommended.
Interested in third party clients? Consider checking out Vencord or BetterDiscord!
| Before | After |
|---|---|
The snippets are sorted based on their functionality. Pick and choose as you like! Enjoy!
/* DIRECT MESSAGES */
/* Promotional */
[href="/library"] { /* Hide the library button. */
display: none;
}
[href="/store"] { /* Hide the Nitro button */
display: none;
}
[href="/shop"] { /* Hide the shop */
display: none;
}
[class*="upsell"] { /* Hide content that promotes advertising content */
display: none;
}
div > div > div > div:has([src*="promotions/premium-marketing"]) { /* Hide promotions (specifically on start-up) */
display: none;
}
/* Activities */
div:has(> div > div[aria-label="Start An Activity"]), div:has(> h2 > div[aria-label="Start An Activity"]) { /* Hide activities from friends list */
display: none;
}
ul[aria-label="Direct Messages"] div:nth-child(2 of div[class*="sectionDivider"]) { /* Hide Activities divider */
display: none;
}
/* UTILITY */
/* Voice Chats */
div > video[class*="mirror"] { /* Webcam flip fix */
transform: scaleX(1);
}
/* MISCELLANEOUS STYLING */
/* Title Bar */
.visual-refresh { /* Thinner Title Bar */
--custom-app-top-bar-height: calc(14px + var(--space-sm));
}/* DIRECT MESSAGES */
/* Promotional */
[href="/library"] { /* Hide the library button. */
display: none;
}
[href="/store"] { /* Hide the Nitro button */
display: none;
}
[href="/shop"] { /* Hide the shop */
display: none;
}
[class*="upsell"] { /* Hide content that promotes advertising content */
display: none;
}
div > div > div > div:has([src*="promotions/premium-marketing"]) { /* Hide promotions (specifically on start-up) */
display: none;
}
/* Activities */
div:has(> div > div[aria-label="Start An Activity"]), div:has(> h2 > div[aria-label="Start An Activity"]) { /* Hide activities from friends list */
display: none;
}
ul[aria-label="Direct Messages"] div:nth-child(2 of div[class*="sectionDivider"]) { /* Hide Activities divider */
display: none;
}/* UTILITY */
/* Voice Chats */
div > video[class*="mirror"] { /* Webcam flip fix */
transform: scaleX(1);
}