make Youtube like you need it…
Stylus is a browser extension for Chrome and Opera that allows the user to manage and create "styles" that modify the appearance of web sites. Users may download existing skins/styles from a repository, or write their own. Stylus uses CSS scripting to override the selected site's CSS.
Below is my CSS for Youtube live streams. It improves the chat box, screen utilization, and hides a couple annoying things.
In Stylus, name your style, click Edit, and paste the following into a Section.
/* For Youtube Live Streams, Rev. 05/22/19
NOTE: 1080p desplay; Windows zoom: 125%; browser zoom: 150%.
User will need to adjust some pixel settings to accomodate zoom used.
*/
html,
body,
iframe {
/* override google font Roboto and use locally-installed unicode font */
font-family: "Arial Unicode MS" !important;
margin: 0 !important;
padding: 0 !important;
}
#masthead-positioner,
#masthead-container {
/* unlock stupid fat fixed top bar so it'll scroll up */
position: relative !important;
}
#masthead-positioner-height-offset {
/* recover wasted space for stupid fat fixed top bar */
height: 0 !important;
}
#container.ytd-masthead {
height: 36px !important;
/* make stupid fat top bar skinny */
}
#page-manager {
margin: 0 !important;
}
#primary {
/* recover tons of wasted white-space around video (left column) */
margin: 0 !important;
padding: 0 10px 0 0 !important;
}
ytd-live-chat-frame {
/* make chat box go to bottom of screen (adjust as needed) */
height: 480px !important;
min-height: 480px !important;
}
yt-live-chat-header-renderer {
/* make stupid fat "Top Chat/Live Chat" bar skinny */
height: 16px !important;
padding: 0 !important;
}
yt-live-chat-text-message-renderer {
/* reduce huge (due to 150% browser zoom) font size (adjust as desired)
IF YOU NEED CAPS TO READ, CRANK THIS UP INSTEAD */
font-size: 12px !important
}
#secondary {
/* recover tons of wasted white-space in right column */
padding: 3px !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-message-input-renderer {
padding: 3px !important;
}
#clarify-box {
display: none;
}
/* Emoji Picker Box (adjust as desired to show 4-5 rows) */
yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {
min-height: 220px;
max-height: 300px;
margin: 0 -24px 0 -24px;
}
/* for "superchat" pay begathon streams: hide annoying ticker shit */
#ticker {
display: none !important;
}
/* for yt messenger pop-up: move left to cover part of video, not chat window */
ytd-conversation-section-renderer {
width: 300px !important;
top: 2px !important;
left: 350px !important;
font-size: 12px !important;
}
#post-text { /* fix stupid oversized message font size */
font-size: 12px !important;
line-height: 16px !important;
}
/* hide stupid "Welcome to Youtube Chat" crap */
#card {
display: none !important;
}
/* Below:
Set: Applies to: URLs starting with : https://www.youtube.com
Click Add button
Set: Applies to: URLs starting with : https://gaming.youtube.com
Left Column:
Give the style a name, click Save
*/
To learn more about using Stylus, click its icon and select Wiki.
Enjoy! --KV5R