Self-Made User Styles

[Tamschi]

I recently started making user styles, and it has been pretty fun so far.
There are enough now that it might warrant a thread, also because I plan to continue this and would like to see yours if you made any.

Sorry in advance for the lacklustre OP. I'm bad at this.

-----------------------------------------

- What is a user style?
It's a CSS file that's injected client-side into pages you visit.

- Which sites do they affect?
User styles and can be global (applied to all sites) and/or local (applied only to certain domains or even just to certain URLs).
It's a good idea to make your style's scope as local as possible to increase performance. Use the @-moz-document rule documented [URL="https://github.com/stylish-userstyles/stylish/wiki/Valid-@-moz-document-rules"]here[/URL] and [URL="https://developer.mozilla.org/en-US/docs/Web/CSS/@document"]here[/URL].

- How do you use/make/publish them?
The easiest option is likely [URL="https://userstyles.org/"]Stylish[/URL]. It's available for [URL="https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe"]Chrome[/URL], [URL="https://chajian.baidu.com/2015/#search/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe"]Baidu[/URL], [URL="https://addons.mozilla.org/firefox/addon/stylish/"]Firefox[/URL] and [URL="https://addons.opera.com/extensions/details/stylish/"]Opera[/URL]. If you use a newer Firefox version where Stylish doesn't work, use [URL="https://addons.mozilla.org/firefox/addon/styl-us/"]Stylus[/URL] instead.
To learn more about CSS, see [URL="https://developer.mozilla.org/docs/Web/CSS"]Mozilla's CSS resources[/URL]. (If a page isn't manually translated, it's often better to read the English version.)

- Are there any dangers to using them?
User styles currently can't extensively manipulate the DOM or call JS functions, so the risk is limited (aside from the possibility of exploitable bugs in a browser's CSS engine, but that you have just browsing the web).
They can still manipulate web pages to be misleading though, so you should at least superficially read through the contents of each user style you install. You can do this with via the [I]Show CSS Code[/I] button on Stylish.

- What are the limits of user styles?
Since making them isn't, strictly speaking, programming, you generally can't use user styles to add completely new interactions to a website. At most, you can reveal some content that was previously hidden.
It may also be difficult to style a page that uses [I]!important[/I] a lot, but usually you should be able to work around this with a combination of [I]!important[/I] and higher rule specificity.

- Are there any advanced techniques?
Aside from what you can do with CSS alone, Stylish (the website) lets you host configurable styles. See Tudd Shrinker below for an example.

-----------------------------------------

My published styles so far:

[URL="https://userstyles.org/styles/142089/tudd-shrinker"]Tudd Shrinker[/URL]: [URL="https://www.facepunch.com/members/344802-Tudd"]Tudd[/URL]'s avatar is obnoxiously large. This reduces its size to the normal gold standard. It will stop working if he changes it, so you won't miss out on the next time there's an Apil Fool's joke.
[URL="https://userstyles.org/styles/142088/sentimentaltube"]SentimentalTube[/URL]: The sentiment bar (the ratings bar) is shorter than its container, which looks weird to me. This tiny style stretches it to 100% width to make more sense again.

[Lenny.]

Might be cool to combine this with userscripts

[Tamschi]

[QUOTE=LennyPenny;52471404]Might be cool to combine this with userscripts[/QUOTE]

They're two entirely different beasts, in my opinion.
The user style community seems fairly alive, and using them is comparatively safe and easy.

User scripts are generally less safe, more fragile and most of the ones available online seem to be badly maintained (if at all).
The primary hosting service for them has also been dead for a few years, but I'd like to know if there's an alternative that's actually good.

We probably wouldn't have any of these problems with purely self-made scripts, but it's still a bit of a mess that I don't necessarily want to encourage.

[Alice]

[QUOTE=Tamschi;52471398][URL="https://userstyles.org/styles/142089/tudd-shrinker"]Tudd Shrinker[/URL]: [URL="https://www.facepunch.com/members/344802-Tudd"]Tudd[/URL]'s avatar is obnoxiously large. This reduces its size to the normal gold standard. It will stop working if he changes it, so you won't miss out on the next time there's an Apil Fool's joke.[/QUOTE]
You can alternatively use this code:

.user_344802 .avatar_image {
	max-height: 160px !important;
}

It's a bit simpler than yours.

[VeXan]

I really like the idea of this, we should keep this thread rolling. Time to learn CSS :v:

[Tamschi]

I made a new one to fix a small annoyance:

[quote][URL="https://userstyles.org/styles/146281/youtube-no-pause-overlay"][B]YouTube: No Pause Overlay[/B][/URL]

[img]https://userstyles.org/style_screenshots/146281_after.png[/img]

Removes the pause overlay in the embedded player via display: none.
Created with YouTube's new style (2017) enabled.[/quote]

[Tamschi]

[QUOTE=Alice3173;52495033]You can alternatively use this code:

.user_344802 .avatar_image {
	max-height: 160px !important;
}

It's a bit simpler than yours.[/QUOTE]

I thought about it, but unfortunately that breaks this feature: [quote=Tamschi][...] It will stop working if he changes it, so you won't miss out on the next time there's an Apil Fool's joke.[/quote]

In general, I try to target the styles as precisely as possible, since I prefer fixing them later over side effects that may appear when the website changes.
In this case, I really only wanted to get rid of the page stretching caused by this specific avatar.

[editline]7th August 2017[/editline]

[QUOTE=VeXan;52543903]I really like the idea of this, we should keep this thread rolling. Time to learn CSS :v:[/QUOTE]

I recommend [URL="https://developer.mozilla.org/docs/Web/CSS"]Mozilla's CSS resources[/URL].
[editline]edit[/editline] Updated the OP.

[Alice]

[QUOTE=Tamschi;52548543]I thought about it, but unfortunately that breaks this feature:

In general, I try to target the styles as precisely as possible, since I prefer fixing them later over side effects that may appear when the website changes.
In this case, I really only wanted to get rid of the page stretching caused by this specific avatar.[/QUOTE]
Ah, I get you. Wouldn't it be a bit of a moot point in this instance though? Since golds are limited to 160px vertically it just means that it only affects avatars he gets that are bigger than that which also future-proofs it on the off chance he gets to change it to another huge one.

[Tamschi]

[QUOTE=Alice3173;52549161]Ah, I get you. Wouldn't it be a bit of a moot point in this instance though? Since golds are limited to 160px vertically it just means that it only affects avatars he gets that are bigger than that which also future-proofs it on the off chance he gets to change it to another huge one.[/QUOTE]

I'll fix it after enjoying it for a day or two in that instance :v:

[Tamschi]

I updated this a few days ago, so I'm moving it to its own post:

[quote][URL="https://userstyles.org/styles/142083/squaretube"][B]SquareTube[/B][/URL]

[img]https://userstyles.org/style_screenshots/142083_after.png[/img]

Turns avatars in YouTube's new theme (2017) back into squares.

Changelog:
2017-05-02: Squared the circles on 'shelves' (front page categories) and in channel page headers and channel search results.
2017-05-12: Squared author thumbnail of active comment boxes. Consolidated CSS rules into a single one with multiple selectors.
2017-08-07: The mini channel renderer (for example in the channel sidebar on channel pages) now shows square icons.
2017-08-30: Maintenance update to re-square comment avatars.
2017-08-30: Fixed channel grid on e.g. [url]https://www.youtube.com/user/YouTube/channels[/url].
2017-08-30: Fixed active account header renderer (in settings drop-down).
2017-08-30: Fixed notification avatars.[/quote]

I don't mind [I]border-radius[/I], but I'm definitely not a friend of [I]border-radius: 50%;[/I] if nothing is done to make use of the circle shape (especially on user generated images, since that's just less space for creativity).

[Tamschi]

Here's a small one:

[quote][URL="https://userstyles.org/styles/146597/twitter-obvious-advertisements"][B]Twitter: Obvious Advertisements[/B][/URL]

[img]https://userstyles.org/style_screenshots/146597_additional_27549.png?r=1502840108[/img] [img]https://userstyles.org/style_screenshots/146597_additional_27550.png?r=1502840108[/img]
[img]https://userstyles.org/style_screenshots/146597_additional_27551.png?r=1502714767[/img] [img]https://userstyles.org/style_screenshots/146597_additional_28250.png?r=1507909473[/img]

I don't mind seeing Twitter ads, but they tend to look very similar to normal content.
This style fixes that by giving them a different (configurable) background colour.

Changelog:
2017-08-14: The style now also affects promoted accounts (without hover effect to match Twitter's default behaviour).
2017-08-14: Fixed bug causing descendants of promoted tweets to be coloured in too.
2017-10-13: The style now also affects promoted trends.[/quote]

[editline]edit[/editline] Finally got a Twitter Business ad, so I replaced the anonymised screenshots.

[Alice]

[QUOTE=Tamschi;52571524]Here's a small one:[/QUOTE]
This is one I'll use myself. I don't really care about the ads so much either but they tend to be really jarring since they blend in so well. They're usually nowhere near relevant to the feed of whatever user I'm reading.

[Tamschi]

[URL="https://twitter.com/FakeUnicode"]Ｆａｋｅ Unicode ⁰⁰⁰⁰𓄵⁧𓄵[/URL] [sic] inspired me to look into Twitter's page code a little more with [URL="https://twitter.com/FakeUnicode/status/898962928061239296"]this tweet[/URL], so here's some hidden functionality made visible:

[quote][URL="https://userstyles.org/styles/146870/twitter-they-follow"][B]Twitter: They Follow[/B][/URL]

[img]https://userstyles.org/style_screenshots/146870_after.png[/img]

Turns the background of tweets by people who follow you blue. That's it.

Changelog:
2017-08-19: Added !important to the default background to deal with focused permalinked tweets.
2017-08-19: Fixed hovering.[/quote]

[proboardslol]

[img]http://i.imgur.com/vkP9pcV.png[/img]

span[style*="color:#00aa00"]:before {
    content: '((';
}

span[style*="color:#00aa00"]:after {
    content: '))';
}

[Tamschi]

[URL="https://facepunch.com/showthread.php?t=1576926&p=52629072&viewfull=1#post52629072"]Crosspost[/URL]: [quote][URL="https://userstyles.org/styles/147332/youtube-theatre-controls-margin"][B]YouTube: Theatre Controls Margin[/B][/URL]

[img]https://userstyles.org/style_screenshots/147332_after.png[/img]

Adds configurable left and right margins to the theatre mode player controls so they don't sit at the very edge of your screen.[/quote]

[Tamschi]

I just updated [post=52591283]Twitter: Obvious Advertisements[/post]. The style now also highlights promoted trends.
What may be missing are promoted livestreams, which I haven't encountered so far. If you see one, I'd be glad if you could send me the HTML of the trending list.

[♠️♥️♦️♣️]

Not a user style, but a hastily written Tampermonkey script I wrote a while back that makes .webm work like .gif on FP. You can click to restart them, and mousing over them turns on the volume. Otherwise they play and loop automatically without sound.

var videos = document.getElementsByTagName("video");

for (var i = 0; i < videos.length; i++) {
    videos[i].controls = false;
    videos[i].muted = true;
    videos[i].autoplay = true;
    videos[i].loop = true;
    videos[i].style.border = "0";
    videos[i].style.boxShadow = "0px 0px 0px 0px";
    videos[i].addEventListener("mouseover", function() {
       this.muted = false;
       this.volume = 1;
       this.controls = true;
       var _this = this;
    });
    videos[i].addEventListener("mouseout", function() {
        this.muted = true;
        this.controls = false;
    });
    videos[i].addEventListener("click", function() {
        this.currentTime = 0;
    });
}

[Tamschi]

I just updated the description on this with a small known issue, so I'll take the opportunity to post it properly here: [quote][URL="https://userstyles.org/styles/144018/soft-twitter"][B]Soft Twitter[/B][/URL]

[img]https://userstyles.org/style_screenshots/144018_after.png[/img]

Reverts the strongly rounded and/or circle elements on Twitter into their previous pillow shapes.
This style aims to be accurate to the original, but there is some guesswork involved where the original border radius wasn't directly available.

Changelog:
2017-07-10: Twitter finally updated embedded tweets to use very round elements, so I updated this style to revert that.
2017-06-17: Mostly de-rounded tweetless gallery media.
2017-06-16: Reverted avatars on profile cards into their original pillow shapes.
2017-06-15: First release. I think I caught most of the new round shapes, but if you see anything else please comment here or tweet @Tamschi_.

Known issues:
The style currently doesn't affect embedded tweets when used with Stylus in Firefox. See [URL="https://github.com/openstyles/stylus/issues/215"]Stylus issue 215[/URL] for more information.
This is (probably) a Firefox bug, so it will start working again once the issue is resolved there.[/quote]

This is my most complex user style so far. It's a mixed local/global style that mostly applies only to Twitter, but has some global rules that are (at least supposed to be) applied to embedded tweets.

[♠️♥️♦️♣️]

Been working on a material-based Facepunch redesign because this thread inspired me:

[img_thumb]https://i.imgur.com/yk6NOBj.png[/img_thumb]
[img_thumb]https://i.imgur.com/EZpJm14.png[/img_thumb]
[img_thumb]https://i.imgur.com/IEpNctU.png[/img_thumb]

[Tamschi]

If you use Netflix, you probably know how it shrinks the video to a tiny thumbnail during the credits to already show you the preview card (if you have autoplay disabled, at least). This stops that.