Youtube - Better Watch Page

By Takato Last update May 15, 2014 — Installed 151,672 times.

Anyone want new features? (with code and new link) (Takato please read)

Subscribe to Anyone want new features? (with code and new link) (Takato please read) 12 posts, 5 voices

rexydallas Scriptwright

I just finished this completely, and best of all, it is 100% CSS! so I don't have to add it back in every update! :D
(instead just use a user script)

[]( BWP tabs style more progress.png?w=AACWrXjOznDS6pzPGqc5TX9c4_yrFpw36fpFwwDAIf9xSQ)
*EDIT: See my post below that has the code for the link to the screenshot.*

rexydallas Scriptwright

so this is what I need to do
1. remove it from it's span parent
2.(somehow) delete the span (or not)
3. move them to the left one (AKA watch7-sentiment-actions) (I did not do this, some problems arose. instead, I just manually added another DIV)
4. add css for the left one
5. ???

Takato Script's Author

I get this:

rexydallas Scriptwright

sorry, I linked the wrong thing, its all a mess. I won't use dropbox for pics anymore...
that's what imgur is for...

anyway, this is the final version.

It is almost a replica of the old one :D

// edit the tabs
debug("moving tabs");
$('#watch7-secondary-actions span:not(#bwpSettingsButton):not(#videoSizeButton) .action-panel-trigger').appendTo('#watch7-secondary-actions');
$('#watch7-secondary-actions > span:not(#bwpSettingsButton):not(#videoSizeButton)').remove();
.attr("id", "watch7-secondary-actions-right")
.html("Add toAdd to")
.attr("data-tooltip-text", "Add to favorites or playlist");
.attr("data-tooltip-text", "Share or embed this video");

Wasn't sure about if you wanted the old tooltips...

anyway, the css is

#watch-description-content {min-height:28px !important;} .action-panel-content {margin-left:1px !important; margin-top:1px !important; padding: 8px 10px !important; width:auto !important; background-color:#F3F3F3 !important;} #watch7-action-panels {border-bottom: 1px solid #CCCCCC !important; border-left: 1px solid #CCCCCC !important; border-right: 1px solid #CCCCCC !important;}.yt-uix-button-panel #watch7-action-buttons {border-left-color:#CCCCCC !important; border-left-style:solid !important; border-left-width:1px !important; border-right-color:#CCCCCC !important; border-right-style:solid !important; border-right-width: 1px !important; border-top: 1px solid #CCCCCC !important; border-bottom: 1px solid #CCCCCC !important; border-bottom-color:#CCCCCC !important; border-bottom-style:solid !important; border-bottom-width:1px !important; border-top-color:#CCCCCC !important; border-top-style:solid !important; border-top-width: 1px !important;} #watch7-secondary-actions .yt-uix-button, #watch7-sentiment-actions .yt-uix-button {height:32px !important;}#watch7-secondary-actions, #watch7-secondary-actions, #watch7-secondary-actions, #watch7-secondary-actions, #watch7-sentiment-actions, #watch7-sentiment-actions, #watch7-sentiment-actions, #watch7-sentiment-actions {background:url( no-repeat scroll center bottom transparent !important; border-bottom: 0px none transparent !important; border-top: 0px none transparent !important; border-left: 0px none transparent !important; border-right: 0px none transparent !important;}#watch7-action-buttons {height:30px !important; position:relative !important;}#watch7-secondary-actions {position:absolute !important; right:0px !important; width:636px !important;}#watch7-secondary-actions-right {position:absolute !important; right:0px !important; display:inline-block !important;} #watch7-main #watch7-content .yt-uix-button-panel .yt-horizontal-rule { display:none !important; visibility:hidden !important; height:0px !important; width:0px !important;}#watch7-action-buttons #watch7-secondary-actions > .action-panel-trigger, #watch7-action-buttons #watch7-secondary-actions .action-panel-trigger { margin-left: 0px !important; padding: 0px 10px !important;} .action-panel-trigger .yt-uix-button-icon-action-panel-report {background: url( repeat scroll 0% 0% transparent !important; height: 9px !important; width: 10px !important; background-position: -53px 0px !important; margin-right:7px !important;}.action-panel-trigger:hover .yt-uix-button-icon-action-panel-report, .yt-uix-button-icon-action-panel-report {background-position: -53px -10px !important;}.action-panel-trigger .yt-uix-button-icon-action-addto {background:url( repeat scroll 0% 0% transparent !important; height:9px !important; width:10px !important; background-position: -35px 0px !important; margin-right: 7px !important;} .action-panel-trigger:hover .yt-uix-button-icon-action-addto, .yt-uix-button-icon-action-addto {background-position: -35px -10px !important;} .action-panel-trigger .yt-uix-button-icon-action-panel-share { background:url( repeat scroll 0% 0% transparent !important; height: 9px !important; width: 10px !important; background-position: -17px 0px !important; margin-right: 7px !important;} .action-panel-trigger:hover .yt-uix-button-icon-action-panel-share, .yt-uix-button-icon-action-panel-share {background-position: -17px -10px !important;} #watch7-action-buttons #watch7-secondary-actions .action-panel-trigger { opacity: 1 !important;} #watch7-action-buttons #watch7-secondary-actions > .action-panel-trigger .yt-uix-button-icon-wrapper {margin-top:9px !important;} #watch7-action-buttons #watch7-secondary-actions > .action-panel-trigger .yt-uix-button-content {font: 12px arial,sans-serif !important; color:rgb(0, 51, 204) !important; line-height:28px !important; height:24px !important; font-size:13px !important; vertical-align:top !important; font-weight:bold !important;}

I even changed it to your illegible, hard to read format that you use for some strange reason...!
the message removed my formatting in the script part D:<

VK4481 User

That would be awesome if we had this back..

rexydallas Scriptwright

well, that above is all the code I used, including the converted to his format css!
(I manually removed ALL the enter/return/NBSPs, ALL the quotations, and SOME of the spaces after colons. Oh, and I removed the omitted parts)

the only thing is I can't find out how to remove that darn animation D:

CrashBandiSp... User

Did anyone managed to get back the old header from cosmic panda?

Mainline421 Scriptwright

Where do you place the code, I don't want to mess up BWP.

rexydallas Scriptwright

I put the code part shortly above
// Remove the "Guide" [based on setting]
you way want to add a few lines and put it in the middle of the lines.

And as for the css, I put it in the variable called 'script.mainCSS'
which is near the top of the script
close after // Defining script properties
in the script.
the variable is enclosed with "s, you have to put it within them; you should also add a space (or more), then add it after the space(s) you put.
it makes this much easier if you know basic JS and know what you are doing (like the top says)...
(oh, and I made all the JS for it from scratch)
BE WARNED: it does not have international support (yet) (AKA I was just being lazy and added custom html instead of using insert before and insert after) (might change it to insert before/after later) (though insert before/after are more logical...)

CrashBandiSp... User

Just and try creating your own scripts instead of confusing? XD

VK4481 User

He's right ^

rexydallas Scriptwright

Bumping this so that Takato can see it. It seems relevant, as this code SHOULD still work with the new design (That part of the website was not changed). He could use it to add that feature back.
Either way, he would have to add international support to it because of my laziness. :P

Also, I did not edit it to work with YT Center... So it might need to be toggle-able or you would have to somehow move either the YT Center buttons or the toggling share/about/etc buttons. (I now use YT Center, but I did not use it at the time when I made this)