Skip Navigation
Furry Technologists @pawb.social
Yote.zip @pawb.social
Userstyle

Add hearts to users from your homeserver/other designated servers (Frend Detector) v1.6

I made a userscript (eventually converted into a userstyle) so I could go sightseeing across lemmy and spot all you animals out in the wild. pawb.social, pawb.fun, and furry.engineer are pre-filled already, but you can add other servers to track as well!

Edit: Special mention to redyoshi49q@furry.engineer for this post, whose techniques resulted in CSS to achieve parity with my userscript. My older userscript should not be used anymore, as the CSS will do the same thing but more efficiently.

Instructions:

  1. Install Stylus extension for firefox/chrome
  2. "Write new style" in the addon settings
  3. Copy paste the CSS code below in
  4. Modify the code around line ~11 in order to reflect your homeserver and any additional frendservers that you want to highlight. Currently it's set to pawb.social and the mastodon servers that pawb.social also operates, but feel free to add some of the furry instances below as well (post in the comments if you've got a good furry instance to add here!):
  1. Modify the code around line ~19 to reflect your homeserver
  2. (Optional) If you'd like your homeserver buddies to have a different marker, uncomment the various sections around line ~27 through ~50 by removing the /* and */ bits
  3. (Optional) Play around with different markers and colors!

CSS/Userstyle: https://gist.github.com/redyoshi49q/f1b2d1da0a8f7536aba1f8c3110d2dd8

15 comments

  • I love this concept! Another prominent instance that comes to mind is meow.social I'm looking forward to playing with this after work _

  • I whipped up a proof-of-concept user CSS that does this (and should automatically adapt to entries shifting down).

    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document domain("pawb.social") {

    a.text-info[title$="@lemmy.blahaj.zone"] span::before {
    content: "❤ ";
    color: red !important;
    }

    a.text-info:not([title="."]) span::before {
    content: "★ ";
    color: yellow !important;
    }

    }

    • The first part prepends a red heart to usernames from a particular remote server (and variants of the CSS selector can be copy/pasted into a comma delimited list to allow the rule to apply to other servers as well).

      The second part prepends a yellow star to usernames from the local server... by crudely assuming that they won't contain any periods (CSS selectors aren't flexible enough for anything more elegant). The selector can instead be applied to the first rule to make those hearts as well.

      • Edit: Okay, apparently you need to pick a language if you're sending a message from lemmy to mastodon, otherwise you get eternal spinner.

        Normal comment as follows:

        You're amazing. I had a gut feeling that CSS could solve this but I couldn't find enough info myself. I'm a backend/integration guy and CSS scares me.

        This solution is definitely better designed than mine, but I'm not sure if it can handle highlighting when you're on a foreign server instance (e.g. literally on beehaw.org and not pawb.social). This isn't a huge deal imo but I posted the script somewhere and someone immediately wanted that feature so I put it into mine. I did solve the shifting around issue - it wasn't that hard to solve I just wasn't expecting lemmy to reuse elements in such a weird way. When a post comes into the feed, all the elements change their values directly - nothing "moves" around in the DOM (at least that's what I observed during 10 seconds of testing).

        With your current CSS, there's an issue where the star inserts itself on upvote counts for me after I've upvoted a post:

        This should be fixable by using something like this (pls fix if I'm doing it wrong):

         
            
a.text-info[title$="@lemmy.blahaj.zone"] span::before {
content: "❤ ";
color: red !important;
}

a.text-info:not([title*="."])[href*="/u/"] span::before {
content: "★ ";
color: yellow !important;
}

  • Fantastic!!! I didn't even think of this, but this is an excellent idea.

    I'm starting work on what I hope to make a browser extension to automatically connect back to your primary instance of choice if you visit another instance. Doing so cause I got tired of having it be that I'd visit an instance (like from the Rust subreddit) and not have it be linked to here so I can follow stuff. I'll have it be a user can set their primary instance, then when they visit another one, they can easily have it connect back properly so they can follow communities and interact there.

    (Apologies if that sounded confusing... I'm still not sure on all the verbage for the Fediverse. Hopefully it'll make sense when I release it x3 )

15 comments