Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I get the old drop-down text menu for the search bar back in Firefox Quantum?

  • 12 replies
  • 4 have this problem
  • 662 views
  • Last reply by springheel

more options

With hacks still pending on the new release of Firefox Quantum, I almost have it customized/personalized so that it works for me. That is to say I'm visually-handicapped and there are some things I need modified.

I would like to have the "classic" drop-down text menu back for the search bar. Short of deleting all the engines I have accumulated as well as disabling the "add" feature.

You see--I do not recognize most of the icons, and they certainly can't be "read" by a text-reader, though I haven't actually tried but they are images and Not text. I relied on the old menu to be text and I am sorry but I am simply not familiar with every sites icon except the most obvious.

I did the hack in about:config in previous versions and it has always translated to the next update, however, it doesn't work in Quantum.

If anyone knows a way to modify that feature I would certainly appreciate the help.

I have, however, created a Chrome code to put the tabs back on the button. I had given up on this in the last version. Personally I think if the tabs are on top they sh9ould round-over the edges thus looking like "folders," which actually makes sense. However, now that I've moved them back to the bottom, and thanks to Mozilla moving most of the menu bar options into the "Hamburger Menu" I have done away with everything except the address bar & tabs.

It actually looks pretty slick, though I use the default or dark theme and wish there was a little more definition as to which tab was actually open. Not really fond of the little blue bar above the open tab in the dark theme. It is what it is, but I would simply the open tab be a couple of shades lighter in the default them.

Light themes are not an option for me.

Thank you.

Attached screenshots

Chosen solution

Since you are already familiar with userChrome.css, could you take a look at this "configurator" and see whether it works for your search bar?

https://www.jeffersonscher.com/gm/search-bar-names.html

Note: The function of the buttons is different from the version you have been using (the pre-Firefox 34 bar). Clicking a button will run a search on that site using the contents of the search bar without changing your default search engine. To change your default search engine, right-click the site and choose Set As Default Search Engine.

Read this answer in context 👍 2

All Replies (12)

more options

Chosen Solution

Since you are already familiar with userChrome.css, could you take a look at this "configurator" and see whether it works for your search bar?

https://www.jeffersonscher.com/gm/search-bar-names.html

Note: The function of the buttons is different from the version you have been using (the pre-Firefox 34 bar). Clicking a button will run a search on that site using the contents of the search bar without changing your default search engine. To change your default search engine, right-click the site and choose Set As Default Search Engine.

more options

Hey J.

I'm not sure how familiar I am or not.

Frankly I felt I was flirting with disaster by apply the Chrome code, and yet it turned out better than I expected & wasn't that difficult. Though I'm having second thoughts and am still thinking about rounding the corners of the tabe; perhaps that would help improve their definition.

I have noticed that the search bar works differently. It uses the default unless I actually click on one of the icons. I have also looked at your page because you posted it in my other question.

Let me study your 'configurator a little bit and I wil, see how much damage I can do.

more options

It didn't take.

In theory it should have worked. I used the path as I did to reverse the address bar & tab lines. Exported the code ito a css file, even checked the extension, and placed it in the chrome folder in my profile folder where i placed the other code, and then I rebooted. However, I am still seeing the Quantum default veew. : ( What did I do wrong? Or did I?

more options

springheel said

Exported the code ito a css file, even checked the extension, and placed it in the chrome folder in my profile folder where i placed the other code, and then I rebooted.

When you save the file, it has a name like search-bar-names-std.css which is not a name that Firefox looks for.

If you didn't have a userChrome.css file, you could rename it to userChrome.css.

Since you already have a userChrome.css file, you can add an @import line at the top of userChrome.css with the actual name of the file you downloaded. Both files should be in the chrome folder. For example:

@import url("search-bar-names-std.css");

Sample screenshot attached.

When Firefox starts up and loads userChrome.css, it will find that @import and also apply that style sheet.

If you are using an @namespace line in your userChrome.css file, the @import needs to be above that, first line of the file.

more options

I'm tring to understand this, so I need to put @import in front of the file I imported from your program in order for it to work, at the same time--do I need to put @import in front of the code that I used to invert the address bar & tab line? Because it seems if I simply put it in front of your file, in cancels out the css that I used to invert the address baf & tab line.

On top of that, I've applied this Nightly them, below my current css if only to round the corncers of the tabs, (let me see if I can confuse us both a little more) the so called them took and the tabs are rounded, howwever, they are also white, and that is not what I wanted, I simply wanted a lighter shade of gray, so that I could retain the color aspects of the default theme.

Have I confused you yet?

logically, i have this idea that I need to add the @import to the code I used to invert the tabs. Right?

And yet I have this Nightly theme that I'm dealing with only in the sense that though it is applied, I am trying to find a color code line, of which I cannot seem to find.

You're using the Developer browser. At least in your screenshot, it seems. I actually installed that as well, in hopes, that I might learn something.

God this is like Algebra, it makes sense and yet I can't completely wrap my head around it.

more options

And now I seem to have lost my curved tabs. Will work on this tomorrow. I had them once. As well as the search menu. Though I didn't quite have it, I understand what you're saying. Thanks for the help J. I will keep working on it. Don't know why I lost the curvy tabs, but I still need to find a way to change the selected tab to a different color than white. That just doesn't even look like it belongs. Of course, I got to get them to show again.

more options

Double oops

Modified by Shadow110

more options

@ Pkshadow

It's all good. Actually I often hid the menu bar; it's easy enough to bring up. But being visually-handicapped there is a certain "look" & contrast that I prefer.

I always figure it out--eventually.

more options

I'm using Nightly on this computer to work with the new UI because the main browser is still Firefox 56 (while NoScript is being debugged). Firefox 57 is very similar to Nightly.

springheel said

so I need to put @import in front of the file I imported from your program in order for it to work, at the same time--do I need to put @import in front of the code that I used to invert the address bar & tab line? Because it seems if I simply put it in front of your file, in cancels out the css that I used to invert the address baf & tab line.

The

@import url("search-bar-names-std.css"); 

(or whatever the additional file name is) should be on its own line at the top of the userChrome.css file.

Everything else that you already had in the file would just move down a line.

That's it. That's all you need to do to get Firefox to read the additional file.

Did you ever watch this video: https://vimeo.com/242513527 -- the part where I use @import starts around 2:30.

more options

I'm assuming those are your videos. I actually downloaded them so that I could give them a better look. I also downloaded and installed the Notepad ++, even though I have no idea how to use it, but I can't say it isn't a better editor than regular notepad.

It occurred to me that perhaps I corrupted my own css file by adding not only the NIghtly code (because I cannot get the rounded tabs back, as well as the file from your page from your page.

I'm sure you would know better than me. Perhaps I should have simply pasted the code in full. But I am not a programmer.

With all the information you've given me, as well as several links to Chrome css forms that I have collected from my question about a hack to move the page display function into the hamburger menu, I obviously have some homework to do. Even though I was hoping for a simply hack.

That said, I am happy that Mozilla allows us to customize the browser. I'm not sure I can say that about IE, and I personally don't even use Chrome, gave up on it a long time ago. Too slow.

In the end, I'm not completely unhappy with what I've got so far. I have always preferred the tabs on the bottom, reminds me a bit of the Netscape days. In your video you mentioned something, I believe, and I need to watch it again, about having only two lines of function looking a little sparse that one might add the title bar, though a title bar isn't in the options of Quantum, I'm sure there's a way, so I can't say by leaving the menu bar open, doesn't make it look more fuller and still give me easy acess to the page style feature.

Short of the issue I still have with the search bar.

I think the only other thing I wish I could accomplish is to give the "selected tab" a little more contrast. I"ts my vision to blame for that. And I simply don't care for the blue line in the dark them, perhaps if it were simply white I would be happy.

Anyway, I have a lot of material to try to digest today.

I hope to hear back from you. I could learn a lot from you, though I don't know if I can apply everything you teach me.

Thank you once again.

more options

This is the css I used to put the tabs on the bottom:

@import url (#TabsToolbar{ -moz-box-ordinal-group: 2; } #nav-bar{ border-top-width: 0px !)important;

If I swap that css out for yours, yours works, though I find the bright breen plus sign annoying, but it changes to a drop down with an icon & text.

if I put the other code in, even with the @import, it cancels your code out and the tabs are still at the top.

Tabs only go to the bottom, so it seems, if I used the css on it's own.

However, I did find and paste the entire css for the Nightly theme below the tabs below code, and both worked, the tabs were stayed on the bottom and were rounded over but I don't care for the selected tab being full-out white, I would have preferred simply a couple shades lighter contrast.

However, when I added your css on top of all that, even with the @import prefix, it canceled Everything out.

Just for shits & giggles, I"m going to find that Nightly theme again and add it below your code just to see what it does. I should save it anyway.

more options

@ jscher2000

I took the tabs on bottom code completely out; I had found that hack via Youtube.

Consequently, I took the file I made from your "configurator) and rewrote it as userChrome.css and replaced the other one I had.

The menu took; it views in text, I may not like the bright green + sign or that th4e text renders in that lime green color either, but I will return to your page and see if I can make tweaks to it. If not, I'll learn to live with it.

That said, I found the Nightly css for the Dark theme and pasted it below your css. I did not use the @import prefix anywhere in either code, simply pasted the Nightly code a couple of lines below yours and it accepted it, so far, without any problems, in fact, the rounded tab took on the color contrast of the selected tab too on the contrast I was trying to achieve. That or perhaps I've simply become used to tabs on top, as long as they are rounded.

Aesthetics, what are you going to do? We all have our preferences.

I would still like to get Page Style into the Hamburger menu, but for the most part, this is how I had it looking before the upgrade. I'm happy.

I will continue to study CSS, even though I'm not necessarily a Developer, it fascinates me nonetheless.

I majored in Literature not Programing, Though there was a time I thought I wanted to do web design, the professor was discouraging, even though being visually handicapped, I may have been better than most because I have an overblown understanding of contrast and may have the best looking blogs online.

Thank you for your help. I will mark it as solved, but I may continue to play with your 'configur' to see if I can get a more appealing view, but for now--I'm happy with what I got.

I hope you continue the videos on Vimeo & I wish you the best of luck and hope to see you around--under better circumstances--of course.

Happy Holidays.