Firefox: Move Find bar to the top
I recently upgraded my system and, after installing and using Firefox, I notice the Find (Ctrl + F) bar is now at the bottom of the window. Whereas, it was previously at the top (which is more like every other application I use).
After some head scratching and web searches, I remembered I had to fix this issue previously (after a Firefox upgrade some time back). The method to fix it then could be found here: [there a way to put the Find Bar at top] That link is of course to the same question asked 4 years back.
I have once again followed the procedure there explained per: • Access my Firefox profile folder. In my case:
C:\Users\<Me>\AppData\Roaming\Mozilla\Firefox\Profiles\5ym42ewi.default
• Create folder therein called ‘chrome’ • In that folder create a file called ‘userChrome.css’ • In that file add text:
.browserContainer > findbar {
-moz-box-ordinal-group: 0;
}
However, after doing that (and restarting Firefox), the Find bar stubbornly remains glued to the bottom of the window.
Can anyone tell me how to solve this issue?
As a separate note to the developers: This issue is long-standing, that a web search reveals is still relevant to many users. Any chance of considering making it a standard option?
Chosen solution
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
- https://www.userchrome.org/firefox-changes-userchrome-css.html
I use code to place that statuspanel at the top and I need to add the !important flag to make this work. EDIT: updated for 113+ where -moz-box-ordinal-group:x needs to be replaced with order:x-1.
.browserContainer > findbar {
-moz-box-ordinal-group:0 !important; /* for 112 and older */
order: -1 !important; /* for 113 and newer */
border-top: none !important;
border-bottom: 1px solid ThreeDShadow !important;
} /* STATUS PANEL - TOP */
.browserContainer > :not(#statuspanel) {
-moz-box-ordinal-group:2 !important; /* for 112 and older */
order: 1 !important; /* for 113 and newer */
}
#statuspanel {
margin-top:-20px !important;
z-index:2147483647 !important;
}
/* STATUS PANEL - width */
#statuspanel {
max-width:90% !important;
pointer-events:none !important;
}
/* STATUS PANEL - background */
#statuspanel-label {
background:#ff9 !important;
color:black !important;
font-family:"DejaVu Sans Mono";
border: gray dotted 1px !important;
}
Read this answer in context 👍 1
All Replies (5)
Note: After posting I note the embedded link doesn't work (and I couldn't find any option to edit the post). The links should read: Is there a way to put the Find Bar at top
Chosen Solution
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
- https://www.userchrome.org/firefox-changes-userchrome-css.html
I use code to place that statuspanel at the top and I need to add the !important flag to make this work. EDIT: updated for 113+ where -moz-box-ordinal-group:x needs to be replaced with order:x-1.
.browserContainer > findbar {
-moz-box-ordinal-group:0 !important; /* for 112 and older */
order: -1 !important; /* for 113 and newer */
border-top: none !important;
border-bottom: 1px solid ThreeDShadow !important;
} /* STATUS PANEL - TOP */
.browserContainer > :not(#statuspanel) {
-moz-box-ordinal-group:2 !important; /* for 112 and older */
order: 1 !important; /* for 113 and newer */
}
#statuspanel {
margin-top:-20px !important;
z-index:2147483647 !important;
}
/* STATUS PANEL - width */
#statuspanel {
max-width:90% !important;
pointer-events:none !important;
}
/* STATUS PANEL - background */
#statuspanel-label {
background:#ff9 !important;
color:black !important;
font-family:"DejaVu Sans Mono";
border: gray dotted 1px !important;
}
Modified by cor-el
Thanks for all that cor-el
Sadly, I did as suggested and the Find Bar remains stubbornly glued to the bottom. For the sake clarity: • I copied all your code (verbatim) into userChrome.css • There is nothing else in that file • userChrome.css is in a 'chrome' folder within ...AppData\Roaming\Mozilla\Firefox\Profiles\5ym42ewi.default • I closed and restarted Firefox after the changes • My Firefox is version 98.0.2 (64-bit) • My Windows is Windows Pro version 10.0.19043
Obviously it's working for you, so there is something different between our systems. If you have any ideas of what, I would certainly appreciate hearing them.
Did you set the about:config preference to true? The various steps are outlined in the link below. You will have to remove the blank space in the link.
https://www.userchrome. org/how-create-userchrome-css.html
Thank you again. Turns out I was using the wrong ‘default’ folder. For whatever reason I have two of them? The method in your post above to find out which is the ‘correct’ one was the final part of solution.
So… again… thank you very much! I’ll squirrel this information away for the next time (I need to go through this cycle).