Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Description layout broken #74

Closed
lynrayy opened this issue Oct 14, 2022 · 36 comments
Closed

Description layout broken #74

lynrayy opened this issue Oct 14, 2022 · 36 comments

Comments

@lynrayy
Copy link

lynrayy commented Oct 14, 2022

image

@KingGamingYT
Copy link

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
Copy link
Author

lynrayy commented Oct 14, 2022

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

@gameshowrecaps
Copy link

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

@KingGamingYT
Copy link

KingGamingYT commented Oct 15, 2022

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@KingGamingYT
Copy link

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

@gameshowrecaps
Copy link

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
Copy link

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
Copy link

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

image
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
Copy link

1chan-level-journalist commented Oct 27, 2022

image 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:
feex
I also added numerous fixes for the things I forgot to fix the first time around.
restore.txt

@KingGamingYT
Copy link

image 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: feex 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
Copy link
Author

lynrayy commented Oct 28, 2022

KingGamingYT

How to use it?

@KingGamingYT
Copy link

KingGamingYT commented Oct 28, 2022

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
Copy link
Author

lynrayy commented Oct 28, 2022

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

@KingGamingYT
Copy link

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

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

Simple as that.

@lynrayy
Copy link
Author

lynrayy commented Oct 28, 2022

Very bad style. My layout now broken
image

@gameshowrecaps
Copy link

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

@KingGamingYT
Copy link

Very bad style. My layout now broken image

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
Copy link

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
Copy link

1chan-level-journalist commented Oct 28, 2022

Very bad style. My layout now broken image

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.
light

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
Copy link

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

@1chan-level-journalist
Copy link

1chan-level-journalist commented Oct 28, 2022

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
Copy link

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
Copy link

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

@KingGamingYT
Copy link

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
Copy link

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
Copy link

TorutheRedFox commented Oct 29, 2022

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
Copy link

1chan-level-journalist commented Oct 29, 2022

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
Copy link

KingGamingYT commented Oct 29, 2022

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
Copy link

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

@KingGamingYT
Copy link

KingGamingYT commented Oct 29, 2022

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
image
Performing the same action works with the subscribed button too
image

@1chan-level-journalist
Copy link

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
Copy link

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.

@lynrayy lynrayy closed this as completed Oct 29, 2022
@lynrayy lynrayy closed this as not planned Won't fix, can't repro, duplicate, stale Oct 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants