Update (11-Jan-2023): As of January 2023, the method described below does not work. The status bar (in Firefox 108 and earlier, and also later) will still appear at the bottom of the browser window but the status bar messages (URLs, etc.) will appear separately *above* it, which kinda beats the purpose of the whole exercise. I am sure that the Mozilla team altered the HTML/CSS code that was doing the magic and this is why the method stopped working. So I removed this CSS altogether from the
userChrome.cssfile.
I know this blog post still gets an occasional visit or two so if any of you find a new way of making the status bar appear in the newest versions of Firefox, please leave a comment with a helpful hint or two, thanks! :-)
The new Mozilla Firefox Quantum is quite cool. It’s fast, secure, and it has great support for all the latest “bells and whistles” in HTML/CSS/JS.
One thing is missing though — OK, maybe not one, but one that highly annoys me: the status bar.
And I am not the only one — Google “predictive results” suggests that probably thousands of people search for the status bar in the latest Firefox release.
To be fair, in Firefox 56 and earlier, the status bar was in a way missing too. But there was this excellent little extension that could bring it back in just a click: install Status-4-Evar, and bingo, the status bar is back! :-)
But what’s a status bar, you may ask? Usually it’s a little ribbon near the bottom of the browser’s window which can display a variety of information whenever needed. For example, while a web page is loading, the status bar may display brief glimpses about its loading progress. Or, when you mouse over a link on a page, the status bar will display the URL even before you click on the link. Handy!
When a web page is loading (1), the status (2) bar may display brief glimpses about its loading progress.
In one word: the status bar is something very, very useful!
Here’s the catch though — you can display the status bar in a few different ways:
a) it can be either permanently on display at the bottom of the browser window (which was the default for all browsers only a few years back);
b) or, you can display and hide it based on context — which is the new default for most browsers, including Firefox.
In my opinion, displaying and hiding the status bar based on context, is not ideal UX (user experience). Page is loading and the status bar “pop-up” shows at the bottom of the browser window; page has loaded — status bar disappears; you mouseover one or a few links on the page you’re reading — and the status bar shows then hides then shows again… On/off, on/off, on/off… hundreds of times! It’s visually distracting.
A bit of history: Google Chrome was the first browser to introduce this annoying “show/hide status bar” behavior and then many other browser vendors started adopting it as well. Firefox was not exception.
But then, the Status-4-Evar extension fixed exactly that: it restored the status bar to the location where it belonged, and allowed Firefox users to browse happily with the status bar displayed at all times! No more status bar “flickering” on/off! :-)
Unfortunately, Firefox Quantum brought not only some cool stuff but some bad stuff as well, and namely, it broke all the existing (pre-Firefox-57) extensions! And so Status-4-Evar was gone as well.
I am using Mozilla Firefox (and before that, Mozilla Suite) for ages. I love the browser. I like that it’s developed by the Mozilla Foundation (and not Microsoft or Google or Apple — three giants that I don’t like particularly). I like that I can customize every little bit of my browsing experience in Firefox… or rather, could. Because, as I just mentioned, most of the old extensions will not work in Firefox Quantum (versions 57, 58 and later).
So I jumped on a quest to find the missing status bar!
A quick google search showed quite a few results but some of them were misleading and others turned out to be just some posts where people complained about the missing functionality.
I then dug deeper and found out that even if now Firefox extensions cannot customize the user interface of Firefox anymore, there is still a manual (and not so well documented) way of modifying bits of the interface by using a special CSS file that you can create locally on your computer: userChrome.css.
The userChrome.css file must be created inside the
As an example, in Windows 10, the file is located here:
C:\Users\«your-Windows-profile»\AppData\Roaming\Mozilla\Firefox\Profiles\«your-Firefox-profile»\chrome\userChrome.css
After you create this file, add the following code to it:
/*
Display the status bar in Firefox Quantum (Firefox 57+)
permanently at the bottom of the browser window.
Code below works best for the Light Firefox theme and is based on:
https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
*/
#browser-bottombox {
height: 20px;
border-top: solid 1px #CCC;
}
.browserContainer>statuspanel {
left: 4px !important;
bottom: 0;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label {
margin-left: 0 !important;
border: none !important;
padding: 0 !important;
}
window[inFullscreen="true"] #browser-bottombox {
display:none !important;
}
window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label {
display:none !important;
}
Save the file and restart Firefox. You should now see the status bar permanently displayed at the bottom of the window! :-)
I took the idea from the following page: firefox-gui-chrome-css and made some slight modifications to it. It works best with the Light theme for Firefox Quantum.
If you are using the Dark Theme in Firefox then better if you use the next block of code as it was adapted specifically for the dark Firefox look:
/*
Display the status bar in Firefox Quantum (Firefox 57+)
permanently at the bottom of the browser window.
Code below works best for the Dark Firefox theme and is based on:
https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
*/
#browser-bottombox {
height: 20px;
border-top: solid 1px #505050;
}
.browserContainer>statuspanel {
left: 4px !important;
bottom: 0;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label {
margin-left: 0 !important;
border: none !important;
padding: 0 !important;
color: #EEE !important;
background: #333 !important;
}
window[inFullscreen="true"] #browser-bottombox {
display:none !important;
}
window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label {
display:none !important;
}
Note: If you are using more than one Firefox profile, you’ll need to add the modification to the userChrome.css file separately to every chrome folder in every profile.
I have tested this “hack” on two different Windows 10 computers with the latest Firefox 58 and it works brilliantly, at least for now.
If you’re the lazy type, feel free to download directly my modified userChrome.css files:
https://www.optimiced.com/wp-uploads/2018/02/userChromeLight.css
https://www.optimiced.com/wp-uploads/2018/02/userChromeDark.css
— only remember (after the download) to rename the file back from userChromeLight.css or userChromeDark.css to userChrome.css. I added “Light” and “Dark” in the file name only to differentiate between the two versions.
(Attention! The above Light theme and Dark theme examples will work for Firefox 57-60 only. Firefox 61+ requires updated CSS files, check the UPDATE at the end of the blog post! I made the update thanks to a recent helpful comment.)
Finally, if you’re a Firefox power user and already have a userChrome.css file with some customizations in it — in that case just add the bit of code and save it. (Do not replace your original file with the downloaded one as it’ll remove your current customizations.)
Hope everything is clear but if you have a question, feel free to post a comment below or to ping me on Twitter. :-)
UPDATE! (28/06/2018): After the release of Firefox 61, the CSS code needs to be tweaked, or otherwise it will not work. If you (for some reason) are still using Firefox 57, 58, 59 or 60, everything will be fine, use the older code. If you are using Firefox 61 or newer, get one of the next two CSS files which were updated and tested to work with the newer 61+.
The updated userChrome.css files — for Firefox 61 and newer:
https://www.optimiced.com/wp-uploads/2018/06/userChromeLight61.css
https://www.optimiced.com/wp-uploads/2018/06/userChromeDark61.css
(And again, remember (after the download) to rename the file back from userChromeLight61.css or userChromeDark61.css to userChrome.css. I added “Light” and “Dark” and “61” in the file name only to differentiate between the two dark/light versions, and so that you know these are the versions for FF 61+.)
Hello, your script works on my Win7 system. Just wanted to say thanks!
Hello Josh, nice to hear it works for you! :-)
Thanks, it works on Firefox 59 on Windows 7.
The question now is how to recover the progress bar to the right in the status bar, as I used to have it (and like it) with status-4-evar. Any ideas?
Thanks in advance.
@Olivia:
Sorry, no ideas about the progress bar to the right in the status bar… :-(
Unfortunately, latest Firefox Quantum is much more restricted in how it could be customized as user interface. I am even happy that (with a bit of CSS) I could bring the status bar back… and I even fear, in one of the next releases, maybe even this functionality will be removed. (Hope not!)
This works great for adding the status bar back, but how do you add things to it, such as addon buttons? Is that even possible in FF Quantum?
@Kev: “…how do you add things to it, such as addon buttons? Is that even possible in FF Quantum?”
I am afraid I do not know the answer to your question. And I don’t know if this is possible… But my guess is — no. Firefox Quantum is much more limited in terms of how you could customize it.
@Kev @Michel Yes you can, but with a little more efforts: https://www.reddit.com/r/FirefoxCSS/comments/8bfxji/been_trying_to_revive_the_addon_bar_statuspanel/
@Aleks: Thank you for the link! :)
First, thanks for this nifty little css hack!
Unfortunately, Firefox 61 broke functionality. :( The status bar itself is displayed permanently, but when hovering over a link the URL gets displayed in a box on top of the status bar.
Does this have to do anything with Mozillas work on Firefox’s themes, especially the dark theme?
Any help on restoring the old behaviour is greatly appreciated. Thanks!
“Does this have to do anything with Mozillas work on Firefox’s themes, especially the dark theme?”
— probably this is the reason, but unfortunately, we have no control over the decisions of the Mozilla design team and it’s likely the status bar behavior will be broken again by this update.
(I am still on Firefox 60.x but probably will see the same as you in a couple of days, when my Firefox updates.)
Maybe some clever CSS code could fix the problem for Firefox 61.x+?.. For now, I have no idea — I haven’t written any CSS myself for ages. :)
@Michel Thanks to David W. on reddit, I was able to adapt your code to the changes made in Firefox 61, as it wasn’t working anymore.
statuspaneland.statuspanelhave to be replaced by#statuspanel. The again working results look like this:#browser-bottombox {
height: 20px;
border-top: solid 1px #CCC;
}
.browserContainer>#statuspanel {
left: 4px !important;
bottom: 0;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label {
margin-left: 0 !important;
border: none !important;
padding: 0 !important;
}
window[inFullscreen="true"] #browser-bottombox {
display:none !important;
}
window[inFullscreen="true"] .browserContainer>#statuspanel[type="overLink"] #statuspanel-label {
display:none !important;
}
Thank you for providing the original code, though. Standing on the shoulders of giants, as Newton would’ve said. ;)
Hello,
I will test your update! One of my Firefox-s just updated to version 61. :)
I was thinking that probably some class or ID in the CSS changed — and you discovered, which one exactly! (How did you do it? Did you read some documentation on how Firefox 61 CSS code is constructed? And what are the changes if you compared versions 57-60 and 61?)
Thanks for fixing the text above, a closing bracket was missing.
Admittedly, I didn’t discover it, just copied some dude’s corrected code in the linked reddit thread. The funny thing is, I asked him the same question concerning documentation, but he also said he just copied his correction from another guy. :)
I also didn’t create the code, I just updated some existing code and then again… ;-)
But thanks for pointing it out! I was totally in the dark why the CSS stopped working in 61.
Now my blog post contains also links for the Light and Dark theme for Firefox 61+. I tweaked slightly and tested both and seems now everything is perfect on Firefox 61. (And I kept the CSS for 57-60 just in case.)
I noticed the label has a slightly lighter background colour than the bar itself on Firefox 62 with the light theme. Easily fixed by adding
background-color: transparent !important;to.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label.Good job. Is there any way to be able to get the download status bar in there or at least the doanload button on it in the right corner?
TLDR:
1. about:support > Profile Directory > Open Directory (*)
2. create userChrome.css if not existing
3. open it and paste contents from one of:
https://www.optimiced.com/wp-uploads/2018/06/userChromeLight61.css
https://www.optimiced.com/wp-uploads/2018/06/userChromeDark61.css
(*the page that is linked in the blog post, http://kb.mozillazine.org/index.php?title=UserChrome.css states that the linux profile folder is ~/.mozilla/ , which is not correct)
This is awesome, thanks. However, the text alignment in the status bar needs to be centered. At the moment, the text alignment is at the bottom. This makes it look unnatural. Can someone help with the code?
Thanks, it worked.
Boggles the mind why this can’t simply be an extension add-on rather than needing this chrome css file. Or better yet, it boggles the mind why Mozilla can’t just give us an option for a status bar.
The main reason I like a status bar is firstly it provides a buffer between the web page and my Windows task bar. Secondly, I don’t like links appearing over the content of the page when hovering over links. I find that distracting, and I hate it in Google Chrome too. Why the hell Mozilla copies Chrome is beyond me.
Thank you!
To have a sort of vertically centered text, use this code:
.browserContainer>#statuspanel {left: 4px !important;
bottom: 3px;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
In practice, change from 0 to 3px the distance of the text from the bottom of the window.
Hope this helps
Any idea on how to get the URL to appear in the status bar without a delay? That’s what pisses me off the most about the hidden status bar: When I’m visually checking a bunch of URLs, I have to wait for a slow fade-in “beautification,” which was put in place just because the decisions to put these kinds of feature in place are being made by fewer and fewer actual programmers and more and more art-degree-graduates-turned-programmers who spit in the eyes of functionality, usability, and productivity then kick them down the stairs in favor of long, drawn-out animations because “it looks great!”
What would be great if I could display it for say 5 seconds and then hide it again.I would love a simple button to display or hide it on demand but that doesn’t seem possible (yet)
I love Olof’s reply but after installing this userChrome and restarting Firefox 65 dot 01 I saw no change whatsoever, seems like Mozilla broke important features yet again.
The google spyware alternative is worse, but Mozilla seem utterly obnoxious about forcing their preferred interfaces onto users without any attempts at consultation whatsoever.
I am with Firefox 65.0.1 and the CSS mentioned still works perfectly, I have a status bar in my Firefox, and it works! :-)
I think you need to double-check if everything is set up correctly.
Thank You.
I’m using your CSS because the status bar in Chrome covers up the last email in so many email webmail programs including Outlook for Office 365. You’ve made an annoyance go away. Thank you, thank you.
One other thing, the chrome folder wasn’t in my user directory (FF 65.0.2). I created it and inserted the file. All is well. Thanks again!
Thank you very much!
Sigh, Firefox seemed to be the last bastion of decent customisable browsers, now it seems even this is getting forcibly dumbed down.
Removing a status bar, so that you now have to add a CSS hack for it to display a “Status Bar”, that then doesn’t even show any status information. It’s just, “a bar.” (No progress bar, zoom amount, all the other stuff browsers used to show).
I don’t mind dumbing down, but I hate forced dumbing down, just leave the option to show all stuff for those people that have the intelligence to tweak things.
I added it to FF 67 and do not get a status bar at the bottom. Is there some new code needed? This is on Windows 10.
I downloaded and tried the latest linked code and Firefox 68.0 (64-bit) I get a black bar but nothing in it… bummed :-P
Just for those who aren’t getting it to load at all. If you don’t have a chrome folder you need to create one and then put the userChrome.css file into it. It also must have this exact file name.
The code worked great until there was an update incoming to Firefox 68.1.0esr
Now the bar is still there but has no content.
Instead when hovering a link the default link information appears (standard Firefox behaviour).
Will there be fixes/updates to userChrome.css code?
@Jurgen: The CSS code still works in Firefox 69.0.3. Visually, there are almost no issues, the taskbar is there and shows the links when mouseovering any link on a page. Not sure if it’ll work in Firefox 70+ though, but fingers crossed! :)
Hello and thanks for the useful code! I’ve been using this for a while now with no problems, but it seems that the latest FF update (72.0.1 for me) broke it. The bar is visible even when I go fullscreen on a YouTube video. Can anyone please give me any advice as to how to fix this? Thank you!
I transferred my Mozilla profile from an older computer running Windows 7 to a new one with Windows 10. The userChrome.css is still there, but now the status bar doesn’t hide when I watch videos on full screen. Is there a new line of code I need to add to the .css file to make the status bar disappear in full screen mode? Thanks in advance for your help.
The status bar does not work properly in Firefox 72 when playing videos in full screen mode. The status bar at the bottom stays when in full screen watching a video. Any idea how to fix that?
Hello and thank you this great solution. I’ve been using it for a while now, and it worked great right until the latest FF update (72.0.1) – now, whenever I watch any fullscreen video (YouTube or Vimeo for example), the bar is still visible on the bottom of the screen. Could you maybe offer some tips as to how to fix this? Thank you!
Hi everyone,
Thanks for this excellent blog post. I’ve also found it essential for adding the status bar on Firefox Quantum, which is a great shame how it was removed as a built-in feature.
As the previous posters stated, I can confirm that from FF 72.0 how the bar now persists in full screen mode, and it appears to be due to the display:none property not being adhered to. Blistering barnacles!
This is seemingly because window[inFullscreen=”true”] is no longer compatible for some reason, and so it doesn’t know to apply said property when full screen is active. They must’ve changed something in the new update somewhere. It was fine in FF 71.0 and I don’t see reference to this in the release notes. Strange indeed, and also I found a userChrome.js script I use no longer works.
Anyhow, after experimenting I found a solution to this by replacing both instances with
:root[inFullscreen]instead.
This makes those two lines be:
:root[inFullscreen] #browser-bottombox { display:none !important; }:root[inFullscreen] .browserContainer>#statuspanel[type="overLink"] #statuspanel-label { display:none !important; }
I’m unsure whether this is the best workaround from a technical standpoint, but as of FF 72.0.1 on Windows and it does the trick for me.
Hope this helps! :)
Thank you, Captain Haddock – it works! You’re amazing!
Hello!
It doesn’t work for me, I have Firefox 72.0.2 (64bits)
im my “Profiles” folder I have 3 profiles folders:
em4vsjrg.default-1517912339178
jxrmzr05.default-1518035960693
u6iitelz.default-release
In each of them I created the chrome folder in which I put the userChrome.css
Please, does anyone know how to fix this?
@RAYAN
type: about:config in address field, and change/set the following:
toolkit.legacyUserProfileCustomizations.stylesheets = true
now Firefox should read the userChrome.css
Thanks for the code, I modified it so that it removes the black status bar itself and simply leaves in the changes to the text and background color of the status “popup” as I found that to work better, screen space is maintained but the status popup is less noticeable especially on all the dark themed websites I browse, I also modified it to touch the leftmost side of the screen leaving no gap-
Code is-
.browserContainer>#statuspanel { left: 0px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; }
.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0px !important; color: #EEE !important; background: #333 !important; }
window[inFullscreen=”true”] #browser-bottombox { display:none !important; }
window[inFullscreen=”true”] .browserContainer>#statuspanel[type=”overLink”] #statuspanel-label { display:none !important; }
Honestly if Mozilla make their final mistake and remove the ability to edit UserChrome.CSS entirely then I will stop using Firefox, this is just too convenient and fun of a feature to lose!
Well…Mozilla (clearly no longer a community based company) is DEAD SET against ALL ATTEMPTS at restoring this status bar. It seems with every release they go to GREAT lengths to remove any and all efforts to restore the lower status bar, instead insisting on the flat ugly “Chromium look”.
This sickens me. I’m glad my other win10 and win7 PCs still have FF43-56. But, they are not secure, and many websites are detecting them and refusing to behave. I’m even starting to see that in the v60 I have this machine. Which I also have v75 installed alongside.
The v60 still has the status bar, and when I copied the “userChrome.css” file over to the v75 profile….had no luck. My browser still looks like a flat disgusting piece of paper floating on my desktop.
I really miss the olds days of user interfaces with their wide borders and 3d-ish icons and color. Now everything is flat and boring. Even Firefox themes no longer allow complete modification and just and only change the title bar pane.
Okay, I’ll keep coming back here to see if there is any updates…peace and good luck!
/*Statusbar*/
#main-window:not([inFullscreen=”true”]) > body::after{
display: -moz-box;
content: “”;
height: 20px;
border-top: solid 1px #CCC;
}
#statuspanel {
position: fixed !important;
height: 20px !important;
width: 100% !important;
left: 0px !important;
bottom: 0px !important;
padding: 0px !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
transition-property: none !important;
}
#statuspanel-label {
background: transparent !important;
border: none !important;
}
Hello,
Below the new working css status bar for firefox 109.
Change height ans background color at your convenience.
Hope that help.
/* Status Bar */
#main-window:not([inFullscreen=”true”]) > body::after{
content: “”;
height: 22px;
border-top: 1px solid #ccc;
background:#E6EEF7;
}
#statuspanel>#statuspanel-label { background:#E6EEF7!important; }
#statuspanel {
position: fixed !important;
height: 20px !important;
width: 100% !important;
left: 3px !important;
bottom: 3px !important;
padding: 0px !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
transition-property: none !important;
font-family:Verdana!important;
color:#333!important;
background:#E6EEF7;
border-top: 1px solid #ccc;
}
I was not able to change the font color, so I changed the background color and made it this:
/* Status Bar */
#main-window:not([inFullscreen=”true”]) > body::after{
content: “”;
height: 22px;
border-top: 1px solid #ccc;
background:#E6EEF7;
}
#statuspanel>#statuspanel-label { background:#000000!important; }
#statuspanel {
position: fixed !important;
height: 20px !important;
width: 100% !important;
left: 0px !important;
bottom: 0px !important;
padding: 0px !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
transition-property: none !important;
font-family:Verdana!important;
color:#333!important;
background:#000000;
border-top: 1px solid #ccc;
}
Could anybody tell me how to change the font color instead?