☰

YouTube - Use classic channel header UI

This script will force the classic channel header UI with old non-compact tabs.

  1. // ==UserScript==
  2. // @name         YouTube - Use classic channel header UI
  3. // @version      2024.08.23
  4. // @description  This script will force the classic channel header UI with old non-compact tabs.
  5. // @author       xX_LegendCraftd_Xx
  6. // @icon         https://www.youtube.com/favicon.ico
  7. // @namespace    https://greatest.deepsurf.us/en/users/933798
  8. // @license      MIT
  9. // @match        *://www.youtube.com/*
  10. // @grant        none
  11. // @run-at       document-start
  12. // ==/UserScript==
  13. // Enable strict mode to catch common coding mistakes
  14. "use strict";
  15.  
  16. // Define the flags to assign to the EXPERIMENT_FLAGS object
  17. const flagsToAssign = {
  18.   web_modern_tabs: false
  19. };
  20.  
  21. const updateFlags = () => {
  22.   // Check if the EXPERIMENT_FLAGS object exists in the window.yt.config_ property chain
  23.   const expFlags = window?.yt?.config_?.EXPERIMENT_FLAGS;
  24.  
  25.   // If EXPERIMENT_FLAGS is not found, exit the function
  26.   if (!expFlags) return;
  27.  
  28.   // Assign the defined flags to the EXPERIMENT_FLAGS object
  29.   Object.assign(expFlags, flagsToAssign);
  30. };
  31.  
  32. // Create a MutationObserver that calls the updateFlags function when changes occur in the document's subtree
  33. const mutationObserver = new MutationObserver(updateFlags);
  34. mutationObserver.observe(document, { subtree: true, childList: true });
  35.  
  36. (function() {
  37. let css = `
  38. #buttons.ytd-c4-tabbed-header-renderer { flex-direction: row-reverse !important }
  39. ytd-channel-tagline-renderer { display: block !important; padding: 0 !important }
  40. #content.ytd-channel-tagline-renderer::before { content: "More about this channel"; font-weight: 500 !important }
  41. #content.ytd-channel-tagline-renderer { max-width: 162px !important }
  42. #avatar.ytd-c4-tabbed-header-renderer { width: 80px !important; height: 80px !important; margin: 0 24px 0 0 !important; flex: none !important; overflow: hidden !important }
  43. .yt-spec-avatar-shape__button--button-giant, .yt-spec-avatar-shape--avatar-size-giant { width: 128px !important; height: 128px !important }
  44. #avatar-editor.ytd-c4-tabbed-header-renderer { --ytd-channel-avatar-editor-size: 80px !important }
  45. #channel-name.ytd-c4-tabbed-header-renderer { margin-bottom: 0 !important }
  46. #channel-header-container.ytd-c4-tabbed-header-renderer { padding-top: 0 !important; align-items: center !important }
  47. #inner-header-container.ytd-c4-tabbed-header-renderer { margin-top: 0 !important; align-items: center !important }
  48. yt-formatted-string#channel-pronouns.style-scope.ytd-c4-tabbed-header-renderer, #videos-count { display: none !important }
  49. .meta-item.ytd-c4-tabbed-header-renderer { display: block !important }
  50. div#channel-header-links.style-scope.ytd-c4-tabbed-header-renderer, .page-header-view-model-wiz__page-header-attribution { display: none !important }
  51. ytd-c4-tabbed-header-renderer[use-page-header-style] #channel-name.ytd-c4-tabbed-header-renderer, [page-subtype="channels"] .page-header-view-model-wiz__page-header-title--page-header-title-large { font-size: 2.4em !important; font-weight: 400 !important; line-height: var(--yt-channel-title-line-height, 3rem) !important }
  52. span.delimiter.style-scope.ytd-c4-tabbed-header-renderer, .yt-content-metadata-view-model-wiz__delimiter { display: none !important }
  53. div#meta.style-scope.ytd-c4-tabbed-header-renderer { width: auto !important }
  54. ytd-c4-tabbed-header-renderer[use-page-header-style] #inner-header-container.ytd-c4-tabbed-header-renderer { flex-direction: row !important }
  55. div.page-header-banner.style-scope.ytd-c4-tabbed-header-renderer { margin-left: 0px !important; margin-right: 8px !important; border-radius: 0px !important }
  56. [has-inset-banner] #page-header-banner.ytd-tabbed-page-header { padding-left: 0 !important; padding-right: 0 !important }
  57. ytd-c4-tabbed-header-renderer[use-page-header-style] .page-header-banner.ytd-c4-tabbed-header-renderer, .yt-image-banner-view-model-wiz--inset { border-radius: 0px !important }
  58. .yt-content-metadata-view-model-wiz__metadata-text { margin-right: 8px !important }
  59. .yt-content-metadata-view-model-wiz__metadata-text, .truncated-text-wiz, .truncated-text-wiz__absolute-button { font-size: 1.4rem !important }
  60. .yt-tab-shape-wiz { padding: 0 32px !important; margin-right: 0 !important }
  61. .yt-tab-shape-wiz__tab { font-size: 14px !important; font-weight: 500 !important; letter-spacing: var(--ytd-tab-system-letter-spacing) !important; text-transform: uppercase !important }
  62. .yt-tab-group-shape-wiz__slider { display: none !important }`;
  63. if (typeof GM_addStyle !== "undefined") {
  64.   GM_addStyle(css);
  65. } else {
  66.   let styleNode = document.createElement("style");
  67.   styleNode.appendChild(document.createTextNode(css));
  68.   (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  69. }
  70. })();