Description layout broken

[lynrayy]

[KingGamingYT]

The description area seems fine. What you're describing is YouTube's new layout changes which have been affecting people in different ways. In your case, it messes up the button placements. Unfortunately we'll just have to wait for a patch.

[lynrayy]

Unfortunately we'll just have to wait for a patch. Yeah i know. Just want to know if plugin (addon) still in development

[gameshowrecaps]

Apparently it's the experimental layout. I've gotten the older layout.

[KingGamingYT]

Apparently it's the experimental layout. I've gotten the older layout.

Yes, it is experimental, but from what I can tell more users have it compare to users who don’t

Some layouts are different then others, and it’s these differences that probably makes trying to fix this extension hell

[gameshowrecaps]

I've been put back into the experimental new layout after 4 days. I've been getting it back and forth. Hopefully devs do fix this soon.

[gameshowrecaps]

UPDATE: My alt and personal account have the old layout, while my main has the newer broken layout. It is definitely on certain accounts, however, sometimes I go back and forth. Also minor, but YouTube changed the search layout a bit (it's no longer centered).

[Franck-Nein]

The off centered search bar is caused by YouTube Redux, if you disable "Extra layout changes" it goes back to the center. I think it has always done that, but my earliest screenshot of from August 2019.

[gameshowrecaps]

Welp. It's official. YouTube is officially rolling out this layout, and this is getting out of A/B testing.

[KingGamingYT]

Considering it was in a creators video on their youtube creators channel, it isn't very surprising

[gameshowrecaps]

Unfortunately, I've been trying to find extensions/CSS codes that restore the old layout but it still breaks YouTube Redux. Hopefully someone finds a way to revert the layout.

[1chan-level-journalist]

I played around with CSS and managed to create a custom style that removes most of the circle BS around the buttons, thumbnails and other UI elements. Description area is still FUBAR'd though, unfortunately. Still, should be enough to wait out the storm until Redux updates. This style is designed to work with Redux and was specifically made around Dark theme (you can use it with Light theme, but you'll have to remove the lines marked with comments) In order to install it, create a custom CSS in Stylish/Stylem/what-have-you and copy-paste the contents of the attached file: restore.txt

[KingGamingYT]

I played around with CSS and managed to create a custom style that removes most of the circle BS around the buttons, thumbnails and other UI elements. Description area is still FUBAR'd though, unfortunately. Still, should be enough to wait out the storm until Redux updates. This style is designed to work with Redux and was specifically made around Dark theme (you can use it with Light theme, but you'll have to remove the lines marked with comments) In order to install it, create a custom CSS in Stylish/Stylem/what-have-you and copy-paste the contents of the attached file: restore.txt

y'know, despite the fact everything is just badly cropped squares instead of circles now, I like it much more, now I just need to figure out how to get the buttons to format properly on the page again. Thanks!

[1chan-level-journalist]

y'know, despite the fact everything is just badly cropped squares instead of circles now, I like it much more, now I just need to figure out how to get the buttons to format properly on the page again. Thanks!

Glad you liked it! I had some spare time today so I tuned it up some more. I couldn't figure out how to move the three-dot button over to the left, but even now the description area looks almost kinda alright: I also added numerous fixes for the things I forgot to fix the first time around. restore.txt

[KingGamingYT]

y'know, despite the fact everything is just badly cropped squares instead of circles now, I like it much more, now I just need to figure out how to get the buttons to format properly on the page again. Thanks!

Glad you liked it! I had some spare time today so I tuned it up some more. I couldn't figure out how to move the three-dot button over to the left, but even now the description area looks almost kinda alright: I also added numerous fixes for the things I forgot to fix the first time around. restore.txt

This is a great temporary solution until #77 is approved and merged. Thanks for all your efforts.

[lynrayy]

KingGamingYT

How to use it?

[KingGamingYT]

KingGamingYT

How to use it?

You'll need something like the chrome/firefox extension Stylus(https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en) that lets you write custom webpage css.

Then you just copy whats in the text file into a new Stylus style and it works,

[lynrayy]

I don't know how to import txt file in this CRAPPY extension. It wants .json file

[KingGamingYT]

I don't know how to import txt file in this CRAPPY extension. It wants .json file

"Write new style" Paste the code from the text file Save

Simple as that.

[lynrayy]

Very bad style. My layout now broken

[gameshowrecaps]

Good fix, but the dislike button looks off (probably because Return YouTube Dislike compatibility is broken, the devs are working on it)

[KingGamingYT]

Very bad style. My layout now broken

As explicitly stated in their post, it was designed for dark mode. If you want light mode to work you'll have to modify some stuff, the likes of which I don't know.

[BlackCanboy9]

Thank you. I Figured out how to change the color but how do get the text smaller? Ive been trying for a hour but cant figure it out.

[1chan-level-journalist]

Very bad style. My layout now broken

All you have to do is remove the lines that have /*remove if you want to use Light theme*/ in them. Something I mentioned before.

Thank you. I Figured out how to change the color but how do get the text smaller? Ive been trying for a hour but cant figure it out.

The CSS property that lets you do that is font-size. Where exactly do you want the text to get smaller?

[BlackCanboy9]

under the video where the "Save" and "Share" icons are. Mine are way to big for some reason

[1chan-level-journalist]

under the video where the "Save" and "Share" icons are. Mine are way to big for some reason

Here's how you resize the text:

.redux-moved-info > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content > .yt-core-attributed-string--white-space-no-wrap {
  font-size: 11px;
  text-transform: none;
}

And here's how you resize the icons themselves (I added a little bit of padding so that the resized icons center better):

button > .yt-spec-button-shape-next__icon > yt-icon{
width: 20px !important;
height: 20px !important;
padding-top: 2px;
}

[KingGamingYT]

I’ll also note how it seems like redux’s ability to hide buttons like clip has been borked on some videos, but with how fragile the layout is right now that’s to be expected.

[BlackCanboy9]

It works. Thanks!. Hopefully redux will get updated soon but this is a good alternative until then.

[KingGamingYT]

Another thing: This may be a problem with redux itself, but when you like or dislike a video the icons don't actually change. @1chan-level-journalist

[1chan-level-journalist]

Another thing: This may be a problem with redux itself, but when you like or dislike a video the icons don't actually change. @1chan-level-journalist

I figured out a fix for that as well, but what code you'll have to use depends on whether you want to use old icons for likes/dislikes or not.

If you're fine with new icons:

button[aria-pressed="true"] > .yt-spec-button-shape-next__icon > yt-icon > svg {fill: #3ea6ff !important;}
button[aria-pressed="true"] > div > span {color: #3ea6ff !important;}

If you want to use old icons:

#segmented-like-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="false"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/like.png') !important;
filter: contrast(0);
height: 17px !important;
width: 17px !important;
}
#segmented-like-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/like-pressed.png') !important;
filter: contrast(1);
height: 17px !important;
width: 17px !important;
}
button[aria-pressed="true"] > div > span {color: #3ea6ff !important;}
#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="false"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/dislike.png') !important;
filter: contrast(0);
height: 17px !important;
width: 17px !important;
}
#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/dislike-pressed.png') !important;
filter: contrast(1);
height: 17px !important;
width: 17px !important;
}
#like-button > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
  content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/like-pressed.png') !important;
  filter: contrast(1);
}
#dislike-button > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
  content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/dislike-pressed.png') !important;
  filter: contrast(1);
}

[TorutheRedFox]

wouldn't you be able to just make the stuff under /*remove if you want to use Light theme*/ just not apply by using a more specific css selector?

[1chan-level-journalist]

wouldn't you be able to just make the stuff under /*remove if you want to use Light theme*/ just not apply by using a more specific css selector?

It would be possible, but I couldn't find that selector at the time. I didn't really use Light theme so I did a quick-and-dirty fix like that. I did find right selectors however. Replace the lines with /*remove if you want to use Light theme*/ in them with these:

html[dark] > body > ytd-app > #content > #masthead-container > #masthead{background-color: hsl(0, 0%, 12.82%) !important;}
html[dark] > body > ytd-app > #content > tp-yt-app-drawer > #contentContainer > #guide-wrapper > #guide-content{background-color: hsl(0, 0%, 12.82%) !important;}
html[dark] > body > ytd-app > #content > ytd-mini-guide-renderer.style-scope{background-color: hsl(0, 0%, 12.82%) !important;}
html[dark] > body > ytd-app > #content > ytd-mini-guide-renderer > #items > ytd-mini-guide-entry-renderer {background-color: hsl(0, 0%, 12.82%) !important;}

[KingGamingYT]

Another thing: This may be a problem with redux itself, but when you like or dislike a video the icons don't actually change. @1chan-level-journalist

I figured out a fix for that as well, but what code you'll have to use depends on whether you want to use old icons for likes/dislikes or not.

If you're fine with new icons:

button[aria-pressed="true"] > .yt-spec-button-shape-next__icon > yt-icon > svg {fill: #3ea6ff !important;}
button[aria-pressed="true"] > div > span {color: #3ea6ff !important;}

If you want to use old icons:

#segmented-like-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="false"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/like.png') !important;
filter: contrast(0);
height: 17px !important;
width: 17px !important;
}
#segmented-like-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/like-pressed.png') !important;
filter: contrast(1);
height: 17px !important;
width: 17px !important;
}
button[aria-pressed="true"] > div > span {color: #3ea6ff !important;}
#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="false"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/dislike.png') !important;
filter: contrast(0);
height: 17px !important;
width: 17px !important;
}
#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/dislike-pressed.png') !important;
filter: contrast(1);
height: 17px !important;
width: 17px !important;
}
#like-button > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
  content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/like-pressed.png') !important;
  filter: contrast(1);
}
#dislike-button > yt-button-shape > button[aria-pressed="true"] > div > yt-icon {
  content: url('moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe/images/dislike-pressed.png') !important;
  filter: contrast(1);
}

Had to do a quick'n dirty patch for chrome but it yeah it works great Here's what should be the extension "link" for chrome: Replace 'moz-extension://bfaec30f-6292-460c-8804-ba78bd0f0ffe' with 'chrome-extension://mdgdgieddpndgjlmeblhjgljejejkikf'

[KingGamingYT]

"Federal regulations require me to warn you that this current layout patch...is looking pretty good"

[KingGamingYT]

After doing a bit of messing around I've seemed to bullshit my way into revealing the old subscribe button, which is seemingly not broken at all. I'll update this comment if I find anything else out Performing the same action works with the subscribed button too

[1chan-level-journalist]

Looks like community posts got "rounded" too. The following code reverts them back to how they used to be:

#title-container > h2 > yt-formatted-string {
    font-family: Roboto !important;
font-weight: 500 !important;
font-size: 1.4rem !important;
line-height: 2rem !important;
max-height: 2rem !important;
overflow: hidden !important;
display: block !important;
-webkit-line-clamp: 1 !important;
text-overflow: ellipsis !important;
}
ytd-engagement-panel-section-list-renderer{border-radius: 0px !important;}
ytd-backstage-post-dialog-renderer[is-creation-dialog][rounded-container] {
  border-radius: 0px !important;
}
ytd-backstage-post-thread-renderer[rounded-container] {
  border-radius: 0px !important;
}

[KingGamingYT]

Ok so, for some...very strange reason that I cannot decipher deleting ' use-keyboard-focused="" ' in ' #subscribe-button.style-scope.ytd-video-secondary-info-render ' reveals the old subscribe/subscribed buttons completely unmodified. Why it does this I don't know and how long it'll work for I don't know either but I'm not knowledgeable enough in CSS to apply some patch for it to just not load or autodelete whatever element that is when the page loads.