Adjustable timeline width, hide ads, hide stuff, show stuff only on hover & more
Xcellent by Himither
Mirrored from https://raw.githubusercontent.com/Himither/Xcellent/master/xcellent.user.css
Details
AuthorHimither
LicenseMIT
Categoryx
Created
Updated
Code size19 kB
Code checksumf3083ecd
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Xcellent
@namespace github.com/Himither
@homepageURL https://github.com/Himither/Xcellent
@supportURL https://github.com/Himither/Xcellent/issues
@version 1.21.1
@description Adjustable timeline width, hide ads, hide stuff, show stuff only on hover & more
@author Himither
@license MIT
@preprocessor stylus
@var checkbox wide "Make it wide" 1
@var checkbox hideGrok "Hide grok stuff" 0
@var text Timeline "━━━━━━⮞【Timeline】" '_'
@var range timeline-width "Timeline max-width" [900, 600, 1800, 1, "px"]
@var checkbox timeline-header "Non-sticky timline header" 0
@var checkbox timeline-hideFollow "Hide 'Who to follow'" 0
@var checkbox timeline-hideAds "Hide Ads" 0
@var checkbox timeline-outerBorders "Hide borders around timeline" 0
@var checkbox timeline-postBorders "Hide borders between posts" 0
@var checkbox timeline-imgBorders "Hide borders around images" 0
@var checkbox timeline-quoteBorders "Hide borders around quotes" 0
@var checkbox timeline-quoteImg "Round top corners for quote images" 0
@var text Sidemenu "━━━━━━⮞【Sidemenu】" '_'
@var checkbox sidemenu-hover "Show menu only on hover" 0
@var checkbox sidemenu-hideHome "Hide 'Home' button" 0
@var checkbox sidemenu-hideExplore "Hide 'Explore' button" 0
@var checkbox sidemenu-hideNotifications "Hide 'Notifications' button" 0
@var checkbox sidemenu-hideMessages "Hide 'Messages' button" 0
@var checkbox sidemenu-hidePremium "Hide 'Premium' button" 0
@var checkbox sidemenu-hideLists "Hide 'Lists' button" 0
@var checkbox sidemenu-hideBookmarks "Hide 'Bookmarks' button" 0
@var checkbox sidemenu-hideJobs "Hide 'Jobs' button" 0
@var checkbox sidemenu-hideCommunities "Hide 'Communities' button" 0
@var checkbox sidemenu-hideVerifiedOrgs "Hide 'Verified Orgs' button" 0
@var checkbox sidemenu-hideProfile "Hide 'Profile' button" 0
@var checkbox sidemenu-hideMore "Hide 'More' button" 0
@var checkbox sidemenu-hidePost "Hide 'Post' button" 0
@var text Sidebar "━━━━━━⮞【Sidebar】" '_'
@var checkbox sidebar-hover "Show sidebar only on hover" 0
@var checkbox sidebar-hideSearch "Hide sidebar searchbar" 0
@var checkbox sidebar-hideFollow "Hide sidebar 'Who to follow'" 0
@var checkbox sidebar-hideTrends "Hide sidebar 'What's happening'" 0
@var checkbox sidebar-hideLegalNotice "Hide sidebar legal notice" 0
@var text Customize "━━━━━━⮞【Customize】" '_'
@var text customBG "Custom background (Link to an image on X/Data URL wrapped in single quotes)" "''"
@var select customBGAttachment "Set background image behavior on scroll" {
"Fixed*": "fixed",
"Scroll": "scroll",
"Local": "local"
}
@var select customBGPosition "Set background image position" {
"Center*": "center",
"Left": "left",
"Top": "top",
"Right": "right",
"Bottom": "bottom"
}
@var select customBGRepeat "Set background image repeating behavior" {
"No repeat*": "no-repeat",
"Repeat": "repeat",
"Repeat X": "repeat-x",
"Repeat Y": "repeat-y",
"Space": "space",
"Round": "round"
}
@var select customBGSize "Set background image size" {
"Cover*": "cover",
"Contain": "contain",
}
@var range menuOpacity "Set background brightness" [0.6, 0, 1, 0.01, '']
@var select changeLogo "Change the logo" {
"Default*": "default",
"Twitter": "'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjQ4IDIwNCI+DQogIDxwYXRoIGZpbGw9IiMxZDliZjAiIGQ9Ik0yMjEuOTUgNTEuMjljLjE1IDIuMTcuMTUgNC4zNC4xNSA2LjUzIDAgNjYuNzMtNTAuOCAxNDMuNjktMTQzLjY5IDE0My42OXYtLjA0Yy0yNy40NC4wNC01NC4zMS03LjgyLTc3LjQxLTIyLjY0IDMuOTkuNDggOCAuNzIgMTIuMDIuNzMgMjIuNzQuMDIgNDQuODMtNy42MSA2Mi43Mi0yMS42Ni0yMS42MS0uNDEtNDAuNTYtMTQuNS00Ny4xOC0zNS4wNyA3LjU3IDEuNDYgMTUuMzcgMS4xNiAyMi44LS44Ny0yMy41Ni00Ljc2LTQwLjUxLTI1LjQ2LTQwLjUxLTQ5LjV2LS42NGM3LjAyIDMuOTEgMTQuODggNi4wOCAyMi45MiA2LjMyQzExLjU4IDYzLjMxIDQuNzQgMzMuNzkgMTguMTQgMTAuNzFjMjUuNjQgMzEuNTUgNjMuNDcgNTAuNzMgMTA0LjA4IDUyLjc2LTQuMDctMTcuNTQgMS40OS0zNS45MiAxNC42MS00OC4yNSAyMC4zNC0xOS4xMiA1Mi4zMy0xOC4xNCA3MS40NSAyLjE5IDExLjMxLTIuMjMgMjIuMTUtNi4zOCAzMi4wNy0xMi4yNi0zLjc3IDExLjY5LTExLjY2IDIxLjYyLTIyLjIgMjcuOTMgMTAuMDEtMS4xOCAxOS43OS0zLjg2IDI5LTcuOTUtNi43OCAxMC4xNi0xNS4zMiAxOS4wMS0yNS4yIDI2LjE2eiIvPg0KPC9zdmc+'",
"Custom": "customLogo"
}
@var text customLogo "Custom logo (Link to an image on X/Data URL wrapped in single quotes)" "''"
@var range resizeLogo "Logo size" [75, 50, 150, 1, "%"]
@var text Other "━━━━━━⮞【Other】" '_'
@var checkbox other-hoverMessages "Show Messages only on hover" 0
@var checkbox other-hateBorders "Make all borders transparent" 0
==/UserStyle== */
@-moz-document url-prefix("https://x.com") {
/* Formerly known as Twitter ¯\_(ツ)_/¯ */
:root:has(body[style*="rgb(0"]) {
--bg: rgba(0, 0, 0, menuOpacity);
}
:root:has(body[style*="rgb(21"]) {
--bg: rgba(21, 32, 43, menuOpacity);
}
:root:has(body[style*="rgb(255"]) {
--bg: rgba(255, 255, 255, menuOpacity);
}
:root {
--br8: 8px;
--br16: 16px;
}
if wide {
html {
overflow-x: hidden;
}
header[role="banner"] {
position: absolute !important;
left: 0 !important;
}
header[role="banner"] > div {
position: absolute !important;
left: 0 !important;
margin-left: 0 !important;
}
header[role="banner"] > div > div {
left: 0 !important;
}
main[role="main"] > div {
width: 100dvw !important;
}
[data-testid="primaryColumn"] {
position: absolute !important;
left: 275px !important;
width: auto !important;
margin: auto !important;
max-width: timeline-width !important;
right: calc(382px + 32px) !important;
transform: translateX(0) !important;
}
[data-testid="primaryColumn"] > div > div:last-child,
[data-testid="primaryColumn"] > div > div:last-child > div > div {
min-width: unset !important;
max-width: unset !important;
width: 100% !important;
margin: 0 !important;
}
[data-testid="sidebarColumn"] {
position: fixed;
right: 0;
padding-left: 32px;
padding-right: 32px;
margin-right: 0;
width: 414px;
min-width: unset;
max-width: unset;
}
[data-testid="sidebarColumn"] > div {
align-items: flex-end !important;
width: 100% !important;
}
[data-testid="sidebarColumn"] > div > div {
position: absolute;
min-height: 100dvh;
width: 350px;
margin-top: 0 !important;
top: 0 !important;
bottom: 0 !important;
}
if sidemenu-hover or sidebar-hover {
[data-testid="primaryColumn"] {
transition: all 300ms ease-in-out !important;
}
}
if sidemenu-hover {
[data-testid="primaryColumn"] {
left: 0 !important;
}
header[role="banner"]:hover > div > div {
background-color: var(--bg) !important;
}
}
if sidebar-hover {
[data-testid="primaryColumn"] {
z-index: 0 !important;
right: 32px !important;
}
[data-testid="sidebarColumn"]:hover {
width: 414px !important;
background-color: var(--bg) !important;
}
}
@media screen and (max-width: 1264px) {
header[role="banner"] > div > div > div {
width: 68px !important;
}
if sidemenu-hover {
[data-testid="primaryColumn"] {
left: 0 !important;
}
}
else {
[data-testid="primaryColumn"] {
left: 68px !important;
}
}
[data-testid="sidebarColumn"] > div > div > div > div > div > div > div:has([role="search"]) {
width: 350px;
}
}
@media screen and (max-width: 987px) {
[data-testid="primaryColumn"] {
right: 0 !important;
}
}
@media screen and (max-width: 499px) {
if sidemenu-hover {
[data-testid="primaryColumn"] {
left: 0 !important;
}
}
}
}
if hideGrok {
div[data-testid="GrokDrawer"],
button[aria-label*="Grok"],
a[href$="grok"],
button:has(path[d*="21h4.241L6.446"]),
[data-testid="tweet"] div:has(> nav) {
display: none;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━⮞ Timeline */
if timeline-header {
[data-testid="primaryColumn"] > div > div:first-child {
position: unset !important;
}
}
if timeline-hideFollow {
div[aria-label$="posts"] > div > div:not(:has(:is(article, a[href^="/i/status"], [role="progressbar"], button > div > svg))) {
display: none !important;
}
}
if timeline-hideAds {
main section > div > div > div:has(article > div > div > div > div > div > div > div > div > div > span),
[data-testid="cellInnerDiv"]:has(> div > div > [data-testid="placementTracking"]),
[data-testid="cellInnerDiv"]:has([data-testid="inlinePrompt"]) {
display: none !important;
}
}
if timeline-outerBorders {
[data-testid="primaryColumn"] {
border-color: transparent !important
}
}
if timeline-postBorders or other-hateBorders {
[data-testid="primaryColumn"] nav {
border-bottom-color: transparent;
}
[data-testid="primaryColumn"] [role="separator"] {
background-color: transparent;
}
}
if timeline-imgBorders {
[data-testid="pri...