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

  • Yote.zip@pawb.socialOP
    link
    fedilink
    English
    arrow-up
    0
    ·
    1 year ago

    I’ve ended up with a style like this:

    a.text-info[href*="/u/"][href$="@pawb.social"] span::before,
    a.text-info[href*="/u/"][href$="@pawb.fun"] span::before,
    a.text-info[href*="/u/"][href$="@furry.engineer"] span::before {
    content: "❤ ";
    color: red !important;
    }
    
    a.text-info[href*="/u/"]:not([href*="@"]) span::before {
    content: "★ ";
    color: yellow !important;
    }
    

    Frustratingly, I can’t seem to check whether pawb.social is in the href of a relative href like /u/yote_zip. If I could do that, this could work on foreign instances, because I could add a qualifier that someone is not only a member of the instance I’m currently on, but also my specific homeserver. As-is, this can be limited to pawb.social and will work just fine.

    • redyoshi49q@furry.engineer
      link
      fedilink
      arrow-up
      0
      ·
      1 year ago

      Try this:

      @-moz-document domain(“pawb.social”), domain(“yiffit.net”) {
      a.text-info[href*=“/u/”][href$=“@pawb.fun”] span::before,
      a.text-info[href*=“/u/”][href$=“@furry.engineer”] span::before {
      content: “❤ “;
      color: red;
      }
      a.text-info[href*=”/u/”]:not([href*=“@”]) span::before {
      content: "★ ";
      color: yellow;
      }
      }

      @-moz-document domain(“pawb.social”) {
      a.text-info[href*=“/u/”]:not([href*=“@”]) span::before {
      content: "❤ " !important;
      color: red !important;
      }

      }

      • redyoshi49q@furry.engineer
        link
        fedilink
        arrow-up
        0
        ·
        1 year ago

        There’s three lists of domains at play here:

        * The domains in the first @-moz-document are domains where hearts and stars appear at all.
        * The domains in that section’s a.text-info block are the domains that get hearts.
        * The domains in the second @-moz-document are the domains where the stars are overridden by hearts.

        This lets you always have hearts on an instance, even if you’re already on that instance, while also letting you have stars show native accounts elsewhere.

        • Yote.zip@pawb.socialOP
          link
          fedilink
          English
          arrow-up
          1
          ·
          edit-2
          1 year ago

          I’m unsure if this is what you mean exactly, but I was able to use your techniques to get parity with my script’s logic (star removed for simplicity at the moment):

          a.text-info[href*="/u/"][href$="@pawb.social"] span::before,
          a.text-info[href*="/u/"][href$="@pawb.fun"] span::before,
          a.text-info[href*="/u/"][href$="@furry.engineer"] span::before {
              content: "❤ ";
              color: red;
          }
          @-moz-document domain("pawb.social") {
              a.text-info[href*="/u/"]:not([href*="@"]) span::before {
                  content: "❤ " !important;
                  color: red !important;
              }
          }
          

          This CSS is logically equivalent to what I was doing in my script:

          So it works on all sites and highlights users from the first 3 sites (first is a user’s homeserver). On pawb.social specifically, it detects native users and adds a heart to them. In practice, this means everyone from those 3 servers should always have a heart next to them no matter where you go in the lemmyverse.