X
Tap here to go to the mobile version of the site.

Support Forum

change find bar back

Posted

is there anyway to get the old find bar back? i tried looking in about:config and searching online but couldn't find anything. i was hoping you could customize it like the other toolbars and i could remove the flexible space or move the controls around.

does mozilla do usability tests? i doubt they do because there is no way the new find is easier to use or an upgrade over then the old one. i really don't want to install an add-on just to make the find bar usable again. this is almost as bad as when they removed the new tab option from the tabs context menu (something chrome has). thanks.

why the new find bar is horrible.

  • the find next/previous occurrence buttons are tiny and much harder to click. there is no reason for them to be so small because there is plenty of unused space.
  • the find next occurrence was moved farther away from the textbox. i just about always want to use the find next occurrence option first.
  • highlight all, match case and the X to close the find bar are all the way on the opposite side. with ff maximized on a widescreen monitor that is nowhere near the textbox and next/previous buttons.

just to remind you how much better the old find bar was. everything about the top bar is better and more user friendly.

http://s11.postimg.org/qsc5piwr7/ff_find.png

is there anyway to get the old find bar back? i tried looking in about:config and searching online but couldn't find anything. i was hoping you could customize it like the other toolbars and i could remove the flexible space or move the controls around. does mozilla do usability tests? i doubt they do because there is no way the new find is easier to use or an upgrade over then the old one. i really don't want to install an add-on just to make the find bar usable again. this is almost as bad as when they removed the new tab option from the tabs context menu (something chrome has). thanks. why the new find bar is horrible. *the find next/previous occurrence buttons are tiny and much harder to click. there is no reason for them to be so small because there is plenty of unused space. *the find next occurrence was moved farther away from the textbox. i just about always want to use the find next occurrence option first. *highlight all, match case and the X to close the find bar are all the way on the opposite side. with ff maximized on a widescreen monitor that is nowhere near the textbox and next/previous buttons. just to remind you how much better the old find bar was. everything about the top bar is better and more user friendly. http://s11.postimg.org/qsc5piwr7/ff_find.png

Modified by jonjonjon

Chosen solution

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.

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

@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.

Read this answer in context 21

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.9 r900
  • 5.1.20913.0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0

More Information

Application Basics
------------------
Name: Firefox
Version: 25.0
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0
Extensions
----------
Name: Adblock Plus
Version: 2.4
Enabled: true
ID: {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}
Name: NoScript
Version: 2.6.8.4
Enabled: true
ID: {73a6fe31-595d-460b-a920-fcc0f8843232}
Important Modified Preferences
------------------------------
accessibility.typeaheadfind.flashBar: 0
browser.cache.disk.capacity: 262144
browser.cache.disk.enable: false
browser.cache.disk.smart_size.first_run: false
browser.cache.disk.smart_size.use_old_max: false
browser.cache.disk.smart_size_cached_value: 1048576
browser.cache.disk_cache_ssl: false
browser.cache.memory.max_entry_size: -1
browser.cache.offline.enable: false
browser.newtab.url: about:blank
browser.places.smartBookmarksVersion: 4
browser.search.context.loadInBackground: true
browser.search.useDBForOrder: true
browser.sessionstore.resume_from_crash: false
browser.sessionstore.upgradeBackup.latestBuildID: 20131025151332
browser.startup.homepage: https://www.google.com/
browser.startup.homepage_override.buildID: 20131025151332
browser.startup.homepage_override.mstone: 25.0
browser.tabs.closeWindowWithLastTab: false
dom.ipc.plugins.reportCrashURL: false
dom.mozApps.used: true
dom.w3c_touch_events.expose: false
extensions.lastAppVersion: 25.0
font.internaluseonly.changed: true
gfx.direct3d.last_used_feature_level_idx: 0
gfx.direct3d.prefer_10_1: true
media.cache_size: 1024000
network.cookie.cookieBehavior: 1
network.cookie.lifetimePolicy: 2
network.cookie.prefsMigrated: true
places.database.lastMaintenance: 1383329835
places.history.expiration.transient_current_max_pages: 104858
plugin.disable_full_page_plugin_for_types: application/pdf
plugin.expose_full_path: true
plugin.importedState: true
plugin.state.npfoxitreaderplugin: 0
privacy.cpd.downloads: false
privacy.cpd.history: false
privacy.cpd.offlineApps: true
privacy.cpd.siteSettings: true
privacy.donottrackheader.enabled: true
privacy.sanitize.migrateFx3Prefs: true
privacy.sanitize.timeSpan: 0
security.warn_viewing_mixed: false
storage.vacuum.last.index: 1
storage.vacuum.last.places.sqlite: 1381247065
Graphics
--------
Adapter Description: Intel(R) HD Graphics 4000
Adapter Drivers: igdumdim64 igd10iumd64 igd10iumd64 igdumdim32 igd10iumd32 igd10iumd32
Adapter RAM: Unknown
Device ID: 0x0162
Direct2D Enabled: true
DirectWrite Enabled: true (6.2.9200.16571)
Driver Date: 7-29-2013
Driver Version: 9.18.10.3257
GPU #2 Active: false
GPU Accelerated Windows: 1/1 Direct3D 10
Vendor ID: 0x8086
WebGL Renderer: Google Inc. -- ANGLE (Intel(R) HD Graphics 4000 Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemote: false
AzureCanvasBackend: direct2d
AzureContentBackend: direct2d
AzureFallbackCanvasBackend: cairo
AzureSkiaAccelerated: 0
JavaScript
----------
Incremental GC: true
Accessibility
-------------
Activated: false
Prevent Accessibility: 0
Library Versions
----------------
NSPR
Expected minimum version: 4.10.1
Version in use: 4.10.1
NSS
Expected minimum version: 3.15.2 Basic ECC
Version in use: 3.15.2 Basic ECC
NSSSMIME
Expected minimum version: 3.15.2 Basic ECC
Version in use: 3.15.2 Basic ECC
NSSSSL
Expected minimum version: 3.15.2 Basic ECC
Version in use: 3.15.2 Basic ECC
NSSUTIL
Expected minimum version: 3.15.2
Version in use: 3.15.2

cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

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

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

Modified by cor-el

Question owner

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?

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?
Morisato 0 solutions 2 answers

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.

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.
cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

(see my next reply for updated code)

(see my next reply for updated code)

Modified by cor-el

cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

Chosen Solution

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.

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

@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.

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 <pre><nowiki>@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 */</nowiki></pre> ''(you can consider to use "Prev" instead of "Previous" to give both buttons the same size)'' edited to update the code for current releases.

Modified by cor-el

Morisato 0 solutions 2 answers

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.

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.

Modified by Morisato

cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

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.

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.<br /> The first part adds the text to the buttons via :after {content} rules.<br /> The section that follows makes Firefox show the Highlight and Case sensitive buttons to the Quick Find bar that opens via / and '.<br /> 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.<br /> 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). <br /> You can choose to make the text field wider to see more of longer search terms.<br /> 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).<br /> 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.

Modified by cor-el

Helpful Reply

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

thanks this is what i was looking for. mozilla should reevaluate the useability of the new find bar.
NCEDAUS 0 solutions 9 answers

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?

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?
backbuttonsucks 0 solutions 10 answers

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.

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.

Modified by backbuttonsucks

soundwave 1 solutions 18 answers

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

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

Modified by soundwave

cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

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;}
I think that this will do by moving "Phrase not found" to the right.<br /> You can opt to change the color and/or background-color of the .findbar-find-status description box. <pre><nowiki>.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;}</nowiki></pre>
soundwave 1 solutions 18 answers

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;}

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. <pre> @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;} </pre>
NCEDAUS 0 solutions 9 answers

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; }

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; }
cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

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; }
The right border of the previous button is added by the "border-right-width:1px!important;" rule in the code.<br /> 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). <pre><nowiki>.findbar-container>hbox>.findbar-find-previous { border-right-width:1px!important; } .findbar-container>hbox>.findbar-find-next { border-right-width:1px!important; }</nowiki></pre>

Question owner

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; }
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. <pre> /* 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; } </pre>
NCEDAUS 0 solutions 9 answers
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

<blockquote>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).<br> <br> .findbar-container>hbox>.findbar-find-previous { border-right-width:1px!important; } .findbar-container>hbox><br> .findbar-find-next { border-right-width:1px!important; }</blockquote><hr> 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

Modified by NCEDAUS

psypuls 0 solutions 1 answers

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

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
cor-el
  • Top 10 Contributor
  • Moderator
12136 solutions 112749 answers

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;
}
See: *chrome://global/skin/findBar.css <pre><nowiki>.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; } </nowiki></pre>

Modified by cor-el

NCEDAUS 0 solutions 9 answers

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

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

Modified by NCEDAUS