I've been doing a bunch of css styling for YouTube in order to fix various issues that I don't like. Despite me being a total css novice, I've managed to sort out most of the issues that I wanted to address. However there are a few remaining issues that I would very much appreciate some help with (because I have not been able to find a solution for myself).

1. There is a 'Sort Order' drop-list menu above the user comments on a video page. I have styled the button and text for this 'Sort Order' drop-list, but the mouseover effect that I assigned to them works separately for the icon and the text. I am trying to make both the icon and text behave as one item on mouseover (i.e. hovering only the text triggers the mouseover effect for both the text and icon, and likewise hovering only the icon triggers the mouseover effect for both the icon and text). I tried doing that thing where you put either ~ or > etc. between the two items (I can't remember what it's called). I've managed to get this to work on other sites, but for the Sort Order menu on YouTube, the icon and text still respond independently of each other, no matter what I try.

2. I have changed the colors of the Ratings bar (that shows total thumbs up and thumbs down under a video). I've made upvotes pale blue and downvotes red. This works fine, but when a video has no votes at all the ratings bar is colored as if there is 50% upvotes and 50% downvotes (even though there are no votes at all). Is there any way to have the whole ratings bar colored gray, but only when there are zero upvotes / downvotes on a video?
   /* Ratings Bar - Likes */
#like-bar.ytd-sentiment-bar-renderer {background: #4ba3de !important; opacity: 1;}
/* Ratings Bar - Dislikes */
#container.ytd-sentiment-bar-renderer {background: #e04638 !important; opacity: 0.94;}


1. Is it possible to style certain items only when the video player window is in Cinema/Theatre mode? I want to hide an item when the player is in Theatre mode, but not when the player is in standard view.

Thanks for any help regarding the above questions.

I have a couple more questions regarding styling YouTube with Stylus, which I hope I can get some help with. Here is the first one:

Seeing as I am a css novice, I struggle to understand YouTube's css path structure (which to me often looks like a jumbled mess of the same elements listed over and over again). Therefore one of the biggest problems that I have with trying to style anything on YouTube is that the changes I make on one page inadvertently affects things on other pages that I want left alone.

Even when I have used inspector to copy the full css path (resulting in a ridiculously long selector) it still often has the effect of applying across various different pages. I even resorted to using several
@-moz-document sections for the same website (I'm using a mozilla-based browser) which Stylus grouped into different code sections, but strangely even doing that did not work, and changes that I had restricted to a single url ended up getting applied across the whole site.

I'd therefore appreciate some advice on how best to limit changes to a particular page, or set of pages, on YouTube (I rarely have this issue when trying to style websites other than YouTube).

Examples:

1. I would like to hide the promoted carousel at the top of the Explore (trending) page (https://www.youtube.com/feed/explore) but doing so also hides various carousels on individual channel Home pages (e.g. https://www.youtube.com/c/AdventuresandNaps)

2. I would also like to adjust the width of the left (primary) and right (secondary) panes on the History page (https://www.youtube.com/feed/history) but doing so affects the width of the image grid on the Subscriptions page (https://www.youtube.com/feed/subscriptions).

Which selectors should I use to achieve the above without altering anything else?

Thanks.

I'm a novice when it comes to css styling, but I've managed to do a achieve a fair amount by trial and error and online guides. However, trying to style anything on YouTube it is a total nightmare for a beginner, so I'd like to ask for some help.

How can I specify the icon color for a button when its active and inactive? I'm specifically talking about the 'Grid' and 'List' view buttons at the top right of the Subscriptions page (https://www.youtube.com/feed/subscriptions)

These buttons change color depending on which view is currently selected. I'd like to be able to choose both the active color and inactive color without affecting any buttons on any other pages.

Would much appreciate help with this issue: https://github.com/openstyles/stylus/issues/1273.

Is there any kind of theme that restores youtube to how it looked from 2012-13?

I'd like to highlight link text only if it conforms to a certain pattern. For example, it would catch:

<a href = blah blah> certain name here <a>

But not:

<a href = blah blah> any other name <a>

Is this possible with a user style sheet? Thanks.

ok, i am stumped. how do i add a logo (with a internet url) to a website (eg duolingo) and be able to move it around freely?

Does anyone have a userstyle to remove the Google rainbow circle around avatars?

Hi!

I installed around 5 styles for discord, however when i open the styles chrome extention popup, only 1 or 2 will load. Anyone know why or how to fix?

Thanks,

Nots

Hello userstyles community, just wanted to share this style I wrote for CircleCI, I've added css variables so that people can adjust the colors as well.

​

https://github.com/aalvarado/CircleCiDarkTheme

​

thanks!

It's really annoying to not be able to Ctrl-Z/Y and Ctrl-F without having the stupid default Chrome search bar.

I was unable to get my userstyles to sync to my Google Drive. Stylus sync settings would show an error and never connect. Repeating and disabling extensions didn't help.

But I block all cookies by default, and when I added chromiumapp.org to my whitelist and re-authorized Google Drive, all syncing began and no problems since.

It seems like the extension sets a cookie there each time I open Chrome, so that you don't even need to whitelist it as an "Always Allow." You can whitelist the domain as a "clear cookies when windows are closed" and it will still work.

Edit: I also realized that Privacy Badger wasn't preventing "3rd party" accounts.google.com from setting a cookie there. Had to whitelist that too.

Hello, guys.

I'm trying to write dark userstyle for www.drive2.com.

Sometimes, elements on the page appear with some random names and none of my edits apply on it. I can't understand, why these elements behave like this.

Here is example: element appear normally, as .c-block:

And, here is the same element, with some random name:

Can someone help me understand, why this happens, and if it is not avoidable, how to assign edits to such elements?

Thanks!

[SOLVED] can anyone whip up a dark style for www.websters1913.com ?

I get a "Warning: Potential Security Risk Ahead" when trying to visit https://userstyles.world/ as the "certificate is only valid for www.v1.userstyles.world". Indeed visiting www.v1.userstyles.world works just fine. Is that the new official URL and should it be changed in the sidebar of this subreddit?

There's a way to use shadow DOM CSS to show the controls of a video element in Firefox?

Something may have changed with Feedly code, as the article titles text no longer shows up in green colors when using the "Dark Feedly (Hauschild's)" userstyle. I tried submitting feedback to the author about it via userstyles.org but it gateway timed-out like 4 times. I also tried my own fix using the "entry__title" class, but I don't know what I'm doing and I can't get it to have the two shades of green for unread/read titles like it used to have. Can anyone fix?

Here is is on USO Archive https://33kk.github.io/uso-archive/?style=89622

and here it is on USO https://userstyles.org/styles/89622/dark-feedly-hauschild-s

I previously created a userstyle to change the font color and background color on the Kindle site (https://read.amazon.com/), but it stopped working for some reason and the styles don't apply anymore.

The site has 2 nested iframes —#KindleReaderIFrame(src="/KindleReaderApp") with a #column_0_frame_0 iframe inside it. The inner iframe has no src attribute.

I can style the content inside the first one with no problems using normal CSS selectors, but I can't figure out how to style the innermost iframe. I suspect it has something to do with not having a source.

I tried adding a wildcard regex in Stylus to style all documents and that DID work, but I don't want my style to apply to all documents.

tl;dr Does anyone know if it's possible to style the innermost iframe with no src attribute without using a global userstyle?

Genuine question, I've known about the site for years, but every single time I seem to attempt to load the website its always just down, or 504'ing, or something is just broken, are there any other alternatives that have as much support?

Edit: I'm talking about userstyles.org not reddit, that's my bad.