Stylus Styles for YT Live

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

Leave a Reply

Your email address will not be published. Required fields are marked *