this post was submitted on 07 Aug 2023
452 points (97.3% liked)

Firefox

17865 readers
16 users here now

A place to discuss the news and latest developments on the open-source browser Firefox

founded 4 years ago
MODERATORS
 

It's so beautiful I might cry.

top 50 comments
sorted by: hot top controversial new old
[–] Corvid@lemmy.world 24 points 1 year ago (1 children)

Do you have the css for this somewhere? I’d love to see it

[–] EveryMuffinIsNowEncrypted@lemmy.blahaj.zone 24 points 1 year ago (2 children)

I do not understand. Could someone explain what's happening?

[–] Carighan@lemmy.world 13 points 1 year ago (1 children)

They got MS Edge like vertical tabs going, which after also using for nearly a year now I will say should be the default setup on wide/desktop formats.

We got more horizontal space than vertical in 16:9 and so on, so it maks no sense to have a second horizontal bar taking up precious vertical space when we can trivially use vertical tabs to use up the abundant space instead. More so because most websites use only a tiny fraction of the horizontal space in their layout anyways (case in point, Lemmy renders the same width whether I got vertical tabs or not).

Ever since MS Edge came out I've been looking for this in other browsers, and at least in Firefox I can do it myself, I just wish it was an official thing.

[–] Anemervi@lemmy.world 16 points 1 year ago

They got MS Edge like vertical tabs

To be fair, vertical tabs has been possible in Firefox for way longer than Edge has even existed. For example this add-on is more than a decade old.

[–] b14700@lemm.ee 15 points 1 year ago (1 children)

make the task bar vertical for more vertical space

[–] JokeDeity@lemm.ee 5 points 1 year ago (1 children)

I cannot break these 30 years of habit, my taskbar is going nowhere, lol.

[–] b14700@lemm.ee 5 points 1 year ago (1 children)

thats what i thought at first too

[–] JokeDeity@lemm.ee 5 points 1 year ago

The other thing is that I have two monitors with separate taskbars, and as much clearance as that saves me vertically I just can't envision a good setup for them. Both in the middle leaves and ugly block in the middle of my screen. Both on the outside means in the event I need go travel from one to the other I'm crossing a huge distance. Each on the left or right just looks awkwardly unbalanced to me and not aesthetically pleasing.

[–] vahtos@programming.dev 15 points 1 year ago

Everyone here seeing this: "Wow so sleek, amazing!"

Meanwhile, Mozilla: "Yeah so we're going to remove compact title bars in favor of touch friendly nonsense. OK. Fine. We will just hide it in about:config until later when we will silently remove it."

[–] kaptaan_jack@lemmy.ml 14 points 1 year ago (1 children)

hi, i loved your Firefox layout, can you please upload or provide the css for same. I would love to implement on my system

load more comments (1 replies)
[–] Squirrel@thelemmy.club 14 points 1 year ago (1 children)

My dumb ass just opened Firefox on my phone to try this...

load more comments (1 replies)
[–] altima_neo@lemmy.zip 11 points 1 year ago (1 children)

And here I am adding back the title bar and all that other shit. Hell, how do I get the status bar back at the bottom?

[–] JokeDeity@lemm.ee 3 points 1 year ago

Is it not in the customize menu anymore? Mozilla kills me with what they silently remove or change or hide away.

[–] Kecessa@sh.itjust.works 11 points 1 year ago (1 children)

Am I crazy if I remember doing that over 10 years ago? I've been using Chrome for a long time now, but you just made me remember that I used to do that on Firefox when I was using it before it became crap (before becoming good again).

[–] RootBeerGuy@discuss.tchncs.de 3 points 1 year ago

Yeah, same here. Was the first thing I used to do.

[–] JokeDeity@lemm.ee 10 points 1 year ago* (last edited 1 year ago)

THIS IS NOT YOUR TYPICAL GUIDE, IF YOU DON'T READ THIS POST AND ONLY COPY THE CSS, IT PROBABLY WON'T WORK OUT FOR YOU


Okay, since several people are asking for the CSS, so I want to preface by saying I am at best a script kiddie that has stolen 99% of this from here and there around the net. I cannot properly give credit where it is most certainly due for the original authors of any of this, and it IS a big mess I've thrown together over time. That being said, it may not function perfectly for you out of the box, due to variables changed in my about:config, addons I have installed, etc. Hopefully it just works for you, but no promises.


First up is the userChrome.css file found in your profile folder and then the chrome inside that, mine has a bit at the beginning for the addon SimpleMenuWizard, which you can remove, but I included it for full transparency in what I'm working with here:

https://pastebin.com/C6STwwmb

Next up, I have the addon TabCenterReborn which was used for the tabs on the side, you absolutely can accomplish this with only CSS if you know how. I do not know how. So I'm using that addon and it has it's own CSS page in it's settings. Here is what I have there, but warning: it's an even bigger mess and I am sorry:

https://pastebin.com/tLg1jmVp


I also use the following addon and theme that may or may not be relevant to you in getting the Firefox you want:

Custom Scrollbars (for the thin scrollbar, again can probably just be done with CSS, but I am dumb)

The Darkspace theme for the darkest theme with still just a little bit of flair I could find.


For shits and gigs if you are interested I will also list the rest of the addons I use if you want to check them out/if you have recommendations for a better alternative:

Dark Reader (never found a perfect solution for every site out there, but this one works pretty well for getting rid of really bright sites killing your eyes)

DeArrow (community project to replace all clickbait titles and thumbnails from Youtube with appropriate ones, it's probably better than I'm making it sound)

Download Manager (S3) (I just personally really like this addon for managing my downloads, highly personal choice here)

Image Max URL (helps you find the largest resolution version of an image, can automatically replace them in websites like it wasn't ever there to begin with)

Nightly Tester Tools (I'm not so sure how important this one is these days, kept it out of habit, you probably won't need it?)

NoScript (you don't already have this? why?)

Reddit Enhancement Suite (tons of options of configure Reddit to your liking, but these days, who even wants to go to that Dumpster fire)

Rotate and Zoom Image (you can add rotation and zoom options to your context menu when you right click, might be useless for many people)

Search by Image (this is essentially just a shortcut in your context menu for copying a link to Google image search, like others, there might be a more elegant solution to this than using an addon, but it works for me)

Tab Session Manager (saved my mental sanity several times, lets you manage sessions to a pretty good degree right in your browser)

Tampermonkey (there are a few options for running custom scripts on sites, I personally use Tampermonkey, but I can't remember why I preferred it to any others, you'll have to look into this one to fully understand all the potential this unlocks for you)

uBlock Origin (see comment for NoScript, make sure you enable all the extra blocking stuff in the settings (make sure you aren't using Adblock Plus ever))

VideoDownloadHelper (pretty self explanatory, helps you download videos from sites that don't make it as simple as it should be to do so)


Hopefully that is enough information to get you guys who want similar close enough. If anyone reading this has suggestions for improvements on what I have set up here, I'm certainly open to hearing them, and I'm MORE than welcome to anyone trying to clean up my mess of CSS.


EDIT: Already finding flaws in this I need to figure out, lol. The tab bar for me is not appearing by default in private windows, it is appearing by default in popups like Google logins and downloads, and it's not accessible at all when in fullscreen for me when on the edge of my browser that goes into where my two monitors meet.

[–] Waffelson@lemmy.world 9 points 1 year ago

I remember how I had Firefox, which also used vertical tabs, hiding the address bar when there is no cursor on it, the minus is that because of this, the entire center of the sites will be shifted

[–] Anarki_@lemmy.blahaj.zone 7 points 1 year ago (1 children)
[–] VonVoelksen@discuss.tchncs.de 6 points 1 year ago (1 children)

Wow, I love it! Can you share your .css Files?

[–] Byereddithellolemmy@lemmy.world 6 points 1 year ago (2 children)
[–] vox@sopuli.xyz 10 points 1 year ago* (last edited 1 year ago) (1 children)

you can style firefox with arbitrary css code!

userChrome.css (+also userContent.css, user.js if you need them)

just enable toolkit.legacyUserProfileCustomizations.stylesheets in the about:config page
then open your Firefox profile folder, create a folder called "chrome" and create two files: userChrome.css and userContent.css

you can style browser window elements using the userChrome.css

userContent.css applies to all pages, including your firefox home page which is usually impossible to style eith extensions for security purposes (use -moz-* queries to restrict to certain pages)

[–] hal_5700X@lemmy.world 4 points 1 year ago

You can find your Firefox profile folder at about:profiles.

[–] knowledgephoenix@beehaw.org 6 points 1 year ago (2 children)
load more comments (2 replies)
[–] vis4valentine@lemmy.ml 6 points 1 year ago (1 children)
load more comments (1 replies)
[–] silent_water@hexbear.net 4 points 1 year ago

side tree tabs lyfe forever and ever

[–] megatron36@lemmy.world 4 points 1 year ago (1 children)

I didn't know you could do this. I just investigate this option now

load more comments (1 replies)
[–] TenderfootGungi@lemmy.world 4 points 1 year ago (4 children)

I believe it is Mac only, but have you seen Arc?

[–] ViciousTurducken@lemmy.one 8 points 1 year ago (1 children)

Also, check out ArcFox, a way to implement some of Arc Browser's design into Firefox.

Keep in mind that it is currently undergoing a rewrite.

[–] RandomlyRight@sh.itjust.works 2 points 1 year ago

This is pretty cool! Just installed it. But the css doesn’t seem to load properly, following the tutorial. Do you also have weird stuff going on with the top bar still showing sometimes?

load more comments (3 replies)
[–] jet@hackertalks.com 4 points 1 year ago (1 children)
[–] JokeDeity@lemm.ee 3 points 1 year ago (1 children)
[–] jet@hackertalks.com 3 points 1 year ago* (last edited 1 year ago) (1 children)

Thank you! What's really weird is I don't see your comment in Voyager, but I can read it when I follow your direct link. I wonder why that is

Here is what I see: https://wefwef.app/inbox/hackertalks.com/c/firefox@lemmy.ml/comments/77590/

Very weird

load more comments (1 replies)
[–] Psythik@lemm.ee 4 points 1 year ago (1 children)

Why continue using the vintage menu bar, when the hamburger menu has everything you need? I don't get it.

[–] JokeDeity@lemm.ee 5 points 1 year ago (1 children)
[–] DogMuffins@discuss.tchncs.de 2 points 1 year ago (4 children)

You like the aesthetics or practicality? Pretty rare I need the menu for anything

load more comments (4 replies)
[–] xi_simping@hexbear.net 4 points 1 year ago

Looks sleek, good job comrade

[–] riffy@lemm.ee 4 points 1 year ago (1 children)

Now get it to mouse over only, so there is no showing ui. :-)

load more comments (1 replies)
[–] Vuipes@kbin.social 4 points 1 year ago* (last edited 1 year ago)
[–] yool_ooloo@lemmy.world 3 points 1 year ago

Congratulations! Please, do a TedTalk or something!

[–] ehyuman@lemmy.dbzer0.com 2 points 1 year ago

you can also do that with floorp browser

load more comments
view more: next ›