Skip to content

TubeK12 - 2012 YouTube Recreation [Discontinued] by lightbeam

Screenshot of TubeK12 - 2012 YouTube Recreation [Discontinued]
Homepage Write a review Install Get Stylus

Details

Authorlightbeam

LicenseMIT License

Categoryyoutube

Created

Updated

Size220 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

I am no longer developing this script as of May 13, 2023. My CustomTube extension lets you use the 2012 layout: https://addons.mozilla.org/en-CA/firefox/addon/customtube/

A coding experiment, since I'm still pretty new to this stuff.

It started off as an attempt to recreate the 2013-2017 layout, but quickly evolved into an attempt to recreate the 2012 one, though there are still some remnants of the 2013 layout recreation in some places.

It's incomplete, and I plan on updating it. A few things to note though:

  1. I don't have first hand experience with the 2012 layout, so old YouTube screenshots and pages on the Wayback Machine were all I had to go off of when I made this style.
  2. Because the 2012 layout in its original form is fundamentally very different from 2017-Present YouTube, a 100% faithful recreation is (probably) impossible.
  3. It might not work with all zoom levels on all monitors.
  4. It is being developed for Firefox first and foremost, there might be minor issues in Chromium. Although I try to fix those whenever possible.
  5. Not compatible with YouTube Redux, 7ktTube, or any other major layout changing scripts.
  6. Dark mode compatibility isn't 100%.
  7. When I'm not certain how something looked in 2012/it didn't exist in 2012, I will either: Make it look like it did in 2013-2017, or try to make it look like it fits in with the rest of the design.
  8. TubeK12 is by no means stable (not yet anyway). Expect bugs.

Notes

Heads up: Some customization options may be removed in future updates because I need to simplify the code (though they may get added back after). If the script updates and changes something you don't like, you are free to download an older version of the script (I keep archives of all versions of TubeK12 on the Github page [https://github.com/lightbeam24/TubeK12]).

IMPORTANT: Make sure to check the options whenever the style updates! I make most major changes enabled by default, but optional.

Version 1.5.0 - January 15, 2023

NOTE 1: I took a break from working on this script, but now I'm back at it! This update still has a lot of bugs and issues in it! I will do my best to fix those. I just needed to get this update out to fix some MAJOR issues. I feel that the script is in a much better state now than it was in on version 1.4.1 at the very least.

NOTE 2: "Force Static Layout" is now on by default. You can turn it off, but I won't be developing Non-Static Mode any further. It's a nightmare to get it to work with every zoom level, and it's less accurate to 2012 YT. Unfortunately, I still have yet to get Static Mode to work with the watch pages. If it's possible, it might require a companion JS userscript.

Fixed - Channel pages were broken as a result of channel urls starting with "@" now
Fixed - YouTube's new design added a bunch of rounded corners
Fixed - Topbar had a white background
Fixed - Some issues with the comment section
Fixed - Many more issues
Issue - Alot of customization options are broken or unorganized, I still have to go through those
Issue - Channel pages have lots of issues
Issue - Subscribe buttons are messed up
Issue - Three column homepage is completely broken
Issue - Preferred site version option has issues
Issue - Playlist page is broken
Issue - MANY more

Version 1.4.1 - August 8, 2022

New - Banners have been updated and also respond to preferred site version option (added in 1.4.0)
Fixed - Channel Menu button text bug fixed

Version 1.4.0 - July 21, 2022

NOTE: Many of the changes in this update are very incomplete, and are disabled by default.

New - Options are rearranged to (hopefully) make more sense
New - Option for three columns on the homepage
New - Improved dark mode compatibility
New - Channel pages are more accurate
New - Video player is more accurate
New - The script now affects the old watch page as well
New - Improved force static layout (added in 1.3), but still isn't recommended
New - Added experimental options, including preferred site version
New - Icons on the non-watch page sub button
New - Many more smaller details
Fixed - YouTube apps topbar button was removed by yt and was causing issues, so it's removed here too
Fixed - Potential upcoming redesigns of the sidebar and searchbar are already fixed
Fixed - YouTube Studio tabs
Fixed - View replies button is now visible on most resolutions
Fixed - More probably
Changed - Some of the code was cleaned up and rearranged, which might cause issues.

Version 1.3.2 - July 9, 2022

Fixed - If List view for channels was enabled, the channel's social links would be way oversized

Version 1.3.1 - July 8, 2022

Fixed an issue

Version 1.3.0 - July 8, 2022

New - Non-Firefox users now have to enable an option to fix some minor issues
New - Added words to header (such as Recommended for You), as well is icons on a case-by-case basis
New - Added Channel Menu button on top of the sidebar
New - Added old sidebar icons
New - "Shorts" sidebar button is now hidden
New - Added list view for channel page
New - More accurate subs page
New - Added "Upload" and "From YouTube" buttons on topbar
New - Several improvements to comments section
New - Several improvements to recommended videos on watch page
New - Improved dark mode compatibility (but still not perfect)
New - Added many experimental options
New - Many, MANY more smaller details
Fixed - Search icon is now grey, and only changes to black when hovered
Fixed - Older versions used to cut off infinite scrolling of recommended videos on watch page. It didn't work properly alot of the time.
Fixed - Some text and icons would be white and therefore hard to see
Fixed - Many, hopefully
Removed - Title on top option. It was added prematurely, regardless of the fact that it stopped working.
Changed - Some parts of the code were rearranged and refined, which might introduce bugs.

Version 1.2.1 - June 28, 2022

Changed - Due to an unknown change made by YouTube, Title on top no longer works (for me anyway). Now disabled by default and recommended against. I plan to add it back in a future update, as long as it's still possible.

Version 1.2.0 - June 23, 2022

New - Title on top option added
New - Old video player is now fully optional
New - Old site background option added
New - Added animations when switching pages
New - Minor playlist page tweaks
New - Many other minor details
Fixed - Title is now visible in fullscreen again. This was an oversight.
Bugfixes - Many, probably

Version 1.1.0 - June 16, 2022

New - 2012 logo and search icon are now used
New - Attempts to recreate the old video player
New - Subscribe button on watch page is now a rectangle
New - More customization options, including a bandaid fix for Dark Mode incompatibility
New - Many other smaller details
Bugfixes - Many

Version 1.0.0 - June 11, 2022

Initial release.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           TubeK12 - 2012 YouTube Recreation
@namespace      youtube.com
@version        1.5.0
@description    Attempts to recreate the 2012 YouTube layout
@author         lightbeam
@preprocessor stylus
@var checkbox chromium "Non-Firefox users must turn this option on" 0
@var checkbox forcedStaticLayout "Force static layout. [Disabled on watch page] Non-Static mode is no longer being developed, so turning this off is not recommended." 1
@var checkbox darkMode "Dark mode [Incomplete.]" 0
@var checkbox oldBackground "Old site background (not compatible with dark mode.)" 1
@var select oldPlayer "Recreate old video player" ["on:On [New version] (Can be buggy)", "legacy:On [Old version] (More stable, but less accurate)", "off:Off",]
@var checkbox removeCast "Remove cast button in Chromium based browsers" 1
@var checkbox threeCol "[CURRENTLY BROKEN, Development Paused] Three column homepage" 0
@var checkbox newButton "Add channel menu button on top of sidebar" 1
@var checkbox hideHandle "NEW: Hide handles (@'s) on channel page" 0
@var checkbox hideSecondCol "NEW: Hide second column on search page (used for tv shows and movies and stuff)" 1
@var text homepageText "Text for the header on the homepage. (Must be in quotes)" ""Recommended for You""
@var text createText "Text for 'Create' button. (Must be in quotes)" ""Upload""
@var checkbox sidebarIcons "Use old sidebar icons" 1
@var checkbox hideShorts "Hide 'Shorts' sidebar button" 1
@var checkbox channelList "Channel homepage list view" 1
@var checkbox channelGrid "Channel videos/playlists page layout changes" 1
@var checkbox historyPage "[Development Paused] History page layout changes [Incomplete]" 1
@var checkbox hideSidebarSearch "Hide sidebar on search page (Recommended)" 1
@advanced select descFix "To be replaced: Put description on a seperate line (Affects other things, such as comment count)" {
  "Off (Like May 2022 onward)":  "auto",
  "On (minor potentially unfixable issues)": "block",
}
@advanced select     hideMovies   "To be replaced: Hide Movies (recommended because of formatting issues)"   {
  "On":  "none",
  "Off": "auto",
}
@advanced select     hideHeatMap   "To be replaced: Hide Heat Map (most watched portions of video)"   {
  "On":  "none",
  "Off (like modern YT)": "auto",
}
@advanced select     staticMode   "To be replaced: Static Scrolling Mode (Recommended, non-static mode is broken)"   {
  "On":  "absolute",
  "Off (like modern YT)": "auto",
}
@advanced select     hideSponsor   "To be replaced: Hide Join button"   {
  "On":  "none",
  "Off": "flex",
}
@advanced select     hideMixes  "To be replaced: Hide mixes on watch page and in search results (recommended because of formatting issues)"   {
  "Yes": "none",
  "No":  "flex",
}
@advanced select     hidepfps    "To be replaced: Hide pfps on watch page"   {
  "Yes": "none",
  "No":  "block",
}
@advanced select     hidebadresults   "To be replaced: Hide irrelevant results in search (For You, People Also Watched, etc)"   {
  "Yes":  "none",
  "No": "block",
}
@var select watchPage "[Development Paused] Watch page layout changes [Incomplete.]" ["off:Off (most stable)", "old:I have the old layout", "new:I have the new layout",]
@var select siteVersion "[Development Paused] Experimental: Preferred site version [doesn't work with most zoom levels yet.]" ["noPref:Off, recommended for those not using three column layout (most stable)", "v1:Version 1 (Approx. Nov 2011 - Feb 2012)", "v2:Version 2 (Approx. Feb 2012 - Aug 2012)", "v3:Version 3 (Approx. Aug 2012 - Dec 2012)", "v4:Version 4 (?) (September 2012 or something. Only found a couple archives of it.)",]
@var checkbox trueOldWatchPage "[Development Paused] Experimental more accurate old watch page. [Incomplete, and doesn't work with some videos or zoom levels and progress bar is messed up among other issues. I cannot guarantee its completion.]" 0
@var checkbox sidebarChannel "[Development Paused] Experimental: Put pfp on sidebar (That's what the below option is for) [Not recommended; doesn't really work, at least not yet.]" 0
@var text pfpURL "[Development Paused] Profile picture url. Right click on your profile picture anywhere on YouTube and copypaste it here. [Doesn't do anything without above option.]" url("https://s.ytimg.com/yt/img/no_videos_140-vfl5AhOQY.png")
@var checkbox moreVideos "[Development Paused] Experimental: Add more videos to the third column." 0
@var text programsText "[Deprecated]Text for 'YouTube apps' button. (Must be in quotes)" ""From YouTube""
@advanced select     playerWidth   "[DEPRECATED]Experimental: Non-fullscreen player consistent width." {
  "auto (like modern YT)": "auto",
  "888 pixels (BUGGY)":  "888px",
  "854 pixels (BUGGY)":  "854px",
}
@advanced select     playerHeight   "[DEPRECATED]Experimental: Non-fullscreen player consistent height." {
  "auto (like modern YT)": "auto",
  "500 pixels (BUGGY) [Use with 888]":  "500px",
  "480 pixels (BUGGY) [Use with 854]":  "480px",
}
@advanced select     channelMitigate   "[DEPRECATED]Toggle this option if the channel page is broken"   {
  "Off (I am viewing a channel WITH a background)":  "330px",
  "On (I am viewing a channel WITHOUT a background)": "160px",
}
@advanced select     channelBGHide   "[DEPRECATED]Hide channel backgrounds (if you are tired of toggling the above option)"   {
  "Off":  "auto",
  "On": "none",
}
@advanced select     reformDelay   "Formatting issue cover up animation delay"   {
  "No Delay":  "0s",
  "0.1s":  "0.1s",
  "0.5s":  "0.5s",
  "1s":  "1s",
  "1.25s":  "1.25s",
  "1.5s": "1.5s",
  "2s":  "2s",
  "3s (for slow connections)":  "3s",
  "4s (for slow connections)":  "4s",
  "5s (for slow connections)":  "5s",
}
@advanced select     formatAnim   "Formatting issue cover up animation duration"   {
  "None":  "0s",
  "1s":  "1s",
  "0.1s":  "0.1s",
  "0.5s":  "0.5s",
  "1.25s":  "1.25s",
  "1.5s": "1.5s",
  "2s":  "2s",
  "3s (for slow connections)":  "3s",
  "4s (for slow connections)":  "4s",
  "5s (for slow connections)":  "5s",
}
@var checkbox goodExplore "[To be removed, since Explore no longer exists] Make the Explore page replicate the old 'Browse' feature." 0

==/UserStyle== */

@-moz-document domain("youtube.com") {
/* Section 0: Variables */
:root {
/* font */
--tubek12-font-family: arial;
/* images */
--tubek12-pfp-border-radius: 0;
/* structure */
--tubek12-structure-border-radius: 5px;
/* sidebar top */
--tubek12-sidebar-top-bg: #6a6a6a; /* If a section isn't using the variable, the entire section is probably bloat and must be investigated. */
--tubek12-sidebar-top-width: 139.5px;
/* sidebar */
--tubek12-sidebar-width: 200px;
--tubek12-sidebar-bg: #272727;
--tubek12-sidebar-non-item-text-color: #ccc;
--tubek12-sidebar-item-width: 81.75%;
--tubek12-sidebar-item-left-margin: 0%;
--tubek12-sidebar-item-font-size: 12px;
--tubek12-sidebar-active-item-background: #1c1c1c;
--tubek12-sidebar-active-item-text-color: #ededed;
--tubek12-sidebar-active-item-border-top: 1px solid #323232;
--tubek12-sidebar-active-item-border-bottom: 1px solid #1b1b1b;
--tubek12-sidebar-active-item-border-right: 4px solid #c4302b;
--tubek12-sidebar-inactive-item-background: linear-gradient(to bottom,#292929 0,#252525 100%);
--tubek12-sidebar-inactive-item-background-hover: #1c1c1c;
--tubek12-sidebar-inactive-item-text-color: #999;
--tubek12-sidebar-inactive-item-border-top: 1px solid #323232;
--tubek12-sidebar-inactive-item-border-bottom: 1px solid #1b1b1b;
--tubek12-sidebar-inactive-item-border-right: 4px solid transparent;
--tubek12-sidebar-inactive-item-border-right-hover: 4px solid #6a6a6a;
/* header */
--tubek12-header-text-color: #fff;
--tubek12-header-font-size: 15px;
--tubek12-header-text-right-margin: -400px;
--tubek12-header-text-left-margin: 150px;
--tubek12-header-icon-left-margin: 156px;
/* topbar */
--tubek12-topbar-button-top-margin: 12px;
--tubek12-topbar-button-font-size: 13px;
/* searchbar */
--tubek12-searchbar-left-margin: 120px;
/* banners */
--tubek12-realityshade-red-banner: linear-gradient(to bottom,#c95145 0,#913d37 45px);
--tubek12-realityshade-blue-banner: linear-gradient(to bottom,#6482ad 0,#3b557e 45px);
--tubek12-realityshade-green-banner: linear-gradient(to bottom,#74a446 0,#4d7730 45px);
--tubek12-realityshade-orange-banner: linear-gradient(to bottom,#d88f41 0,#a06634 45px) /* missing. This is an estimate. */;
if siteVersion == v1 {
--tubek12-realityshade-red-banner: linear-gradient(to bottom,#cb3425 0,#9b281e 100%);
--tubek12-realityshade-blue-banner: linear-gradient(to bottom,#849fc2 0,#6683b3 100%);
--tubek12-realityshade-green-banner: linear-gradient(to bottom,#78b146 0,#51931e 100%) /* missing. This is an estimate. */;
--tubek12-realityshade-orange-banner: linear-gradient(to bottom,#e08a25 0,#cd6627 100%);
}
/* video titles and other text */
if darkMode {
--tubek12-normal-text-color: #ccc !important;
--tubek12-lesser-text-color: #999 !important;
--tubek12-hover-bg: #000;
--tubek12-section-box-shadow: 12px 0px 12px #111;
}
if not darkMode {
--tubek12-normal-text-color: #333 !important;
--tubek12-lesser-text-color: #666 !important;
--tubek12-hover-bg: #fff;
--tubek12-section-box-shadow: 12px 0px 12px #ddd;
}
--tubek12-video-title-text-color-hover: #337bb5;
--tubek12-video-title-text-color-hover-alt: #1c62b9;
--tubek12-video-title-text-color-hover-alt-deprecated: #438bc5;
/* other */
--tubek12-filters-anim-duration: 0s;
  --ytd-watch-flexy-width-ratio: 16 !important;
  --ytd-watch-flexy-height-ratio: 9 !important;
/* channel menu button */
--tubek12-channel-menu-button-background: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
--tubek12-channel-menu-button-background-hover: linear-gradient(to bottom,#096bd2 0,#0053a6 100%);
--tubek12-channel-menu-button-background-pressed: linear-gradient(to bottom, #003386, #094ba2 ...

Reviews

No reviews yet.