☰

YouTube Custom UI

Custom YouTube UI design based on provided image.

  1. // ==UserScript==
  2. // @name         YouTube Custom UI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Custom YouTube UI design based on provided image.
  6. // @author       Your Name
  7. // @match        *://*.youtube.com/*
  8. // @license      MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const style = `
  16.     /* Reset and General Styling */
  17.     body {
  18.         font-family: 'Your Preferred Font', sans-serif !important;
  19.         background-color: #f4f4f4 !important; /* light grey background */
  20.     }
  21.  
  22.     /* Top Navigation Bar */
  23.     #container.ytd-masthead {
  24.         background-color: #ffffff !important; /* white background */
  25.         border-bottom: 1px solid #e0e0e0 !important;
  26.     }
  27.  
  28.     /* Sidebar */
  29.     #guide {
  30.         background-color: #ffffff !important;
  31.     }
  32.  
  33.     #guide-content {
  34.         padding-top: 20px !important;
  35.     }
  36.  
  37.     #guide #sections #items {
  38.         border-bottom: 1px solid #e0e0e0 !important;
  39.     }
  40.  
  41.     #guide a.ytd-guide-entry-renderer {
  42.         color: #000000 !important;
  43.     }
  44.  
  45.     /* Home Page Thumbnails */
  46.     #contents.ytd-rich-grid-renderer {
  47.         display: flex !important;
  48.         flex-wrap: wrap !important;
  49.         gap: 15px !important;
  50.         padding: 10px !important;
  51.     }
  52.  
  53.     #items.ytd-rich-item-renderer {
  54.         background-color: #ffffff !important;
  55.         border-radius: 8px !important;
  56.         padding: 10px !important;
  57.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  58.     }
  59.  
  60.     /* Channel Page Styling */
  61.     #channel-header-container.ytd-c4-tabbed-header-renderer {
  62.         background-color: #ffffff !important;
  63.         border-bottom: 1px solid #e0e0e0 !important;
  64.     }
  65.  
  66.     #tabsContent.ytd-c4-tabbed-header-renderer {
  67.         background-color: #f9f9f9 !important;
  68.     }
  69.  
  70.     #tabsContent .tab-content {
  71.         padding: 10px !important;
  72.     }
  73.  
  74.     /* Watch Page Video Player */
  75.     #player.ytd-watch-flexy {
  76.         background-color: #ffffff !important;
  77.         border-radius: 8px !important;
  78.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  79.     }
  80.  
  81.     /* Comments Section */
  82.     #comments.ytd-item-section-renderer {
  83.         background-color: #ffffff !important;
  84.         border-radius: 8px !important;
  85.         padding: 15px !important;
  86.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  87.     }
  88.  
  89.     /* Related Videos Sidebar */
  90.     #related.ytd-watch-flexy {
  91.         background-color: #ffffff !important;
  92.         border-radius: 8px !important;
  93.         padding: 10px !important;
  94.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  95.     }
  96.  
  97.     /* Footer */
  98.     #footer-container {
  99.         background-color: #ffffff !important;
  100.         padding: 20px !important;
  101.         border-top: 1px solid #e0e0e0 !important;
  102.         color: #666666 !important;
  103.     }
  104.  
  105.     /* Additional Styling */
  106.     .ytd-video-renderer, .ytd-grid-video-renderer {
  107.         border-radius: 8px !important;
  108.         overflow: hidden !important;
  109.     }
  110.  
  111.     .ytd-video-renderer:hover, .ytd-grid-video-renderer:hover {
  112.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  113.     }
  114.  
  115.     /* Button Styling */
  116.     .yt-simple-endpoint.style-scope.ytd-button-renderer {
  117.         background-color: #ff0000 !important; /* red button background */
  118.         color: #ffffff !important;
  119.         padding: 5px 10px !important;
  120.         border-radius: 5px !important;
  121.     }
  122.     `;
  123.  
  124.     const styleSheet = document.createElement('style');
  125.     styleSheet.type = 'text/css';
  126.     styleSheet.innerText = style;
  127.     document.head.appendChild(styleSheet);
  128. })();