Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Youtube CSS Works in FF 56 But Not in FF 57 -- WHY??

  • 11 replies
  • 4 have this problem
  • 10 views
  • Last reply by user1469512

more options

I got css for youtube that works perfectly in ff 56 but not in ff 57. This makes no sense. I disabled yt's native dark theme and enabled old yt version. How can I fix this??

I got css for youtube that works perfectly in ff 56 but not in ff 57. This makes no sense. I disabled yt's native dark theme and enabled old yt version. How can I fix this??

All Replies (11)

more options

How are you applying the CSS -- Stylus, Stylish, userContent.css file?

Do you want to share the CSS so someone can test it? This site is not good for pasting large amounts of code. You could use Pastebin or post it as a "Gist" on Github.

Or you could try these sites for CSS tweaking if it's not a Firefox issue:

more options

jscher2000 said

How are you applying the CSS -- Stylus, Stylish, userContent.css file? Do you want to share the CSS so someone can test it? This site is not good for pasting large amounts of code. You could use Pastebin or post it as a "Gist" on Github. Or you could try these sites for CSS tweaking if it's not a Firefox issue:

Clearly its a firefox issue. To answer your quesiton I add my css to Stylish. Below is my css:

https://pastebin.com/f6MKzUax

more options

This reply is based on the wrong YouTube layout. Please see this later reply.

These rules are doing something in Stylus, but without a dark theme, it's unusable. (Attached screenshot.)

What version of Stylish did you try? For Firefox 56 and lower, you want the legacy extension version, Stylish 2.11. For Firefox 57+, you should try Stylus instead. I have a converter to create an importable file of your Stylish styles:

https://www.jeffersonscher.com/res/stylishextract.html

Modified by jscher2000 - Support Volunteer

more options

jscher2000 said

These rules are doing something in Stylus, but without a dark theme, it's unusable. (Attached screenshot.) What version of Stylish did you try? For Firefox 56 and lower, you want the legacy extension version, Stylish 2.11. For Firefox 57+, you should try Stylus instead. I have a converter to create an importable file of your Stylish styles: https://www.jeffersonscher.com/res/stylishextract.html


I'm confused by your answer. What do you mean that "without a dark theme its unusable"? The css provides a dark theme.

I have the latest version of Stylish which is 3.0.1.

Lets not discuss ff 56. The css has no problem with 56. Lets focus on 57+ which is the browser that this css should work in if it works prefetcly in 56.

I dont understand your linnk. It says, "Drop stylish.sqlite file here." Is this for css?? How do I make this work and whats it for?

more options

This reply is based on the wrong YouTube layout. Please see this later reply.

koolx said

I'm confused by your answer. What do you mean that "without a dark theme its unusable"? The css provides a dark theme.

As you can see from my previous screenshot, it's not dark. Your CSS starts with:

 div#body-container, .options-renderer-confirmation {
   background: rgb(30,30,30) !important;
 }

There is no div#body-container in the page that YT is serving me, so that certainly could be part of the problem.

Lets not discuss ff 56. The css has no problem with 56. Lets focus on 57+ which is the browser that this css should work in if it works prefetcly in 56.

I don't have 56. However, when I paste into Stylish 2.11 on Firefox 52 ESR, I also do not get a dark background. It seems to be equally broken in both versions, at least for the layout YT serves to me.

Modified by jscher2000 - Support Volunteer

more options

koolx said

jscher2000 said
I have a converter to create an importable file of your Stylish styles: https://www.jeffersonscher.com/res/stylishextract.html

I dont understand your linnk. It says, "Drop stylish.sqlite file here." Is this for css?? How do I make this work and whats it for?

This would be if you want to convert your Stylish 2.x database of rules to a format you can import into Stylish 3.x or Stylus. Since you did an in-place update already, you probably do not need this.

more options

jscher2000 said

koolx said
jscher2000 said
I have a converter to create an importable file of your Stylish styles: https://www.jeffersonscher.com/res/stylishextract.html

I dont understand your linnk. It says, "Drop stylish.sqlite file here." Is this for css?? How do I make this work and whats it for?

This would be if you want to convert your Stylish 2.x database of rules to a format you can import into Stylish 3.x or Stylus. Since you did an in-place update already, you probably do not need this.

I drop my css in the link but I get a window saying: "Youtube.css received but expected stylish.sqlite."

How do I add this file??

.

more options

Hmm, after re-reading your original post --

koolx said

I disabled yt's native dark theme and enabled old yt version.

-- I tested again after finding that option (screenshot #1).

I opened the Style Editor on the page and created a new empty style sheet (screenshot #2). To do that, either

  • Shift+F7
  • "3-bar" menu button > Web Developer > Style Editor
  • (menu bar) Tools > Web Developer > Style Editor

Then on the left side, click the + button.

I pasted your CSS into the new empty style sheet and after a moment, Firefox applied that and I got your dark theme (screenshot #3).

I can't tell if that looks the way you want or whether that is just the starting point for figuring out what is missing.

more options

jscher2000 said

Hmm, after re-reading your original post -- koolx said
I disabled yt's native dark theme and enabled old yt version.

-- I tested again after finding that option (screenshot #1).

I opened the Style Editor on the page and created a new empty style sheet (screenshot #2). To do that, either

  • Shift+F7
  • "3-bar" menu button > Web Developer > Style Editor
  • (menu bar) Tools > Web Developer > Style Editor

Then on the left side, click the + button.

I pasted your CSS into the new empty style sheet and after a moment, Firefox applied that and I got your dark theme (screenshot #3).

I can't tell if that looks the way you want or whether that is just the starting point for figuring out what is missing.

I actually installed Stylus. After adding my css it works perfectly! I'll be uninstalling Stylish which is menure garbage.

The only thing now is that its got a scroll in the lower right part of the video suggestions just velow the video. See attachment. Is there a way to remove that scroll but conintue to maintain scrolling ability? Mind you, I did add a code to allow scrolling in that area. But its not visible in ff 56. Its visible in ff 57. Let me know.

more options

koolx said

Is there a way to remove that scroll but conintue to maintain scrolling ability? Mind you, I did add a code to allow scrolling in that area. But its not visible in ff 56. Its visible in ff 57.

I think I've seen people refer to rules that pushes the scroll bar beyond view, involving negative margins or other tricks. But I don't remember. You could try the forums I mentioned before.

more options

jscher2000 said

koolx said
Is there a way to remove that scroll but conintue to maintain scrolling ability? Mind you, I did add a code to allow scrolling in that area. But its not visible in ff 56. Its visible in ff 57.

I think I've seen people refer to rules that pushes the scroll bar beyond view, involving negative margins or other tricks. But I don't remember. You could try the forums I mentioned before.

Thanks man I'll do that.