"Find in page" toolbar
What is the "Find in page" toolbar called?
The 113.0.1 update (sic) moved it to the bottom of my page. I want to search for a way to restore it back to the upper part of the page (probably using userChrome).
(Note: I was happy with my setup in 112.0.2)
All Replies (9)
That is the Find bar (findbar in userChrome.css). In Firefox 113, -moz-box-ordinal-group is no longer supported with the change to using flex boxes for the user interface. With a flex box you use the order CSS property with a value one less than -moz-box-ordinal-group (-moz-box-ordinal-group is 1 and flex is 0 by default).
New code for 113+:
/* Find Bar on TOP */ .browserContainer > findbar { order:-1 !important; border-top: none !important; border-bottom: 1px solid ThreeDShadow !important; }
Thank you for the prompt reply. I believe you have responded to be in the past. Forgive me for being brief but I just had cataract surgery on both eyes and I’m not seeing well yet.
I fully admit I do not understand any of: In Firefox 113, -moz-box-ordinal-group is no longer supported with the change to using flex boxes for the user interface. With a flex box you use the order CSS property with a value one less than -moz-box-ordinal-group (-moz-box-ordinal-group is 1 and flex is 0 by default).
And I will have to put that off for a month or so.
But I am guessing that the “New code for 113+” can be inserted into my userChrome.css file.
Am I correct?
What CSS code do you currently have in userChrome.css for the findbar ?
/* Move Find Bar above the page - I added 07-17-2020 */ .browserContainer > findbar {
-moz-box-ordinal-group: 0;
}
Replace -moz-box-ordinal-group: 0; with order:-1 !important;
Was:
/* Move Find Bar above the page - I added 07-17-2020 */ .browserContainer > findbar {
-moz-box-ordinal-group: 0;
Per your instructions:
Replace -moz-box-ordinal-group: 0; with order:-1 !important;
As replaced:
/* Move Find Bar above the page - I added 07-17-2020 */ .browserContainer > findbar {
order:-1 !important;
Restarted FireFox - no change
Rebooted desktop - no change
Did i do something wrong?
Do you have other code in userChrome.css and is this feature still enabled ? Is the file still in the correct location and doesn't have a hidden .txt file extension ?
Can you post the full content of userChrome.css ?
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 with the random name (xxxxxxxx.default-release).
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 the profile folder with the random name (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.
More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-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://support.mozilla.org/en-US/kb/about-config-editor-firefox
Sorry for the delay in responding, eyes are still adapting to the surgery and not everything I type of read is anywhere near 100%.
userChrome.css is posted below (with out your suggested changes).
userChrome.css must be enabled since everything (except the Find toolbar) works just like it has for the last 2 or so years. I haven't had to change the file in that amount of time and I'm not up to re-learning just yet.
Ditto for the location.
Also, there are no other copies, anywhere, of userChrome.css.
- * * * *
/*AGENT_SHEET*/ /* Firefox 57+ userChrome.css tweaks ****************************************************/ /* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **/ /* by Aris (aris-addons@gmx.net)*********************************************************/ /* Github: https://github.com/aris-t2/customcssforfx ************************************/ /****************************************************************************************/ #personal-bookmarks { display: block; } #personal-bookmarks #PlacesToolbar { display: block; min-height: 0px; overflow-x: hidden; overflow-y: auto; max-height: 999px; } #personal-bookmarks #PlacesToolbar > hbox { display: -moz-stack !important; left: 0px; right: 0px; width: 100%; } #personal-bookmarks #PlacesToolbar #PlacesToolbarItems { overflow-x: visible; overflow-y: visible; } #personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box { display: block; } #personal-bookmarks #PlacesToolbar > .bookmark-item{ visibility: visible !important; } #personal-bookmarks #PlacesToolbar .chevron{ display: none; } #personal-bookmarks #PlacesToolbar > hbox > hbox{ overflow-x: hidden; overflow-y: hidden; } #personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"], #personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{ display: none; } #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{ padding-top: 2px; padding-bottom: 2px; /*margin-left: -4px !important; padding-right: 9.5px !important;*/ } #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]), #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] { padding-top: 2px !important; padding-bottom: 2px !important; /*-moz-padding-start: 4px; -moz-padding-end: 2px;*/ } #personal-bookmarks #PlacesToolbar toolbarseparator{ -moz-appearance: none !important; visibility: visible !important; display: inline; text-shadow: none !important; border-left: 3px solid ThreeDShadow !important; border-right: 3px solid ThreeDHighlight !important; vertical-align: middle; } #personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{ -moz-appearance: toolbarbutton; } #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) { max-height: 999px !important; } /* Tab bar below Navigation & Bookmarks Toolbars */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; box-shadow: none !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; padding-top: 0 !important; } /* Clean up spacing */ .titlebar-placeholder { display: none !important; } toolbarbutton.bookmark-item { padding-top: 2px !important; padding-bottom: 2px !important; } /* If you display either: (1) The title bar, or (2) On Windows, the menu bar You might not want the following extra space above the main toolbar. In that case, delete the following rule: */ #navigator-toolbox { padding-top: 20px !important; } /* Background for Light and Dark themes */ #main-window[lwthemetextcolor="bright"] #TabsToolbar, #main-window[lwthemetextcolor="dark"] #TabsToolbar { background-color: var(--chrome-secondary-background-color) !important; background-image: none !important; } #main-window[lwthemetextcolor="dark"] .scrollbutton-up, #main-window[lwthemetextcolor="dark"] .scrollbutton-down, #main-window[lwthemetextcolor="dark"] .tabs-newtab-button, #main-window[lwthemetextcolor="dark"] #new-tab-button, #main-window[lwthemetextcolor="dark"] #alltabs-button { fill: var(--lwt-text-color) !important; } /* Left and right borders on Win 7 & 8, but not on 10 and later: */ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { /* Vertical toolbar border */ #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar { border-left: 1px solid hsla(240,5%,5%,0.3) !important;; border-right: 1px solid hsla(240,5%,5%,0.3) !important;; background-clip: padding-box; } } /* Override vertical shifts when moving a tab (9 Jan 2018) */ #TabsToolbar[movingtab] { padding-bottom: 0 !important; } #TabsToolbar[movingtab] > .tabbrowser-tabs { padding-bottom: 0 !important; margin-bottom: 0 !important; } #TabsToolbar[movingtab] + #nav-bar { margin-top: 0 !important; } /* Move Find Bar above the page*/ .browserContainer > findbar { -moz-box-ordinal-group: 0; } :root { --tab-min-height_tnot: 32px; } #print-preview-toolbar, #printedit-toolbar, #titlebar { -moz-box-ordinal-group: 0 ; } #navigator-toolbox #toolbar-menubar { -moz-box-ordinal-group: 1 ; } #navigator-toolbox #nav-bar { -moz-box-ordinal-group: 2 ; } #navigator-toolbox #PersonalToolbar { -moz-box-ordinal-group: 3 ; } #navigator-toolbox toolbar { -moz-box-ordinal-group: 10 ; } #navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100 ; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(1px + var(--tab-min-height_tnot)) ; } #TabsToolbar { position: absolute ; bottom: 0 ; width: 100vw ; } #tabbrowser-tabs { width: 100vw ; }
Okulungisiwe
This code is rather old and requires a lot of changes, so best would be to get the latest updates from Aris.
They might also be able to help you on the subreddit forum.