an attempt at recreating twitter's 2013 website while using oldtwitter as a base!
Twitter 2013 for OldTwitter by melongirl
Details
Authormelongirl
LicenseNo License
Categorytwitter
Created
Updated
Size162 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
readme!!
you need oldtwitter to use this!!! this won't work on normal twitter/x
if on firefox esr or any older version of firefox before late 2023: go to about:config and toggle layout.css.has-selector.enabled to true!!!
it'll still look weird in some spots though because firefox before then was weird. sorry!
not compatible with phones
(sorry!)
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name twitter 2013 4 oldtwitter
@namespace github.com/openstyles/stylus
@version 1.3.5
@description oh my olds
@author melo
@var select bg "🖼️ | Theme" {
"Nothing": "null",
"Theme 1*": "theme1",
"Theme 2": "theme2",
"Theme 3": "theme3",
"Theme 4": "theme4",
"Theme 5": "theme5",
"Theme 6": "theme6",
"Theme 7": "theme7",
"Theme 8": "theme8",
"Theme 9": "theme9",
"Theme 10": "theme10",
"Theme 11": "theme11",
"Theme 12": "theme12",
"Theme 13": "theme13",
"Theme 14": "theme14",
"Theme 15": "theme15",
"Theme 16": "theme16",
"Theme 17": "theme17",
"Theme 18": "theme18",
"Theme 19": "theme19",
"Theme 20": "theme20",
"Pride": "ctheme1",
"Twitter": "ctheme2"
}
@var checkbox rite "🖼️ | Hide right side bar" 1
@var checkbox fav "🖼️ | Hide Profile Favorites" 1
@var checkbox counter "🖼️ | Hide like, retweet and reply count on tweets" 1
@var checkbox bm "🖼️ | Hide Bookmark Button on Tweets" 1
@var checkbox reply "🖼️ | Hide Reply Counter on Tweets" 1
@var checkbox interact "🖼️ | Display interaction buttons above media" 1
@var checkbox userpop "🖼️ | Hide user popup modal" 1
@var checkbox contain "🖼️ | Remove container background" 0
@var checkbox larry "🖼️ | Use 2011 logo" 0
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("x.com"), domain("twitter.com") {
/* twitter 2013 4 oldtwitter, made with love by melo 💜💛 */
#loading-box {
background-image: url("https://pbs.twimg.com/media/GN_qUA9XgAAooja.png");
background-attachment: fixed;
background-repeat: repeat;
}
#loading-box-text:before {
content: "";
background-image: url("https://pbs.twimg.com/media/GN_paFsWQAAW6xb.png");
width: 72px;
display: inline-block;
height: 72px;
margin-left: 0;
if larry {
background-image: url("https://pbs.twimg.com/media/GN_pWMyW4AAaChf.png");
}
}
#loading-box-error {
color: white!important;
text-shadow: 0 1px 0 #0d0d0d;
}
body:has(#profile-banner-sticky) #loading-box {
top: 0;
}
#navbar {
background-image: url(https://abs.twimg.com/a/1381432172/t1/img/twitter_web_sprite_bgs.png);
background-position: 0 0;
background-color: #252525;
height: 40px;
box-shadow: 0 2px 3px rgba(0,0,0,.25);
border-bottom: 0;
}
#navbar-container {
height: 40px;
}
#navbar-line {
display: none;
}
#container:not(.app-columns-container), .container {
background: url(https://abs.twimg.com/a/1381432172/t1/img/wash-white-30.png);
padding-right: 15px;
}
.body-dark:not(.body-light) #container:not(.app-columns-container), .body-dark:not(.body-light) .container {
background: url(https://abs.twimg.com/a/1381432172/t1/img/wash-black-40.png);
}
if contain {
#container:not(.app-columns-container), .container {
background: none!important;
}
}
#twitter-logo {
width: 24px;
height: 21px;
display: inline-block;
padding-left: 0;
background-position:-40px 0;
background-image: var(--sprite);
if larry {
background-image: url(https://pbs.twimg.com/media/GN-kOGhWoAEyU5w.png);
background-position: 0px 0;
width: 33px;
height: 25px;
top: -2px;
}
}
#navbar-right {
bottom: 42px;
if larry {
bottom: 46px;
}
}
#twitter-logo:before {
display: none;
}
#navbar-links a {
color: #bbb!important;
text-shadow: 0 -1px 1px rgba(0,0,0,.75);
font-weight: bold;
box-shadow: none!important;
top: 4px;
padding-bottom: 12px!important;
}
#search-input {
color: #444!important;
background-color: #ccc!important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2)!important;
border-radius: 13px;
border: none;
padding: 6px 27px 6px 12px;
width: 202px;
height: 26px;
transition: all .2s ease-in-out;
}
#search-icon {
width: 26px;
height: 26px;
right: 2px;
}
#navbar-links a::before {
content: ""!important;
top: 4px;
position: relative;
}
#search-icon:before {
content: "";
display: inline-block;
width: 12px;
height: 14px;
background-image: var(--sprite);
background-position: -20px -710px;
}
#pin-lists, #pin-bookmarks, #pin-profile {
background-color: transparent;
}
#navbar-links a.menu-active {
background-image: url(https://abs.twimg.com/a/1381432172/t1/img/twitter_web_sprite_bgs.png);
background-position:0 -50px;
box-shadow:inset 0 5px 10px rgba(0,0,0,.5) !important;
}
#navbar-links a:hover, #navbar-links a:focus {
transition: none;
}
#navbar-links a.menu-active, #navbar-links a:hover, #navbar-links a:focus {
color: white!important;
}
#home:before {
content: ""!important;
background-image: var(--sprite);
background-position:0 -50px;
width:21px;
height: 24px;
display: inline-block;
}
#navbar-links #home:hover:before, #navbar-links #home:focus:before {
background-position:0 -80px;
}
.menu-active#home:before {
background-position:0 -110px!important;
}
#notifications:before {
content: "";
background-image: var(--sprite);
background-position: -80px -50px;
width: 22px;
height: 24px;
display: inline-block;
}
#navbar-links #notifications:hover:before, #navbar-links #notifications:focus:before {
background-position:-80px -80px;
}
.menu-active#notifications:before {
background-position:-80px -110px!important;
}
#messages:before {
content: "" !important;
background-image: url("https://abs.twimg.com/a/1383245068/t1/img/messages.png");
background-position: 0 0;
width: 21px;
height: 16px;
display: inline-block;
top: 0 !important;
}
#navbar-links #messages:hover:before, #navbar-links #messages:focus:before {
background-position: 0 -15px;
}
#pin-profile:before {
content: ""!important;
background-image: var(--sprite);
background-position:-120px -50px;
width:21px;
height: 24px;
display: inline-block;
}
#pin-bookmarks:before, #pin-lists:before {
display: none;
}
#navbar-links #pin-profile:hover:before, #navbar-links #pin-profile:focus:before {
background-position:-120px -80px;
}
.menu-active#pin-profile:before {
background-position:-120px -110px!important;
}
#navbar-tweet-button {
background-image: url(https://abs.twimg.com/a/1381432172/t1/img/twitter_web_sprite_bgs.png);
background-repeat:repeat-x;
background-position:0 -140px;
background-color:#2c77ba;
padding: 3px 4px 5px 10px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
text-shadow: 0 -1px 1px rgba(0,0,0,.3);
border-color: #111;
border-radius: 4px;
height: 30px;
position: relative;
top: -2px;
}
#navbar-tweet-button:hover {
background-position:0 -170px;
background-color:#1D68A7;
filter: none;
}
#navbar-tweet-button:active {
background-position:0 -200px;
background-color: #3D8FD8;
filter: none;
}
#navbar-tweet-button:before {
content: ""!important;
background-image: var(--sprite);
background-position:-200px -50px;
width:22px;
height:18px;
display: inline-block;
margin-right: 1px;
}
#navbar-tweet-button-text, #navbar-tweet-highlight {
display: none;
}
#navbar-user {
margin-top: -3px;
}
#navbar-right #navbar-user:after {
background-image: var(--sprite);
content: "";
background-position:-240px -50px;
width:2px;
height:32px;
display: inline-block;
margin-left: 5px;
}
#navbar-right #navbar-user:before {
background-image: var(--sprite);
content: "";
background-position:-240px -50px;
width:2px;
height:32px;
display: inline-block;
margin-right: 5px;
}
.dropdown-menu, #search-results {
box-shadow: 0 5px 10px rgba(0,0,0,.2);
border: 1px solid rgba(0,0,0,.2);
margin: 2px 0 0;
border-radius: 4px;
}
#search-results {
width: 200px;
margin-top: 9px;
padding: 7px 0;
}
.search-result-item {
padding: 4px 15px 4px 24px!important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.search-result-item:before {
content: "";
vertical-align: text-top;
display: inline-block;
background-image: var(--sprite);
background-repeat: no-repeat;
width: 12px;
height: 14px;
background-position: -40px -710px;
margin: -1px 4px 0 0;
}
.search-result-item:hover:before {
background-position: -60px -710px;
}
.body-dark:not(.body-light) .search-result-item:hover:before {
filter: invert(1);
}
.search-result-item:has(.search-result-item-avatar):before {
display: none;
}
.search-result-item-avatar {
background-color: var(--background-color);
width: 24px;
height: 24px;
border-radius: 3px!important;
margin-bottom: 0!important;
}
.search-result-item-screen-name {
color: #999;
margin-left: 0;
...