Good day,

I’ve been trying to adjust some of the design of lemmy in the past few days, and it’s been working well so far.

However, this forum has a few images in the header, a quite tacky anime-style background picture, and that silly Fx logo which is disgusting.

Not to mention the left ear of the poor thing is cut off.

I figured out I can use .banner-icon-header to manipulate those images in userContent.css , but how can I make changes only apply to this subforum?

I tried [href*="https://lemmy.world/c/firefoxcss/"] in some different ways, just don’t know how to use it properly to make it work.

Or we could just lose those images. 😉

  • @MrOtherGuyEnglish
    2•1 year ago

    For the main community page you could do it like this:

    @-moz-document url-prefix("https://lemmy.world/c/firefoxcss"){
  .banner-icon-header .banner{
    content: url("image.jpg");
    object-position: top;
  }
  .banner-icon-header .avatar-overlay{
    display: none;
  }
}

    The image.jpg here would be an image file in your chrome directory. object-position controls how the given image is positioned since it might have different dimensions than the original one.

    But for the various other images - for example that in the sidebar - for them I don’t see any obvious way to select them only in this community. For them you might need to just use the <img> src attribute which kinda sucks but should work. It would go like this then (this would also work for the main community page):

    @-moz-document domain("lemmy.world"){
  .banner[src="https://lemmy.world/pictrs/image/676a948c-5370-43e5-b123-3dc1e61c103b.png"]{
    content: url("image.jpg");
    object-position: top;
  }
  .avatar-overlay[src="https://lemmy.world/pictrs/image/dcac87c1-5a83-43e2-a1ae-b798fa2fcf93.png"]{
    display: none;
  }
}
    • @hansmnOPEnglish
      1•1 year ago

      Thanks a lot for the reply; it works well for the main page of this sub, but as you said targeting the sidebar is more challenging.

      • @MrOtherGuyEnglish
        2•1 year ago

        Yeah, I don’t know if you can do better than that.

        On another note, we may be moving this community to fedia instead - to here: https://fedia.io/m/FirefoxCSS or via this site. Not much there at the moment but thought I’d mention it.

        • @hansmnOPEnglish
          1•1 year ago

          Thanks for the heads-up, I’ll keep an eye on it. 👍