YouTube CSS Tweaks

I've mentioned this off and on on Twitter, but never actually showed anything about it.  Basically, YouTube's new layout for the subscription box has way too much padding everywhere and it makes the page scroll unnecessarily.  So, armed with the Firefox extension Stylish, I set out to bring it back in line, and a victory was had.

As a plus, I forced everything to stay within the layout, so the page never has a vertical scroll bar.  It still scrolls if there's too many videos or if I subscribe to enough people, but the scrolling happens entirely within the interface as opposed to making the whole page scroll.  I'd wanted this for a while and just never got around to forcing it until now.

Without screenshots, mentioning this is kind of useless, and that's exactly why I wrote this post anyway: to post screenshots.  Two of them.  The two that matter.  Being what the subscription box looks like without my CSS tweaks active, and what it looks like with them active.

Before my tweaks

After my tweaks

I didn't post the CSS anywhere right away because it needed some cleanup and a lot of commenting.  I've done all that now.  The reason for the necessity of the comments is that a fair number of values need to be adjusted to suit your display resolution and Firefox interface size when you have the browser maximized, and I needed to explain exactly what the relationships between all the values were so they could be easily adjusted.

Some parts might not look all that great, for instance, the menu that pops up over the layout when you click your account name.  However, it works and it never makes the page scroll vertically, which was my main concern.

Anyway, here's a link to the CSS.  Directions for adjusting it to fit your display resolution and Firefox interface size when the browser is maximized are included within, as previously stated.  To get started, you'll need to copy/paste the CSS into a new style in Stylish.  Enjoy.

Also, feel free to use this CSS as the basis for your own YouTube CSS modifications.  A suggestion would be applying the padding reduction and layout width increase to the whole of the site.  If you use this CSS or any portion thereof in your CSS, all I ask is that you give me credit, place my blog URL in your CSS comments, and let me know where I can get a copy.

Edit (4/18/2012): Ugh.  Figures.  Just after I'm happy with it and post it, YouTube makes tweaks that fuck it up.  Looks like I'm going to have to redesign the entire thing.  Fuck you, YouTube.

Edit 2 (4/18/2012): Re-did the entire thing, and somehow the CSS is a lot simpler now.  The link now points to the updated version.  Despite being almost entirely newly-written CSS, it looks nearly identical to the original.

Edit 3 (4/18/2012): Afterthought: The sheer amount of tweaking this CSS requires for different display resolutions and browser setups is why I'm not posting it on userstyles.org.

Edit 4 (4/27/2012): Between page views Firefox decided that the page needed a vertical scroll bar, and because my CSS doesn't leave enough room for one in the layout's width, a horizontal scrollbar as well.  I did some tweaking and fixed it.  Also you can once again have the addon bar active without causing a scroll bar.

I then realized that a lot of what I'm saying works is entirely dependent on my Firefox config.  I run a pretty heavily modified setup using the theme Classic Compact, its configuration extension Classic Compact Options, and a few more tweaks that Classic Compact doesn't do done via CSS in Stylish.  So in the end a lot of the vertical heights (well, just the big one really) will need to be fine-tuned by you if you choose to use this CSS.  I could add a proper content_height calculation that depends on an interface_height variable and make you screenshot your Firefox and load it in a graphics program to get the interface_height, but I don't want to.  Just make sure that when you're tweaking the height, you have the addon bar active, even if you don't use it.

Edit 5 (4/28/2012): Noticed that the video list wasn't quite tall enough by 3px (rough eyeballed estimate that ended up being spot-on correct), and fixed it.