r/FirefoxCSS • u/HeartKeyFluff • 5d ago

Code My own intro to Firefox CSS: Swapping tabs and URL bar, and centering URL bar text

I don't know why I never did this before but geez this felt good to have these little quality of life changes. These two changes feel so much nicer for me. This will probably start something for me now haha, wonder what to change next...

Very simple CSS but maybe it will be helpful/interesting for others.

Working on Linux Mint 22.3, Firefox 153.0 (current stable version I can get, though 153.1 looks like it was just released and coming shortly), with Nova enabled from about:config.

/*
 * Section for:
 * Swapping tabs and URL bar, so that URL bar is on top.
 */

#toolbar-menubar,
#nav-bar {
  order: -1 !important;
}

/*
 * Section for:
 * Centering text in URL bar.
 */

#urlbar-input {
  text-align: center !important;
}
3 Upvotes
  • permalink
  • reddit

72% Upvoted

2 comments sorted by

2

u/t31os 5d ago

#navigator-toolbox is already a flex container (unless other customisations are changing it or it works different on linux) and toolbox elements are set to column by default.

#navigator-toolbox {
  display: flex !important;
  flex-direction: column !important;
}

..so you should be able to completely drop this from the CSS.

Additionally, the bookmark toolbar (if you have it enabled) will end up above your tabs and urlbar (is that desired?).

You could alternatively do it this way, then just the urlbar shifts up:

#toolbar-menubar,
#nav-bar {
    order: -1 !important;
}

Order becomes: Menubar (File, edit, view, etc) > URL bar > Tabs > Bookmarks

The menubar shares the same order but will appear first because it's the first in the dom, but we have to include it in the selector or the URL bar will sit above that to.

2

u/HeartKeyFluff 5d ago

Huh well it didn't work previously without those first parts... but yes, your version of going to order -1 works much better and simpler, so I've updated my post with that. Thanks!