this post was submitted on 04 Jul 2023
2 points (100.0% liked)

Firefox CSS

451 readers
12 users here now

Pushing the limits of the Firefox Browser through the use of CSS.

#join #firefoxcss:mozilla.org

Post your Firefox UI customizations here!

What is userChrome.css?

Rules (enforced)

  1. Posts must have flair!

  2. Follow Lemmy.World rules

  3. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.

  4. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.

  5. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.

  6. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

Guidelines (not enforced)

Consider adding the following info to help people try your tweaks:

  1. Screenshots should have code in comments.

  2. Include Firefox version

  3. When asking for help you should share your custom style to help others understand what you are doing. This is increasingly important the more custom rules you have.

  4. List any other addons that may be changing the UI

  5. If a custom wallpaper is used, include a link to the original.

  6. If someone's comment solves you problem, reply to the comment to let them know, and change your post flair to solved.

Wiki

Find Helpful Knowledge and answers to common issues in /c/FirefoxCSS wiki.

Links

Lemmy Communities

Websites

founded 2 years ago
MODERATORS
WandererLagomorph770
2
Possible to change the header images for this forum? (self.firefoxcss)
submitted 2 years ago by hansmn to c/firefoxcss
4 comments fedilink hide all child comments
 

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. ๐Ÿ˜‰

top 4 comments
sorted by: hot top controversial new old
[โ€“] MrOtherGuy 2 points 2 years ago* (last edited 2 years ago) (1 children)

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 1 points 2 years ago (1 children)

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 2 points 2 years ago (1 children)

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 1 points 2 years ago

Thanks for the heads-up, I'll keep an eye on it. ๐Ÿ‘