How to remove the search bar from Firefox’s New Tab Page

If you are running at least Firefox 31 -- which means Beta, Aurora or Nightly -- then you may have noticed a change to the new tab page of the browser.

Previously, nine webpage thumbnails were displayed on the page to provide users with quick access to often visited or pinned sites.

As you may know, Firefox uses the browsing history to populate the list by default but gives you control over it so that you can remove any site listed here and replace it with sites that you prefer to see.

Since you can pin sites on the page, you can make sure that your favorite websites are always listed on the page.

Anyway, with the change came the addition of a search form on it. The search form uses the default search provider of the browser which is Google Search unless you have modified it and changed it to a different provider instead.

firefox new tab page

While some users may appreciate the search on the page, others may see it as redundant especially if they display the search bar in the browser's interface.

There is no direct option to remove search from Firefox's new tab page, but as always, there are hacks that you can make use of.

The following requires no third-party add-ons:

  1. Type about:support in Firefox's address bar and hit enter.
  2. Click on the Show Folder button to open the profile folder.
  3. Switch to the Chrome subdirectory here. If it does not exist, create it.
  4. Open userContent.css. If it does not exist, create a new plain text document and rename it accordingly.
  5. Paste the following information into the file and save it afterwards

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:newtab") {
#newtab-search-container {
display: none !important;
}
}

Restart the Firefox web browser afterwards. When you open the new tab page in the browser now, the search form is no longer displayed on it.

firefox no search

To undo the change, delete the information in the userContent.css file again and restart Firefox afterwards.

Instead of modifying the userContent.css file you can alternatively install a new tab page add-on. Here is a selection of extensions:

  • Speed Dial [FVD] - The extension has a lot to offer. From displaying different information on the new tab page such as recently closed or most visited sites to synchronization and options to block urls or domains that you don't want to see listed on it.
  • Moment - A minimalistic new tab page that displays the current time and weather information on the page.
  • New Tab Tools - Uses the full width of the page to display as many website thumbnails as possible. Adds a sidebar with direct links to Firefox internal pages such as downloads, sync, settings or add-ons.
Summary
Article Name
How to remove the search bar from Firefox's New Tab Page
Author
Description
The guide makes available CSS code to remove the search bar on the Firefox browser's New Tab Page that Mozilla introduced in Firefox 31.
Please share this article

facebooktwittergoogle_plusredditlinkedinmail


Responses to How to remove the search bar from Firefox’s New Tab Page

  1. nonqu June 18, 2014 at 10:12 am #

    You can also add this to a new style if you are using Stylish. I have more UI fixes there than website enhancements.

    The main advantage is that it's easy to track and synchronize between browsers. And if Mozilla break something (which they undoubtedly will do) you can easily disable or modify the style.

  2. Ray June 18, 2014 at 5:54 pm #

    Meh, I've disabled the thumbnails whenever a new tab is opened so this doesn't apply to me :)

    If you're interested, change browser.newtabpage.enabled to false in about:config.

  3. Jay June 18, 2014 at 5:55 pm #

    Happy to say that (thanks to this blog), I am now using Pale Moon and life couldn't be better.

  4. mma173 June 18, 2014 at 5:57 pm #

    This one is my favorite.
    https://addons.mozilla.org/en-US/firefox/addon/new-newtab-tab/

  5. Robbie Hatley June 25, 2014 at 8:49 am #

    Excellent! Yes, THIS fix works. (Unlike several other fixes for this bug which I've seen posted on the web, generally involving a file called "userChrome.css", which does absolutely nothing and does not fix the bug.)

    I just noticed the "new search bar wipes out a third of my thumbnails on NewTabPage" bug tonight, but on reading about it, it's been around for at least a month.

    Some bugs are hardware, some firmware, some software, some wetware. THIS bug, however, appears to be a "CorpWare" bug, in that it was done to us on-purpose by Mozilla as blatant social engineering, in order to increase traffic to Google, because Google gives CA$H to Mozilla in exchange for incorporating "Google Search" in as many places in Firefox as possible. And unfortunately, CA$H now obviously trumps usability in the minds of Mozilla executives. Some turn-around at the top levels, replacing greed-corrupted execs with functionality-minded execs may reduce instances this type of bug in the future.

  6. David July 23, 2014 at 2:55 pm #

    I just got the upgrade to FF 31 (Linux Mint 13 LTS) - got annoyed immediately - found this fix. It works! :) Many thanks!

  7. Jason July 31, 2014 at 4:52 am #

    Why do we need a search bar under the search bar, and that takes up a ridiculous amount of room? Was this designed by idiots for idiots?

  8. Ian August 1, 2014 at 10:06 am #

    I agree with Jason. Why is it that every update to Firefox brings with it idiotic changes that need to be manually removed?

    @-moz-document url(about:newtab){
    #newtab-margin-top, #newtab-search-container, #newtab-margin-bottom { display: none !important; }
    }

  9. Oleg August 18, 2014 at 1:52 pm #

    "#newtab-margin-undo-container," can add 1 row.
    @-moz-document url("about:newtab") {
    #newtab-margin-undo-container, #newtab-margin-top, #newtab-search-container, #newtab-margin-bottom { display: none !important; }
    }

    Try for modify size thumbnails:
    @-moz-document url("about:newtab") {
    #newtab-grid {height: 650px !important; max-height: 650px !important; }
    .newtab-cell {height: 9% !important; width: 13% !important; }
    }
    https://support.mozilla.org/ru/questions/1011835

    For modify color, if thumbnails have small contrast:
    @-moz-document url("about:newtab") {
    .newtab-title { color:black !important; }
    #newtab-grid { height: 800px !important; max-height: 800px !important; background-color: #bbb; }
    }

    Full:
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url("about:newtab") {
    #newtab-margin-undo-container, #newtab-margin-top, #newtab-search-container, #newtab-margin-bottom { display: none !important; }
    #newtab-grid { height: 800px !important; max-height: 800px !important; background-color: #bbb; }
    .newtab-title { color:black !important; }
    .newtab-cell {height: 11% !important; width: 13% !important; }
    }

    Many thanks!

  10. rawr September 4, 2014 at 5:11 pm #

    It does nothing for me. I created that Chrome subdirectory in both mozilla folders (the one the desktop shortcut refers to and the one from the about:support link I typed in the browser), and then the file. I tried doing that with one folder at a time, now I have it in both, but it doesn't work. Could someone explain to me what I'm doing wrong?

    • Martin Brinkmann September 4, 2014 at 5:12 pm #

      Can you post a screenshot that shows the folder and file in Windows Explorer?

  11. rawr September 4, 2014 at 5:35 pm #

    Thanks for such a quick response.
    http://tinypic.com/view.php?pic=ny6wl0&s=8
    Picture of that folder and the contents of the file. The folder is the one this article tells to use and the file is apparently a better version of what you recommend - taken from the official Mozilla forum. It doesn't work with the lines you recommended either, if it matters anything.
    /edit
    Oh right, I tried both with and without the aesthetic add-on I use.

    • Martin Brinkmann September 4, 2014 at 5:48 pm #

      Hm, have you restarted Firefox?

      • rawr September 4, 2014 at 5:56 pm #

        Yup... Multiple times.

      • Martin Brinkmann September 4, 2014 at 6:21 pm #

        Can you make a screenshot of the actual file in the Chrome folder?

  12. rawr September 4, 2014 at 6:28 pm #

    http://tinypic.com/view.php?pic=n3sn5u&s=8

    • Martin Brinkmann September 4, 2014 at 8:14 pm #

      Have you tried to enclose about:newtab with ""?

      @namespace url(http://www.w3.org/1999/xhtml);
      @-moz-document url("about:newtab") {
      #newtab-search-container {
      display: none !important;
      }
      }

      • rawr September 4, 2014 at 9:23 pm #

        Still doesn't work. Are you sure creating that file just like that in a brand-new folder can work as if they were always there?
        I also tried to remove that search field using firefox's developer tools. I managed to do that, but I guess it works just like screwing around with the Inspect element feature, since it didn't save...

      • Martin Brinkmann September 4, 2014 at 10:15 pm #

        Yes that is all you have to do. Don't know why it is not working for you.

  13. rawr September 4, 2014 at 10:42 pm #

    Oh well... Thanks anyway.

    • Martin Brinkmann September 4, 2014 at 11:46 pm #

      I have uploaded how it looks on my end here: http://imgur.com/5wRpOTG

      • rawr September 5, 2014 at 12:30 am #

        Alright, I figured that since the icon isn't shown as in your screenshot, the system doesn't read it as a proper config file, so I manually edited the extension (turns out it was saved as .css.txt) and it works now. Thanks a bunch.

      • Martin Brinkmann September 5, 2014 at 8:34 am #

        Ah, that was it. Great that you figured it out!

  14. Julen September 25, 2014 at 8:10 am #

    Worked fine. Great tweak, thanks!!

Leave a Reply