YouTube: Styled by misspent

General Questions

🎨 Q: What does this theme do

A: This theme goes above and beyond in its customization options for YouTube. Once applied, it transforms the entire layout of the site, including the sidebar, home page, subscriptions, comments section, and even playlist display. With a highly configurable layout (variables), users can tailor their YouTube experience to their own unique preferences.

🚧 Q: Why doesn't it look like your screenshots

A: You're on an updated/outdated version of YouTube and or your browser (user-agent?) isn't the same as mine, enable Dark Mode in appearance settings too.

💻 Q: Which browsers support Stylus?

A: Stylus is compatible with Google Chrome & Mozilla Firefox.

Usage Questions

🔎 Q: How do I install a theme for Stylus from userstyles.world?

A: Click the "Install" button below the main image at the top of the page, and follow the prompts to add the style to Stylus.

🖌️ Q: Can I modify existing Stylus themes to better suit my preferences?

A: Yes, you can modify existing styles by editing the CSS code directly within Stylus or using a separate text editor. However, updating the theme will more than likely remove what you changed. Make sure you back up or save the parts you edited for future updates if possible.

Troubleshooting Questions

🚫 Q: Why isn't my Stylus theme working on a particular website?

A: Some websites may have built-in style sheets or scripts that can conflict with custom styles applied by Stylus. Try disabling other extensions or modifying the custom style to better match the site's existing design.

❓ Q: How do I modify or remove a Stylus theme that I installed from userstyles.world?

A: To modify or delete a custom style in Stylus, click on the extension icon in your browser toolbar, select "Manage," and locate the style in question under the "Installed styles" tab.

🛡️ Q: Why are certain elements of the YouTube site appearing differently with the theme applied?

A: Custom styles can sometimes conflict with existing site layouts or scripts, which can cause unexpected behavior or visual anomalies. Try modifying the custom style or disabling conflicting extensions to resolve the issue.

📱 Q: Why does my Stylus theme look different on mobile devices?

A: Mobile browsers may use different rendering engines or have different screen resolutions than desktop browsers, which can affect how custom styles are displayed. Try modifying the custom style specifically for mobile devices or using a separate style for mobile browsing.

⌛ Extra Information

• You can disable the other 2 sections to make the results and comment section look “normal”

⌨ Variables

:root {
    --background-primary: #212121;
    --background-secondary: #090909;
    --background-tertiary: #121212;
    --background-hover: #202020;
    --background-video-renderer: #101010;
    --background-comment-renderer: #171717; /* Old: rgba(28, 28, 28, 1); */
    --background-title: #151515;
    --background-description: #161616; /* Old: #181818; */
    --title-text: #ccc;
    /* => Optional Tweaks <= */
    --header-Chip-bar: flex; /* none = OFF | flex = ON | Home Page */
    --Sidebar-Buy-Download-Advertisement: none; /* none = OFF | block = ON | Watching a Video Sidebar on right side */
    --YouTube-Title-Hash-Tag: none; /* none = OFF | block = ON */
    --Donation-Containers: none; /* none = OFF | block = ON | Watching a Video Sidebar on right side */
    --Only-Recommended-on-Homepage: none; /* none = OFF | flex = ON */
    --Action-Bar-Names-Save-Share-Etc: inline-block; /* none = OFF | inline-flex = ON */
    --Info-Card: none; /* none = OFF | flex = ON */
    --View-Count-Info: flex; /* /* none = OFF | flex = ON */
    /* Left Sidebar */
    --entry-shorts: none; /* none = OFF | flex = ON */
    --Home-Explore-Section-Sidebar: flex; /* none = OFF | flex = ON */
    --Originals-Sidebar-Tab: flex; /* none = OFF | flex = ON */
    --YouTube-Music-Sidebar-Tab: flex; /* none = OFF | flex = ON */
    --Whole-Explore-Section-Sidebar: none;  /* none = OFF | block = ON */
    --Whole-More-From-YouTube-Section: none; /* none = OFF | block = ON */
    --Useless-Service-Sidebar-Tabs: none; /* none = OFF | flex = ON */
    --Sidebar-Credits-Footer: none; /* none = OFF | block = ON */
    /* Right Sidebar */
    --Search-Sidebar-Right-Side: none; /* none = OFF | block = ON */
    /* Video Toolbar Buttons | none = OFF | inline-flex = ON */
    --Download-Button: none;
    --Thanks-Button: none;
    --Clip-Button: none;
    /* => Additions <= */
    --Video-Recommended-Playlists: inherit; /* none = removed, inherit = show | This removes playlists */
    --Show-Chat-Replay-Button: none;
    --Show-Chat-Replay-Disabled-Premiere-Button: none;
    /* Dreams Stuff */
    --Comments: 2; /* Default: 2 | Higher: 3 */
    --Video-Whitespace-Theater: 1754px; /* Default: 1754px | Higher: -moz-available */
    --Video-Recommended-Container-Width: 402px; /* Default: 402px; | Higher: 755px */
    --Video-Recommended-Results: 2; /* Default: 2 | Higher: 3 */
    --Comment-Buttons-Bar: none; /* none = OFF | grid = ON */
    --Recommened-Video-Chip-Bar: initial; /* /* none = OFF | initial = ON */
    /* => YouTube Search Result Tiles Amount <= */
    --Main-Results-Width: 100%; /* 1920px/2100px = Good | 100% = maximize space */
    --Result-Tiles: 4;
}
/* 1080p */
@media screen and (min-width: 1700px) {
/* Change Home section row amount */
[page-subtype="home"] ytd-rich-grid-renderer {--ytd-rich-grid-items-per-row: 6 !important;}
/* Subscriptions section row amount */
[page-subtype="subscriptions"] ytd-rich-grid-renderer {--ytd-rich-grid-items-per-row: 6 !important;}
}

/* 1440p */
@media only screen and (min-width: 2561px) {
/* Change Home section row amount */
[page-subtype="home"] ytd-rich-grid-renderer {--ytd-rich-grid-items-per-row: 7 !important;}
/* Subscriptions section row amount */
[page-subtype="subscriptions"] ytd-rich-grid-renderer {--ytd-rich-grid-items-per-row: 7 !important;}
}

⌛ Add this to your "My Filters" page

! ===============================> YouTube <===============================
! YouTube 5 second artificial delay on non-chrome browsers fix | https://www.reddit.com/r/youtube/comments/17z8hsz/youtube_has_started_to_artificially_slow_down/ka0g6rz or https://www.reddit.com/r/uBlockOrigin/comments/17tm9rp/youtube_antiadblock_and_ads_november_12_2023_mega/k9hp1pz
youtube.com##+js(nano-stb, resolve(1), *, 0.001)
youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.web_enable_ab_rsp_cl, false)

! Real-time view, like, dislike and time animation/changer remover | https://www.reddit.com/r/uBlockOrigin/comments/17h0ija/youtube_view_counter_updating_in_real_time_while
https://www.youtube.com/youtubei/v1/updated_metadata*
youtube.com##+js(set-attr, yt-animated-rolling-number, should-animate, false)

! YouTube Remove shorts from search results
youtube.com###content ytd-video-renderer:has([href*="/shorts"])

! YouTube - highlights comments that contain a time-skip + links | #781cff17
youtube.com##ytd-comment-thread-renderer:has(.yt-core-attributed-string__link[href*="/watch?v="]):style(background-color: #0055f717 !important;)

! YouTube Comments Cleaner | This removes those bot comments... Add more if you find them | Top = replies of replies, bottom = comment itself
youtube.com##.ytd-comment-replies-renderer:has(#author-text) ytd-comment-view-model:has-text(/Finally it’s here|Here is new fu vid!|This is the clip u all looking for|Here is new ful vid!|Here is new full vid!|Finally Here is the fu clips!!| Finally Here is the ful clips!!|Finally Here is the full clips!!|LETS BE HONEST WE ALL REMEMBER THIS RECORD|I forgot to close the camera|my content is better|read my name|Here is the full clip|DONT READ MY PROFILE PICTURE|Look at my banner for cookies|I upload funny entertaining videos|Lucky prize winners|Claim your prize|you will see it|Read My Profile|Link to the clip that explains|IM SUBBING EVERYONE WHO SUBS ME|IM SUBBING EVERYONE WHO SUBS TO ME|JJ said my music was fire on my page |MY CONTENT IS SO MUCH BETTER|Telegram|Teleegram|F*CК МЕ. ТАР 0N MY РIC|TАР 0N MY РIC|if i get 2000 followers|I WANT TO BE THE MOST HATED YTBER ON YT|parents said if I hit|are better than|translate|My content is/i)
youtube.com###contents .style-scope.ytd-item-section-renderer:has-text(/Telegram|Teleegram|mahmoud/i)

! YouTube Keywords blur thumbnail | Search Results
youtube.com##ytd-video-renderer:has-text(End) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-video-renderer:has-text(Ending) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-video-renderer:has-text(Spoiler) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-video-renderer:has-text(New Boss) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-video-renderer:has-text(Final Boss) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-video-renderer:has-text(Teaser Trailer) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
! YouTube Keywords blur thumbnail | Home & Subscription Results
youtube.com##ytd-rich-grid-media:has-text(End) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-rich-grid-media:has-text(Ending) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-rich-grid-media:has-text(Spoiler) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-rich-grid-media:has-text(New Boss) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-rich-grid-media:has-text(Final Boss) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))
youtube.com##ytd-rich-grid-media:has-text(Teaser Trailer) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px))

! Remove videos from certain channels | Clickbait channel remover, personal preference
youtube.com##ytd-rich-item-renderer:has(#metadata:has-text(/GiantGrantGames|Ryan Hall|The Fugitive|The Ultimate Discovery/i))
! Remove videos from certain channels (Search results) | Clickbait channel remover, personal preference
youtube.com##ytd-video-renderer:has(#metadata:has-text(/GiantGrantGames|Ryan Hall|The Fugitive|The Ultimate Discovery/i))

! Removes videos I've already watched
! YouTube.com##[page-subtype="channels"] ytd-rich-item-renderer:has(#progress)
! YouTube.com##ytd-video-renderer:has(#progress)

! Removes Videos containing certain words
! youtube.com##ytd-rich-item-renderer:has-text(/Grim Dawn|Diablo 4|Armored Core VI|ARMORED CORE VI|Armored Core 6|XDefiant|BattleBit Remastered|Battlebit Remastered|Battlebit|LUCIFER|Lucifer|Remnant 2|REMNANT 2|Suits|Britain's Got Talent|Got Talent|Audition|Starfield/i)

! YouTube Consent Popup | YouTube stops videos from playing if you don't "complete" the popup, this does it for you... uBlock = GOD
youtube.com##+js(set, ytInitialData.topbar.desktopTopbarRenderer.interstitial.consentBumpRenderer.forceConsent, false)
youtube.com##+js(json-prune, [].response.topbar.desktopTopbarRenderer.interstitial.consentBumpRenderer)
youtube.com##+js(json-prune, topbar.desktopTopbarRenderer.interstitial.consentBumpRenderer)

! 2021-12-01: When specific videos redirect persistently to consent page try this filter (discussion: https://redd.it/r3ec5x ):
youtube.com##+js(set, ytInitialData.onResponseReceivedEndpoints, undefined)

! 2021-12-14 YT consent v2 https://github.com/uBlockOrigin/uAssets/issues/7636#issuecomment-992858673
youtube.com##+js(set, ytInitialData.topbar.desktopTopbarRenderer.interstitial.consentBumpV2Renderer, undefined)
youtube.com##+js(json-prune, [].response.overlay.consentBumpV2Renderer topbar.desktopTopbarRenderer.interstitial.consentBumpV2Renderer overlay.consentBumpV2Renderer response.overlay.consentBumpV2Renderer)

! 2022-10-16 when navigating directly to #shorts
youtube.com##+js(set, ytInitialData.desktopTopbar.desktopTopbarRenderer.interstitial.consentBumpV2Renderer, undefined)

! Removes videos with specified dates
! youtube.com##ytd-compact-video-renderer #video-title:is([aria-label="week ago"], [aria-label="weeks ago"], [aria-label="month ago"], [aria-label="months ago"], [aria-label="year ago"], [aria-label="years ago"]):upward(ytd-compact-video-renderer)

! For watched I set it for 100% and 90%, because for me YT has 10% increments, but I know some people have 1% ones. You can edit that on your own though.
! youtube.com##ytd-compact-video-renderer #progress:is([style="width: 100%;"], [style="width: 90%;"])

Changelog: 20/10/23

• Reduced the size of the comments and removed a lot of unnecessary or out-of-date code to alter the appearance.
• Improved sidebar hover view and maximum theater mode.
• Link errors resolved from lint setting set to CSSLint.

Changelog: 18/10/23

• Simplified the update process for faster and more seamless updates.
• Successfully addressed a long-standing issue for improved functionality.
• Eliminated redundant and unnecessary sections while reorganizing for a more streamlined code structure.
• Enhanced efficiency and readability by streamlining the codebase and improved support for 1080p resolution.
• For any issues or suggestion, please feel free to open an issue on GitHub.