Hide all Nitro & Boost upsells in Discord!

DisblockOrigin.theme.css

/**
 * @name Adblock for Discord
 * @author TheSunCat and contributors
 * @version 1.0.0
 * @description Hide all Nitro & Boost upsells on Discord!
 * @source https://gist.github.com/TheSunCat/58fedaa19d6154ef3e4b2b676c286906
 */

/* ------------------ */
/* Hide Nitro upsells */
/* ------------------ */

/* Chatbox buttons */
div[aria-label="Start an Activity"] { display: none; }
button[aria-label="Send a gift"] { display: none; }

/* Hide Nitro button in Home */
a[href="/store"] { display: none; }

/* Hide shop button in Home */
a[href="/shop"] { display: none; }

/* TODO: join more than 100 servers upsell */

/* Hide Nitro tabs in Settings */
div[aria-label="User Settings"] > div[aria-label="Nitro"] { display: none; }
div[aria-label="User Settings"] > div[aria-label="Nitro"] + div { display: none; }
div[aria-label="User Settings"] > div[aria-label="Subscriptions"] { display: none; }
div[aria-label="User Settings"] > div[aria-label="Gift Inventory"] + div[class^="item_"] { display: none; }

/* Nitro separator in settings */
/*div[aria-label="User Settings"] > div[aria-label="Gift Inventory"] + div[class^="item_"] + div[class^="separator"] { display: none; }*/
/* Gift Inventory tab entirely */
/*div[aria-label="User Settings"] > div[aria-label="Gift Inventory"] { display: none; }*/

/* Hide Billing header and separator */
div[aria-label="User Settings"] > div[aria-label="Clips"] + div[class^="item_"] + div[class^="separator_"] + div[class^="header_"] { display: none; }
div[aria-label="User Settings"] > div[aria-label="Clips"] + div[class^="item_"] + div[class^="separator_"] + div[class^="header_"] ~ div[class^="header_"] { display: block; }

/* Server Profiles: Make unique profiles for each server box */
div[class*="upsellOverlayContainer_"] { display: none; }

/* Profiles: Choose a GIF avatar */
div[class^="optionBox"]:has(div[class^="text-sm-semibold"] > div[class^="optionBoxText"] > div[class^="optionBoxDescription"] > div[class^="nitroWheelFlairContainer"]) { display: none; }

/* Profiles: Change decorations exclusive to Nitro */
div[class*="decorationGridItem"]:has(div[class*="iconBadge"]) { display: none; } /* Decorations */
div[class*="effectGridItem"]:has(div[class*="iconBadge"]) { display: none; } /* Effects */

/* Profiles: Try out Nitro! box */
div[class^="premiumFeatureBorder"] { display: none; }

/* Profiles: New style ad */
#profile-customization-tab > div[class^="container"]:has(button[class*="colorBrand"]) { display: none; }

/* Profiles: Per server avatar */
div[class^="imageUploaderInner"] + div[class^="imageUploaderHint"] { display: none; }
div[class^="imageUploaderInner"] + div[class^="imageUploaderHint"] + div[class^="imageUploaderIcon"]{ display: none; }

/* Profiles: Hide profile customization ad in banners */
div[class^="bannerNitroUpsell"] { display: none;}

/* Voice & Video: Soundboard section */
div[class^="container"]:has(div[class^="children"] > div[class^="soundboardRow"]) { display: none; }

/* Appearance: Hide app icon upsell */
div[class^="selectionGroup"]:has(div[role="radiogroup"] > div > div[class^="presets"] > [class*="appIconSelectionContainer"]) { display: none; }

/* Appearance: Theme upsells */
section[class*="basicThemeSelectors_"] + section { display: none; }

/* Hide message size upsells */
div[class^="characterCount"] > div[class*=" upsell_"] { display: none; }

/* Hide Go Live quality upsells */
button[class*=" selectorButtonPremiumRequired"] { display: none; }

/* Hide ad in profile banners */
div[class^="premiumIconWrapper"] { display: none; }

/* Hide "Level up your look" ad in account profile popout */
div[class*="hasCollectiblesUpsell"] > div[class ^="userPopoutInner"] > div[class*="animation_"] { display: none; }

/* Hide "Gift Nitro" button in DM User Profile sidebar */
button[class*=" giftButton"] { display: none; }

/* Emoji popout: "Get nitro" button */
button[class^=shinyButton]:has(div[class*=premiumSubscribeButton]) { display: none; }

/* Emoji popout: "Powered by nitro" text */
div[class^=nitroTextAndBadge] { display: none; }

/* Hide "Custom emojis" Nitro text from hover tooltip */
div[class^=tooltipPremiumContent] { display: none; }

/* Emoji autocomplete upsell (wowww this stoops low, even for them) */
div[class^="nitroTopDividerContainer"], div[class^="nitroTopDividerContainer"] ~ div { display: none; }

/* Hide the 'Unlock these emoji with Nitro' in emoji picker */
div[class^=upsellContainer] { display: none; }

/* Remove the purple background in the emoji picker and autocomplete */
div[class*=categorySectionNitroLocked] { background-color: unset !important; }

/* Remove the purple divider at the bottom of the emoji picker*/
div[class^=nitroBottomDivider] { display: none; }

/* Hide the lock icon on servers icon in the emoji picker */
div[class^=categoryItemLockIconContainer] { display: none; }

/* Hide the lock icon on emoji in the emoji picker */
div[class^=emojiLockIconContainer] { display: none; }

/* Restore old grayscale filter on Nitro emojis so you don't accidentally click them and get an ad */
div[class*=categorySectionNitroLocked] > ul > li > button > img[class^="lockedEmoji"] { filter: grayscale(); }

/* Grayscale for emoji that are simply locked and not in the Nitro section */
button:has(div[class^=emojiLockIconContainer]) { filter: grayscale(); }

/* Avatar decorations upsell */
div[class*="userProfileInner_"] > div:has(div[aria-label="Go to Shop"]) { display: none; }

/* ------------- */
/* Server boosts */
/* ------------- */

/* Server Boost button in top left dropdown */
div[id="guild-header-popout-premium-subscribe"] { display: none; }
div[role="group"]:has(div[id="guild-header-popout-premium-subscribe"]) + div[role="separator"] { display: none; }

/* Server settings: Boost tab */
div[class^="serverBoostTabItem"] { display: none; }
div[class^="serverBoostTabItem"] + div[class^="separator"] { display: none; }

/* Server settings: Overview */
div[class^="divider"]:has(div > div > div > div[class^="upsell"]) { display: none; }

/* TODO: Hide role icon in Roles tab when we don't have boost lvl 2 */

/* Server settings: Stickers tab */
/* NOTE: risky, but seems ok for now */
div[class^="children_"] > div[class^="upsellContainer"] { display: none; }
div[class*="tierHeaderUnlocked"] + div { display: none; }
div[class*="tier_"]:has(div[class^="tierHeaderLocked"]) { display: none; }
div[class^="tierInProgress"] { display: none; }

/* Server settings: Custom Invite Link tab */
button[class^="shinyButton"]:has(div[class*="upsellButton"]) { display: none; }

/* Boost progress bar */
/* NOTE: risky, but seems ok for now */
ul[aria-label="Channels"] > li > div[role="button"][class^="container"] { display: none; }

/* TODO: would be nice to hide disabled soundboard sounds & emojis
 * However, looks like it needs to be done on the JS level. This is too buggy
div[class*="premiumDisabled_"] {display:none;}*/

/* --------------- */
/* Super reactions */
/* --------------- */

/* Super reactions button */
button[id="super-reaction-picker-tab"] { display: none; }

/* Super reaction animation */
div[class*="shakeReaction"] { animation: none !important; }
div[class^="reactionInner"] > div > div[class^="effectsWrapper"] { display: none; }
img[class*="hideEmoji"] { animation: blink-emoji 1s linear infinite; opacity: 255; }
@keyframes blink-emoji {  
  50% { opacity: 0; }
}

/* Add Super Reaction menu item */
#message-add-reaction-1 { display: none; }
#message-actions-add-reaction-1 { display: none; }
div[aria-label="Add Super Reaction"] { display: none; }

/* Upsell when hovering a Super Reaction */
div[class^="burstReactionTooltipPrompt"] { display: none; }

/* --------------------------------- */
/* Quests (straight up paid ads lol) */
/* --------------------------------- */

/* Hide quests from the gift inventory */
div[class^="questsContainer"] > * { display: none; }

/* Completed quest profile badge (doesn't provide any use so...) */
a[aria-label^="Completed a Quest"] { display: none; }

/* Ad area above username */
section[class^="panels"] > div[class^="wrapper"] > div:has(div[class^="questUnacceptedContent"]) { display: none; }

/* ------------------ */
/* General annoyances */
/* ------------------ */

/* Chatbox buttons */
button[aria-label="Open GIF picker"] { display: none; }
button[aria-label="Open sticker picker"] { display: none; }

/* Stickers tab in emoji/GIF picker (can always be opened if needed with Ctrl+S) */
button[id="sticker-picker-tab"] { display: none; }

/* Avatar decorations */
svg[class*="avatarDecoration_"] { display: none; }
img[class^="avatarDecoration_"] { display: none; }

/* Profile effects */
div[class^="profileEffects"] { display: none; }

/* Animated "Activities" hover effect in calls */
/* NOTE: would be nice to disable the white hover effect,
 * but that'd break when you're actually in an activity */ 
div[aria-labelledby^="vc-activities"] { display: none; }

/* Bugfix laggy server scroll */
div[data-dnd-name] > div[class^="wrapper"] svg { overflow: hidden; }

/* Hide Help button */
div[aria-label="Help"] { display: none; }

/* Hide explore servers button */
div[aria-label="Servers"] + div + div { display: none; }

/* Hide download button in web version */
div[aria-label="Servers"] + div[class^="tutorialContainer"] + div + div { display: none; } /* separator */
div[aria-label="Servers"] + div[class^="tutorialContainer"] + div + div + div { display: none; } /* button & click target */

/* Hide Library button in Home */
a[data-list-item-id*="___library"] { display: none; }

/* Nitro profile badges */
/*a[aria-label^="Subscriber since"], a[aria-label^="Early Supporter"] { display: none; }*/

/* Server booster profile badge */
/* a[aria-label^="Server boosting since"] { display: none; } */

/* Server booster member list badge */
/* svg[aria-label^="Server boosting since"] { display: none; } */

/* Hide all super reactions entirely */
/* div[id*="message-reactions"] div:has(div div[aria-label*="super reaction"]) { display: none; } */

/* Hide "Active Now" sidebar in friends list */
/* div[class^="nowPlayingColumn"] { display: none; } */

New quests badge just dropped, I think it would be a great addition alongside Nitro badges:

/* Completed quest profile badge */
a[aria-label^="Completed a Quest"] { display: none; }

Additionally I'm not too fond of hiding the whole Gift inventory so here's something to only hide quests there. The new container is responsible for the margin between the redeem section and the rest so we can't just hide it.

/* Hide quests from the gift inventory */
div[class^="questsContainer"] > * { display: none; }

Thanks for this, all the paid spam was getting unbearable.

You're welcome! Discord really has become something haha, happy we can still block most of it via CSS.

how do I hide the "shop" on the left-hand side below "friends" of the screen menu for Discoed?

The shop tab is hidden on my end: Is your client set to a different language that american English? The way the shop element is selected relies on the aria-label property, which is different depending on language unfortunately.

I'm using British English

Say, anyone have an idea on how to hide this? The Div IDs are all the same as users in a server, so I'm having issues trying to distinguish them from others in order to hide them in CSS

Thanks @LockBlock-dev, implemented both suggestions. Unlike the Nitro badge, I decided to hide the Quests one entirely as I can't think of a reason to have it enabled besides serving as another ad (unlike the Nitro ones which I would want to see for the same reason as people who pay for checkmarks on Twitter want to hide them).

@LavenderAndChamomile I found a more reliable way to block both the Nitro and Shop tabs, could you try it again?

Where do you see this panel @Kupie ? I see a similar-looking one in the friends list, but it is labeled as "Active Now" and has no settings icon. That one does look selectable via nowPlayingColumn.

@TheSunCat not really that important but just checking, did you mix up lines 31 and 33?

Edit: also it seems the boost progress bar has slightly changed with the latest update. I've managed to get it work by adding an li element as below.
Before:
ul[aria-label="Channels"] > div[role="button"][class^="container"] { display: none; }

After:
ul[aria-label="Channels"] > li > div[role="button"][class^="container"] { display: none; }

Hey, I love the work. I was wondering: would a mobile version of this adblock "theme" be available in the future for the mobile clients (i.e., Bunny)?

Yes @peldas, nicely spotted. Fixed the boost bar blocking and swapped the erroneous lines.

@Krolul I'd like to see this, too! Unfortunately it's a very different process to make something like this for a native app. The Discord "desktop" app is just a simple wrapper around a website, which makes it quite powerfully themable via CSS. The mobile app is an actual real app, so the tooling is entirely different. A whole separate project would be needed.

Hey, I love the work. I was wondering: would a mobile version of this adblock "theme" be available in the future for the mobile clients (i.e., Bunny)?

Look for "bluecord" via Google. I use it myself with Discord on my phone.

I made some improvements on this css:
https://gist.github.com/Rupurudu/d77fbf849129c818febbb06e5b1c7912

[Text Chat][Textarea] Now hides gift Nitro icon on non-english languages.
[Settings][Sidebar] Now hides Nitro tabs on non-english languages.
[Settings][Profiles] Per server avatar is no longer clickable (shows Nitro upsell)
[Settings][Voice & Video] Soundboard entrance sounds no longer hides Soundboard volume slider.
[Settings][Appearance] Nitro app icons no longer hidden if user has FakeNitro enabled.
[Settings][Appearance] Nitro themes no longer hidden if user has FakeNitro enabled.
[Server settings] Show Nitro progress bar switch and unlocked features.
[Voice Chat][Screen Share] Hide Screen Share also hides upsell banner.
[Toolbar] Hide Help button works on non-english languages.
Emoji popout: "Get nitro" button breaks Nitro tab fixed.

Great stuff! Thanks for sharing. Would you like it merged into here?

Yeah why not