Description layout broken #74

lynrayy · 2022-10-14T01:21:57Z

KingGamingYT · 2022-10-14T10:55:47Z

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 · 2022-10-14T14:51:26Z

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

gameshowrecaps · 2022-10-15T17:13:20Z

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

KingGamingYT · 2022-10-15T17:17:47Z

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 · 2022-10-17T20:54:32Z

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 · 2022-10-18T20:00:46Z

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 · 2022-10-18T20:15:44Z

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 · 2022-10-24T20:28:54Z

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

KingGamingYT · 2022-10-25T04:05:12Z

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

gameshowrecaps · 2022-10-25T22:51:53Z

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 · 2022-10-27T00:46:14Z

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 · 2022-10-27T02:47:23Z

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 · 2022-10-27T22:03:49Z

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 · 2022-10-28T00:18:43Z

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 · 2022-10-28T00:19:38Z

KingGamingYT

How to use it?

KingGamingYT · 2022-10-28T00:22:05Z

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 · 2022-10-28T00:23:04Z

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

KingGamingYT · 2022-10-28T00:27:56Z

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 · 2022-10-28T00:30:23Z

Very bad style. My layout now broken

gameshowrecaps · 2022-10-28T00:30:59Z

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

KingGamingYT · 2022-10-28T00:37:33Z

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 · 2022-10-28T07:20:09Z

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 · 2022-10-28T10:02:33Z

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 · 2022-10-28T10:21:06Z

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

1chan-level-journalist · 2022-10-28T10:29:12Z

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 · 2022-10-28T10:43:45Z

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 · 2022-10-28T11:25:03Z

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

KingGamingYT · 2022-10-29T03:36:17Z

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 · 2022-10-29T10:54:23Z

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 · 2022-10-29T12:20:27Z

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 · 2022-10-29T13:32:57Z

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 · 2022-10-29T17:18:05Z

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 · 2022-10-29T17:24:56Z

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

KingGamingYT · 2022-10-29T17:57:34Z

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 · 2022-10-29T18:05:53Z

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 · 2022-10-29T18:09:14Z

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.

KingGamingYT mentioned this issue Oct 28, 2022

Fix like buttons being mismatched on newer layouts, also make replies better #77

Closed

lynrayy closed this as completed Oct 29, 2022

lynrayy closed this as not planned Won't fix, can't repro, duplicate, stale Oct 29, 2022

Description layout broken #74

Description layout broken #74

Comments

lynrayy commented Oct 14, 2022

KingGamingYT commented Oct 14, 2022

lynrayy commented Oct 14, 2022

gameshowrecaps commented Oct 15, 2022

KingGamingYT commented Oct 15, 2022 • edited Loading

gameshowrecaps commented Oct 17, 2022

gameshowrecaps commented Oct 18, 2022

Franck-Nein commented Oct 18, 2022

gameshowrecaps commented Oct 24, 2022

KingGamingYT commented Oct 25, 2022

gameshowrecaps commented Oct 25, 2022

1chan-level-journalist commented Oct 27, 2022

KingGamingYT commented Oct 27, 2022

1chan-level-journalist commented Oct 27, 2022 • edited Loading

KingGamingYT commented Oct 28, 2022

lynrayy commented Oct 28, 2022

KingGamingYT commented Oct 28, 2022 • edited Loading

lynrayy commented Oct 28, 2022

KingGamingYT commented Oct 28, 2022

lynrayy commented Oct 28, 2022

gameshowrecaps commented Oct 28, 2022

KingGamingYT commented Oct 28, 2022

BlackCanboy9 commented Oct 28, 2022

1chan-level-journalist commented Oct 28, 2022 • edited Loading

BlackCanboy9 commented Oct 28, 2022

1chan-level-journalist commented Oct 28, 2022 • edited Loading

KingGamingYT commented Oct 28, 2022

BlackCanboy9 commented Oct 28, 2022

KingGamingYT commented Oct 29, 2022

1chan-level-journalist commented Oct 29, 2022

TorutheRedFox commented Oct 29, 2022 • edited Loading

1chan-level-journalist commented Oct 29, 2022 • edited Loading

KingGamingYT commented Oct 29, 2022 • edited Loading

KingGamingYT commented Oct 29, 2022

KingGamingYT commented Oct 29, 2022 • edited Loading

1chan-level-journalist commented Oct 29, 2022

KingGamingYT commented Oct 29, 2022

KingGamingYT commented Oct 15, 2022 •

edited

Loading

1chan-level-journalist commented Oct 27, 2022 •

edited

Loading

KingGamingYT commented Oct 28, 2022 •

edited

Loading

1chan-level-journalist commented Oct 28, 2022 •

edited

Loading

1chan-level-journalist commented Oct 28, 2022 •

edited

Loading

TorutheRedFox commented Oct 29, 2022 •

edited

Loading

1chan-level-journalist commented Oct 29, 2022 •

edited

Loading

KingGamingYT commented Oct 29, 2022 •

edited

Loading

KingGamingYT commented Oct 29, 2022 •

edited

Loading