Crumb
c/firefoxcss · by hansmn@lemmy.world · 3y

Possible to change the header images for this forum?

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

2 points · 4 comments · view on lemmy.world

4 Comments

MrOtherGuy@lemmy.world · 2 pts · 3y (3 replies)

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;
  }
}
hansmn@lemmy.world · 1 pts · 3y (2 replies)

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.

MrOtherGuy@lemmy.world · 2 pts · 3y (1 reply)

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.

hansmn@lemmy.world · 1 pts · 3y

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