Big yellow dotted border on history page.
I don't know if it is a wrong manipulation or an update feature, but since today when i select a link in the history library, it is now highlighted with big yellow dotted borders instead of the usual subtle black/white single pixel sized dots. How to revert back to the small borders?
الحل المُختار
This code in userChrome.css should do that.
*|*:root { --default-focusring-width: 1px !important; }
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.
See also: More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html
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://www.userchrome.org/firefox-changes-userchrome-css.html
All Replies (6)
I think that they have increased the focus outline from 1px to 2px, possibly only if you use a high contrast theme.
See --default-focusring
- https://searchfox.org/mozilla-release/source/toolkit/themes/shared/tree.inc.css
- https://searchfox.org/mozilla-release/source/toolkit/themes/shared/global.inc.css
--default-focusring-width: 2px; --default-focusring: var(--default-focusring-width) dotted;
- 1749712 - Make dotted focus rings 2px wide by default
(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)
Modified
the problem, is i use a pretty light theme (mars picture), but white text is more visible on the pastel brown/orange sky, the dark mode is forced because FF96+ saying white text means obviously dark mode (despite all light pastel themes also use white text)
So how to force the outline back to 1px? yellow 2px dots is damn ugly
الحل المُختار
This code in userChrome.css should do that.
*|*:root { --default-focusring-width: 1px !important; }
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.
See also: More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html
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://www.userchrome.org/firefox-changes-userchrome-css.html
it doesn't work. I have always the big 2px sized outline
Did you make sure that you enabled userChrome.css via the pref I mentioned above ?
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
Is userChrome.css placed in the chrome folder in the current profile folder and that userChrome.css doesn't have a hidden .txt file extension (userChrome.css.txt; i.e. it isn't a Text File) ?
Can you attach screenshots that show the location and the content of ?
- https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem
- use a compressed image type like PNG or JPG to save the screenshot
yep i forgotten about the config, thks. The pixel returned to normal.