home.social

#userstyles — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #userstyles, aggregated by home.social.

fetched live
  1. Cleaner Mastodon userstyle now has a blur backdrop-filter for the "modal-root__overlay" class, the opacity set to 1 and the slight transparency defined via "background-color" instead.

    :codeberg: codeberg.org/brunomiguel/clean

    #Mastodon #UserStyles #CSS

  2. Cleaner Mastodon userstyle now has a blur backdrop-filter for the "modal-root__overlay" class, the opacity set to 1 and the slight transparency defined via "background-color" instead.

    :codeberg: codeberg.org/brunomiguel/clean

    #Mastodon #UserStyles #CSS

  3. В гитлабе не хватает светлых тем. Поэтому я сделала ещё одну: userstyles.world/style/28086/g

    Основана на IntelliJ Light с некоторыми поправками на возможности и глюки парсера. Рабоатет в MR'ах, диффах, blame, просмотре файла

    Настроено для html, js/ts и *css потому что я их вижу каждый день.

    #userstyles #gitlab #userstyle #stylus

  4. 🚨 New release (v1.0.2) of my Cattpuccin Mocha UI for Mastodon is here!

    Changelog:

    - Updated for Mastodon v.4.4.0, v.4.4.1, v.4.4.2, v4.5.0-alpha.1.
    - Updated to match BirdUI's 2.3.3 release.
    - Fixed a few margin issues around the search box in the left compose area I have had on my to-do list for awhile

    github.com/kylereddoch/catpucc

    #CattpuccinMochaForMastodon #Mastodon #UserStyles #Project #Cattpuccin

  5. 🚨 New release (v1.0.2) of my Cattpuccin Mocha UI for Mastodon is here!

    Changelog:

    - Updated for Mastodon v.4.4.0, v.4.4.1, v.4.4.2, v4.5.0-alpha.1.
    - Updated to match BirdUI's 2.3.3 release.
    - Fixed a few margin issues around the search box in the left compose area I have had on my to-do list for awhile

    github.com/kylereddoch/catpucc

    #CattpuccinMochaForMastodon #Mastodon #UserStyles #Project #Cattpuccin

  6. Lobsters looks pretty nice when tweaked to use Source Sans 3 with Stylus.

    #CSS #UserStyles #fonts

  7. Lobsters looks pretty nice when tweaked to use Source Sans 3 with Stylus.

    #CSS #UserStyles #fonts

  8. Today's edition of make-the-web-work-for-me includes some #UserCSS 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.

    #UserStyles #CustomizeTheWeb

  9. Today's edition of make-the-web-work-for-me includes some #UserCSS 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.

    #UserStyles #CustomizeTheWeb

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

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

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

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

    #sourcehut #userStyles

  13. "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

  14. "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

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

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

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

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

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

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

  21. #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/

  22. #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/

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

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

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

  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

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

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

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

    #chips-wrapper {
    display: none !important;
    }

    #userstyles

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

    #chips-wrapper {
    display: none !important;
    }

    #userstyles

  31. Ich bin ja schon ewig mit der Erweiterten Ansicht (mehrere Spalten) des #Mastodon UI unterwegs – und genauso lang auch mit custom CSS (über #Stylus / #UserStyles), das das alles ein bisschen straffer und platzsparender macht. Gerade mal abgeschaltet: der Standard-Stil geht schon sehr verschwenderisch mit dem vorhandenen Platz um. Passen locker 1-2 Posts mehr in die Vertikale.

    Code ist zu ungepflegt zum veröffentlichen, aber falls jemand Interesse bekundet…

  32. Ich bin ja schon ewig mit der Erweiterten Ansicht (mehrere Spalten) des #Mastodon UI unterwegs – und genauso lang auch mit custom CSS (über #Stylus / #UserStyles), das das alles ein bisschen straffer und platzsparender macht. Gerade mal abgeschaltet: der Standard-Stil geht schon sehr verschwenderisch mit dem vorhandenen Platz um. Passen locker 1-2 Posts mehr in die Vertikale.

    Code ist zu ungepflegt zum veröffentlichen, aber falls jemand Interesse bekundet…

  33. MBUI Tweaks is a set of patches for Mastodon Bird UI

    Tweaks (all optional):
    - Easy custom accent color (input only one base color)
    - Black / OLED dark mode
    - Enhanced mobile support
    - Elk-like boost pfp style
    - Twitter-like consistent back button
    - Twitter-like context menus
    - Twitter-like quotes (with Graze extension enabled)
    - Option for less padding
    - Enhanced post click area (left side of media is clickable)
    - and many more !

    #UserStyles #CSS
    Install it with Stylus
    userstyles.world/style/11945/m

  34. MBUI Tweaks is a set of patches for Mastodon Bird UI

    Tweaks (all optional):
    - Easy custom accent color (input only one base color)
    - Black / OLED dark mode
    - Enhanced mobile support
    - Elk-like boost pfp style
    - Twitter-like consistent back button
    - Twitter-like context menus
    - Twitter-like quotes (with Graze extension enabled)
    - Option for less padding
    - Enhanced post click area (left side of media is clickable)
    - and many more !

    #UserStyles #CSS
    Install it with Stylus
    userstyles.world/style/11945/m

  35. Are you really browsing the , or is the Web browsing you?

    On my , you're the one in control. Death of the author! User before the designer, before the default !

    I invite you to the opening of the new, dark section of my web page.

    dorotac.eu/posts/styles/

  36. Are you really browsing the #Web, or is the Web browsing you?

    On my #blog, you're the one in control. Death of the author! User before the designer, #Userstyles before the default #style !

    I invite you to the opening of the new, dark section of my web page.

    dorotac.eu/posts/styles/

    #css

  37. Please don't use the Stylish browser extension and userstyles.org. They're both owned by an analytics company (similarweb), paywall basic features, and also this https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/

    Use the "Stylus" browser extension instead. It's a fork of Stylish before they added the invasive tracking and paywalls.
    https://userstyles.world/ is also a community-ran alternyative to userstyles.org, use that instead for sharing your styles.

    #userstyles #userstyle #stylish #stylus

  38. Please don't use the Stylish browser extension and userstyles.org. They're both owned by an advertising company, paywall basic features, and also this https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/

    Use the "Stylus" browser extension instead. It's a fork of Stylish before they added the invasive tracking and paywalls.
    https://userstyles.world/ is also a community-ran alternative to userstyles.org, use that instead for sharing your styles.

    #userstyles #userstyle #stylish #stylus

  39. i made a MASTODON AWESOME MODE userstyle!!!

    it makes the background and text cycle the colors of the rainbow slowly, as well as turning everything into comic sans!!!

    userstyles are custom CSS thingies you can use with a browser extension like stylish to override the default appearance of a webpage with something prettier

    be sure to point it at the URL of your instance in the settings after installing it!!!

    userstyles.world/style/10367/m

    #mastodon #userstyle #userstyles #CSS #theme

  40. I'll be attending this week. If you'll be there too, hit me up!

    On a related note:
    I just wrote a little snippet to enhance the Power BI Summit website. It dynamically resizes the embedded video player and chat dialog to fit the modal window containing them.

    So, if you want to interact with other attendees in the chat AND actually be able to see what's going on in the video at the same time, add this snippet into your favorite UserStyles browser extension and enjoy!
    gist.github.com/JamesDBartlett

  41. Dred's HN CSS Madhackery

    pastebin.com/gLXiqKyd

    There are a number of annoyances / tweaks I fix about the Hacker News website design, whilst retaining its overall flavour. Key are swapping the darker main background / lighter margin default, setting the base font size to the user's default preference, and other miscellaneous tweaks mostly around spacing and colours / highlighting.

    I've been using this for a few weeks now and the code has stabilised.

    This updates my earlier mods in parent toot.

    Again, you'll want to install Stylus, a CSS management browser extension, see userstyles.org/ add0n.com/stylus.html.

    #CSS #Stylus #Userstyles #Hackernews #HN #WebDesignIsTheProblem #WebDesign #Pastebin