#userstyles

SteveRudolfiSteveRudolfi
2025-05-15

Today's edition of make-the-web-work-for-me includes some to give me visual indicators overlayed on my youtube thumbnails.

Started at 100% being a YT-red color checkmark-- then added > 90% being an orange color. The overlay hides on thumb hover.

Also some JS to dynamically replace the thumbs and text with lorem-- for screenshotting purposes.

A screenshot of the Subscriptions page of YouTube-- except the image thumbnails and most text on the page being replaced with placeholder images and lorem ipsum respectively. 

On top of some of the video thumbnails are checkmarks that correspond to the video's completion percentage-- colored red for 100% and orange for >90% completion.
Márton Salomvárymrc@mastodon.berlin
2025-04-29

Is there a user CSS styles extension like Stylus that does not request access to all websites but allows opting in on case-by-case basis? #Stylus #UserStyles #web #CSS #WebExtensions

Screenshot of Firefox "Add Stylus extension" confirmation dialog, with "Access your data for all websites" as the first mandatory item.
PuercoPopPuercoPop
2025-04-24

Fix my biggest annoyance with the chat.sr.ht interface today with the following user style

```css
-header .description:not(:hover) {
white-space: nowrap;
}
```

Boris Schapira (Pro)boostmarks@hachyderm.io
2024-12-03

"consider users over authors over implementors" is key design principle of the web.

Yet, I struggle to find a Google-approved way to use user Stylesheets on Chrome. Stylus looks deprecated because of Manifest v3, and the performance are very bad (related?). I'm surprised no options has been integrated in the browser so far… or maybe I just did not find them?

#a11y #userStyles

2024-11-20

userstyle tweak for glitch-soc (at least v4.4.0-alpha.1) to change the "New post"/"Post" buttons to "Toot" buttons (badly)

(userstyle applies to toot.cat and tech.lgbt, other instances might work too if on glitch-soc, i haven't tried, ymmv)

:blobcatheart:

userstyles.world/style/19395/g

#userstyles

a "Post" and "New Post" button in glitch-soc web client with an arrow underneath each pointing to "Toot" buttons, showing how the buttons look after applying the linked userstyle
2024-11-08

here is a userstyle tweak for glitch-soc for removing the large quote icon from blockquotes, adding a border on the left of them, changing their color, and changing codeblocks and inline code to be white on transparent black.

(toot.cat is currently on glitch-soc 4.4.0-alpha.1, this should work on other instances, ymmv, etc)

:blobcatheart:

userstyles.world/style/19162/t

#userstyles

two views of the same example toot on the web client in glitch-soc, side by side. the toot has a two-line blockquote and in-line code formatting as well as a codeblock.
the left style has a large quote icon before the codeblock, the right style has a simple column instead. the quoteblock text color and the inline code and codeblock colors have all changed from purples to be a default color from the original theme and white on transparent black, respectively

✨ 500 stars and counting ✨
@catppuccin's #userstyles maintainers — surely not the heroes we deserve, but certainly the heroes we got. :basedppuccin:

github.com/catppuccin/userstyl
#FOSS #stylus #catppuccin

2024-10-09

ok, this is a bit out there but does anyone know how to edit a user CSS file in the Vanadium browser? The Stylus addon is the easiest way in desktop browsers, but I don't think Vanadium allows any extensions.

#vanadium #graphene #GrapheneOS #android #userstyles

2024-10-08
a form for posting toots showing the same text that was posted in this toot, but the button's text has been changed to 🐘💨
Ciourte Piailleciourte@piaille.fr
2024-06-20

#FireMonkey est une #extension qui permet d'écrire ou de trouver des #userscripts (en #JavaScript) et #userstyles (en #CSS) pour modifier le comportement et l'apparence de sites web dans #Firefox sans avoir besoin de nombreuses extensions pour ça.
Contrairement à la plupart des extensions existantes comme #GreaseMonkey, #Tampermonkey ou #ViolentMonkey, celle-ci utilise l'API #WebExtension Userscripts ajoutée à Firefox en 2019. En conséquence, elle est plus légère et plus sécurisée, puisque les scripts sont isolés dans leurs bacs à sable, mais n'est disponible que pour Firefox, cette API n'étant pas implémentée par Chrome ou autres.

addons.mozilla.org/fr/firefox/

2024-05-25

The #userstyles ecosystem is not easy to understand. There are a few sites where to host your userstyles, a few browser addons (mostly #stylus), and some rules allowing to list some styles from some sites in some addons 😅

But I could not find a place where all these relationships are explicitely described.

Egor Kloosdutchcelt
2024-03-06

I'm experimenting with a user stylesheet with a slightly larger offset for link underlines. The default offset is hard to read.
So far, so good.

Starshine 🏳️‍⚧️ 🌜dfstarshine@icosahedron.website
2024-02-26

"Soph, why do you insist on using custom CSS to make every website look worse?"

I don't know what you mean.

#css #web #customcss #userstyles #userstyle

My custom CSS of (old) Reddit. It's using serif fonts and web safe colours.My custom CSS for invidious. It uses serif font and resembles default HTML.Screenshot of Mastodon with a (WIP) bright, vintage, high contrast theme with a serif font (Times New Roman).
2023-12-26

fresh and final post about this:

star icon to paw print icon replacer for Stylus etc if you want it!

add your preferred instance(s), it might work! :blobcat3c:

#webClient #icons #stylus #userStyles #css

the post buttons from a fediverse web client (mastodon/glitch), with the star icon replaced with a paw print.
the active state of the icon is also shown, as well as the Favorites link using the icon
2023-12-25

Dropdown Menu Icons 1.0.0

This userstyle adds icons to the dropdown menus in the header — i.e., the add, channel select, and avatar menus in the top right.... #kbin #kbinmeta #kbindesign #userstyles #kbinStyles

userstyles.world/style/13871/d

2023-12-24

been meaning to do this for a while, finally got around to it now. may not be the best way to go about it but meh, i'm using it and now i'm sharing it! :blobcat:

only tested here, a glitch-soc instance, and quickly on a standard mastodon instance, apologies!

(if you want to try it on whatever instance, edit or add the instance's url to the userstyle in Stylus etc, there is a decent chance it may work!)

now with optional heart instead, if one's heart desires:
delete or comment the first bit, uncomment the second! :blobcatheart:​

available on userstyles.world, if you use Stylus!

and here's the snippet as a gist!

#TootCat #css #stylus #userstyles

the post action buttons on toot.cat, the star replaced with a paw print, and the Favorites link from the side panel with the same replacement.
Šime Vidassimevidas
2023-11-04

On YouTube’s desktop website, the “chips” bar is sticky, so it reduces the usable scrollport height. You don’t need those chips. Hide the bar with a user style.

-wrapper {
display: none !important;
}

Screenshot of YouTube’s website in desktop browser. At the top, there is a horizontal bar with buttons with the labels All, Music, Live, Gaming, etc.
2023-10-28

Material You (approximation)
Generates a Color Scheme resembling Material You from a single Hue input entirely within css

I made this but then i wasnt sure which userstyle of mine could use it, so i decided to just publish it #UserStyles #css
userstyles.world/style/12753/h

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst