this post was submitted on 20 Nov 2023
9 points (84.6% liked)

Firefox CSS

431 readers
1 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 1 year ago
MODERATORS
WandererLagomorph770@lemmy.world
9
Has anyone figured out how to have vertical native tabs, with no 3rd party addons like Tree Style Tabs? (lemmy.world)
submitted 10 months ago by TheTwelveYearOld@lemmy.world to c/firefoxcss@lemmy.world
6 comments fedilink hide all child comments
 

Theoretically it should be possible to make child elements flow vertically instead of horizontally, by setting these properties on the parent: display: flex; flex-direction: column;. I tried that with a bunch of the tab elements and it didn't work. The problem with addons like TST is that they glitch out sometimes, and you have to wait for the tabs to load, it takes much longer on my M1 Mac once I have 100s of tabs open (don't judge me).

you are viewing a single comment's thread
view the rest of the comments
[–] TheTwelveYearOld@lemmy.world 0 points 10 months ago (2 children)

Oh shit, where did u find that photo? Could I see the CSS so I could try to figure it out?

[–] MrOtherGuy@lemmy.world 2 points 10 months ago

Sure, I'll link it to you later when I get home. It's really just a handful of lines of CSS.

But I suppose the main issue why you haven't got flex-direction to work is because the scrollbox has orient="horizontal" attribute and elements matching that are styled to have flex-direction horizontal in agent stylesheet with important tag. You cannot override that with userChrome. Practically this means that you cannot use standard flexbox display model for that scrollbox. Instead, I used display: -webkit-box with its equivalent properties to make it vertical

[–] MrOtherGuy@lemmy.world 2 points 10 months ago

So, like here is a bit more useful version. It's no more "just a handful of lines" because I needed to add a few workarounds for some obvious issues. And it surely is still not great - probably the most annoying issue is that if it ever happens that Firefox thinks that the tabs would overflow then you will irrecoverably lose the ability to scroll the those vertical tabs using mouse wheel - until you restart Firefox. And also as I already mentioned you can't reorder tabs. And probably a whole bunch of other issues as well.