userChrome.css not working
System Info: 1. Windows 10 Home 22H2 (as of writing) 2. Firefox 118.0.2 (as of writing)
I'm trying to make the simple change of moving the location of the 'find in page' bar from the bottom to the top and I recently discovered that using userChrome.css was the way to do it. I followed this tutorial in the following link, https://www.userchrome.org/how-create-userchrome-css.html, making sure to put the "chrome" folder in the right location C:\Users\myName\AppData\Roaming\Mozilla\Firefox\Profiles\sfytm5xk.default-release, switching the toolkit.legacyUserProfileCustomizations.stylesheets to true, entering the code snippet into the userChrome.css using VSCode, and restarting the browser for the changes to take effect.
After the first restart, I found that the 'find in page' bar was still at the bottom and nothing had changed. I restarted the browser about 10 more times and nothing changed still. I looked through the Mozilla Support forums, r/FirefoxCSS and r/Firefox subreddits for an answer and came across a few posts with similar problems, tried their recommended solutions such as downloading the userChrome.css file from the website tutorial, double-checking that File Explorer would show file extensions when creating or renaming files, or even restarting my computer and yet none have worked.
I have no idea what's wrong so feel free to share what you think the problem might be and possible solutions in the replies.
Modified
Chosen solution
-moz-box-ordinal-group is no longer supported in 113, use order with a value one less:
Possible CSS code to try:
/* Find Bar on top of page */ .browserContainer > findbar { order:-1 !important; /*113*/ border-top: none !important; border-bottom: 1px solid ThreeDShadow !important; }
Read this answer in context 👍 2
All Replies (3)
Chosen Solution
-moz-box-ordinal-group is no longer supported in 113, use order with a value one less:
Possible CSS code to try:
/* Find Bar on top of page */ .browserContainer > findbar { order:-1 !important; /*113*/ border-top: none !important; border-bottom: 1px solid ThreeDShadow !important; }
Appreciate the tip, cor-el! Your code snippet worked beautifully! :D
Dropa said
You need to contact the css maker about the issue with their userChrome.css edits.
As I said to you dozens of times now, people are still welcome to try and get help with userChrome.css and userContent.css here. Besides it is quite possible thy got it from here originally.
And as you can see above, cor-el was able to help the OP.
Modified