(see my next post for updated code: /questions/976166#answer-497046)

not sure why it mangled the formatting of my first post. i didn't see a preview option for the initial post or an edit option so i could fix it. that's horrible.

thanks. anyway to get the X highlight all and match case back to where they were before?

I too would like to know if its possible in userchrome.css to move the Highlight/Match Case back to the original left position for easier clicking rather than having to move the mouse all the way left and then right on the browser to find something.

(see my next reply for updated code)

Here is a better code to move the spacer from its current position before the two buttons to a position after the two buttons to push the close button to the right end.

Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

• http://kb.mozillazine.org/Editing_configuration

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* add text to Previous and Next buttons */
.findbar-find-previous label:after { content: "Previous"; }
.findbar-find-next label:after { content: "Next"; }

/* more possible tweaks */
/* Quick find - show buttons */
.findbar-container>*, .findbar-container>hbox>* { display:-moz-box; }

/* move spacer to a position behind the Match case button */
.findbar-container>spacer { -moz-box-ordinal-group:2 !important; }

/* close button at far left */
.findbar-closebutton { -moz-box-ordinal-group: 0 !important; }
/* older Firefox versions may need this code */
/* .findbar-container>.findbar-closebutton { -moz-box-ordinal-group: 0 !important; margin-right:10px!important} */

/* adjust the width of the text field */
.findbar-textbox { width:30em !important; }

/* add a background color to the checked Highlight and Case sensitive buttons */
.findbar-highlight[checked]>label { background-color:#ff8 !important; }
.findbar-case-sensitive[checked]>label { background-color:#f88 !important; }
.findbar-case-sensitive[checked]+label { display:none !important; } /* hide "(Case sensitive)" label */

(you can consider to use "Prev" instead of "Previous" to give both buttons the same size)

edited to update the code for current releases.

Many thanks cor-el for the code. Would it be possible for you to explain what each option does? Besides the obvious one like Previous/Next text. The rest below I am not sure what it tweaks. Any images perhaps that you could provide as the end result of applying said code? I only really want the Highlight/Match case to be moved to the left as I can deal with the non-texted previous/next icons. I also would like to know if its possible to keep quick find open when I switch tabs as it closes for each tab I switch to. This would be okay if I just started typing where quick find would popup automatically but if I CTRL-F, you would think it would stay open since I forced it to open.

F3 will open the Find bar and /and ' will open the Quick find bar, so you do not need to use Ctrl+F all the time. ESC will close the Find bar when having focus.

I've added some comments to the last version I posted above that should make it easier to decide which parts to use.
The first part adds the text to the buttons via :after {content} rules.
The section that follows makes Firefox show the Highlight and Case sensitive buttons to the Quick Find bar that opens via / and '.
The next section moves the spacer to a position after the "Highlight" and"Case sensitive" buttons causing the "Highlight" button to be positioned right after the Next button.
You can choose to have the close button at the far left (-moz-box-ordinal-group:0) or at the far right (-moz-box-ordinal-group:3; remove the comment delimiters).
You can choose to make the text field wider to see more of longer search terms.
The last section gives a background color to the two buttons, so you notice immediately that you have pressed them (I usually tend to forget if I clicked Case sensitive).
You can also hide the (Case sensitive) text as you can have the buttons instead in Quick Find mode with one of the other sections.

thanks this is what i was looking for. mozilla should reevaluate the useability of the new find bar.

Thank you! Nice solution.

One more thing... Is there a way to change the order of the buttons? The old way was to have the down arrow (Next button) first. Can that be done?

There is another solution here with the "stylish" extension. However it does not make it the same as it was before and I am still in the market for the exact functionality restored ala oldbar, or status4evar. The stylish extension does revert the buttons, but it puts an ugly theme on it. Windows classic 4 life yo!

http://forums.mozillazine.org/viewtopic.php?f=38&t=2767037

such a shame. I was just this morning talking to a colleague about how awesome firefox FIND was and they go and break it when i restart firefox. wait a go guys! what the hell was the point of changing something that was working fine? if i wanted god damn vanity id install chrome!!!!! this is really getting tiring, finding hacks at every update. I am totally turning off the damn auto updater now.

I have no idea why these things bother me so much, but a small UI change is like nails grating on a chalkboard to me. I have a muscle memory of where i need to click and it actually gives me a toothache when i have to change things for no reason at all.

Furthermore, the thing I really don't get, is that firefox has the best most user friendly custom configuration interface with about:config of pretty much any application ever. Why not just use that to enable and disable things? why make people build extensions to fix shoddiness? so much potential. what a waste.

This is great cor-el, thanks a lot!

Could I trouble you to tweak it some more, to make it match the old firefox find bar as much as possible, specifically:

- have Next first, then Previous

- make it so "Phrase not found" appearing does not move the position of "Highlight All" (IIRC, sometimes I used to repeatedly click on Highlight All, to turn highlighting on and off, but with the way this is now, I can't because Highlight All jumps across to the right.

I'm pretty sure that Highlight All stayed still in the old find bar. (I can't check because I don't have 24 anymore)

Many thanks to cor-el or anyone who could continue with this so we can get our FF24 find bar back :D

I think that this will do by moving "Phrase not found" to the right.
You can opt to change the color and/or background-color of the .findbar-find-status description box.

.findbar-container>*,.findbar-container>hbox>*{display:-moz-box;}
.findbar-container>.findbar-find-status{-moz-box-ordinal-group:2!important;}
.findbar-container>spacer {-moz-box-ordinal-group:3!important;}
.findbar-container>.findbar-closebutton {-moz-box-ordinal-group:0!important;margin-right:10px!important;}
.findbar-container>hbox>.findbar-find-previous {-moz-box-ordinal-group:2!important;border-right-width:1px!important;}
.findbar-container>hbox>.findbar-find-next {border-right-width:0px!important;}

Wow thanks!

All credit to cor-el of course, but for the benefit of anyone searching for this, here is my slightly tweaked version of the full code, which combines cor-el's most recent additions, and has a less wide search box, a dark font color for when the buttons are highlighted (previously could not read the white on yellow) and a couple more comments in the code.

This is virtually identical to the old find bar now. Thanks again cor-el.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* add text to Previous and Next buttons */
.findbar-find-previous label:after { content: "Previous"; }
.findbar-find-next label:after { content: "Next"; }

/* position buttons so Next is before Previous */
.findbar-container>hbox>.findbar-find-previous {-moz-box-ordinal-group:2!important;border-right-width:1px!important;}
.findbar-container>hbox>.findbar-find-next {border-right-width:0px!important;}

/* more possible tweaks */
/* Quick find - show buttons */
.findbar-container>*,.findbar-container>hbox>* { display:-moz-box; }

/* move spacer to a position behind the Match case button */
.findbar-container>spacer { -moz-box-ordinal-group:3 !important; }

/* close button at far left */
.findbar-container>.findbar-closebutton { -moz-box-ordinal-group: 0 !important; margin-right:10px !important; }

/* close button at far right */
/* .findbar-container>.findbar-closebutton { -moz-box-ordinal-group:3 !important; } */

/* adjust the width of the text field */
.findbar-textbox { width:15em !important; }

/* add a background color to the checked Highlight and Case sensitive buttons */
.findbar-highlight[checked]>label { color:#222; background-color:#ff8 !important; }
.findbar-case-sensitive[checked]>label { color:#222; background-color:#f88 !important; }
.findbar-case-sensitive[checked]+label { display:none !important; } /* hide "(Case sensitive)" label */

/* move phrase not found over to the right */
.findbar-container>.findbar-find-status{-moz-box-ordinal-group:2!important;}

Thank you cor-el.

Even thought I asked to have the Next button moved to the left, I ended up just leaving it on the right because it loses the side borders when it's moved, and I like the look with them.

In any case, I'm thrilled with the final result. Here's what I finally settled on for myself.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* close button at far left */ .findbar-container>.findbar-closebutton { -moz-box-ordinal-group: 0 !important; margin-right:10px !important; }

/* adjust the width of the text field */ .findbar-textbox { width:10em !important; }

/* add text to Previous and Next buttons */ .findbar-find-previous label:after { content: "Prev"; } .findbar-find-next label:after { content: "Next"; }

/* move status msg (e.g. "Reached end of page, continued from top") to the right of Match Case button */ .findbar-container>.findbar-find-status{-moz-box-ordinal-group:2!important;}

/* move spacer to the right of status msg */ .findbar-container>spacer { -moz-box-ordinal-group:3 !important; }

/* hide "(Case sensitive)" label */ .findbar-case-sensitive[checked]+label { display:none !important; }

The right border of the previous button is added by the "border-right-width:1px!important;" rule in the code.
If you need a border for the next button then add it there as well or just don't use that rule (the border is already there).

.findbar-container>hbox>.findbar-find-previous { border-right-width:1px!important; }
.findbar-container>hbox>.findbar-find-next { border-right-width:1px!important; }

after messing around with the stuff cor-el posted i was able to get it to the point where i'm happy. at least until mozilla screws it up more in ff 26. thanks for the help.

i'm not sure why i couldn't get the previous button's right border to show when its moved to the other side of next. does it not have a border because it was supposed to be sharing the border with the next button? i ended up just drawing a solid line for the right border with the same color.

/* only needed once */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* add text to Previous and Next buttons */
.findbar-find-next label:after { content:"Next"; margin-left:2px!important; }
.findbar-find-previous label:after { content:"Previous"; margin-left:2px!important;}

.findbar-container>hbox>.findbar-find-next { border-right-width:1px!important; border-left-width:0px!important;}
.findbar-container>hbox>.findbar-find-previous { -moz-box-ordinal-group:2!important; border-right-width:1px!important; border-right: 1px solid #a0a0a0!important; }

/* Quick find - show buttons */
.findbar-container>*,.findbar-container>hbox>* { display:-moz-box; }

/* move spacer to a position behind the Match case button */
.findbar-container>spacer { -moz-box-ordinal-group:4!important; }
.findbar-container>.findbar-find-status { -moz-box-ordinal-group:3!important; }

/* close button at far left */
.findbar-container>.findbar-closebutton { -moz-box-ordinal-group:0!important; margin-right:10px!important; }

/* adjust the width of the text field */
.findbar-textbox { width:18em!important; }

/* add a background color to the checked Highlight and Case sensitive buttons */
.findbar-highlight[checked]>label { background-color:#ff8!important; }
.findbar-highlight { margin-left:15px!important; }
.findbar-case-sensitive[checked]>label { background-color:#f88!important; }

/* hide "(Case sensitive)" label */
.findbar-case-sensitive[checked]+label { display:none!important; }

The right border of the previous button is added by the "border-right-width:1px!important;" rule in the code. If you need a border for the next button then add it there as well or just don't use that rule (the border is already there).

.findbar-container>hbox>.findbar-find-previous { border-right-width:1px!important; } .findbar-container>hbox>
.findbar-find-next { border-right-width:1px!important; }

Well, for whatever reason, that has no effect on the borders. Just try setting the width to 10px, and you still won't see anything there.

No problem though, I'm very happy with how it is now. Thanks again.

Carl

Yes exactly, thank you for creating this topic I am strongly against the new Find bar, and if I could have only one veto chance of all firefox existance I would chose to revert and get the old Find bar back

See:

• chrome://global/skin/findBar.css

.findbar-find-previous {
  -moz-image-region: rect(0, 12px, 9px, 0);
  -moz-border-end-width: 0;
}

.findbar-find-previous:focus + .findbar-find-next {
  -moz-border-start-width: 0;
}

.findbar-find-previous:focus {
  -moz-border-end-width: 1px;
}

cor-el,

Please forgive my ignorance on this. I have no idea what to do with that information. Where is findBar.css located? I can put that in the address bar, and see the css code. But, how would I change it?

Carl