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

Martin Brinkmann
Jun 18, 2014
Firefox
|
26

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
How to remove the search bar from Firefox's New Tab Page
Article Name
How to remove the search bar from Firefox's New Tab Page
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.
Author
Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. Xi said on February 2, 2015 at 3:14 am
    Reply

    Only 2 rows are shown in new tab page. To view the additional one more row, we need to zoom out the page. This is a bug since whatever number of rows or columns is set on about:config should reflect in new tab page. If it is hidden, what is the use of setting values for it?

    Is there any workaround to get back Firefox 28 new tab page?

    Please help with a workaround if any available. But I don’t want addon/css editing/…I need workarounds just with about:config. I don’t want to mess my Firefox.

    Installed – Current version v35.0.1.

    1. Martin Brinkmann said on February 3, 2015 at 8:40 am
      Reply

      I suggest you install this add-on which enables you to display more on the new tab page: https://addons.mozilla.org/firefox/addon/new-tab-tools/

  2. Julen said on September 25, 2014 at 8:10 am
    Reply

    Worked fine. Great tweak, thanks!!

  3. rawr said on September 4, 2014 at 10:42 pm
    Reply

    Oh well… Thanks anyway.

    1. Martin Brinkmann said on September 4, 2014 at 11:46 pm
      Reply

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

      1. rawr said on September 5, 2014 at 12:30 am
        Reply

        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.

      2. Martin Brinkmann said on September 5, 2014 at 8:34 am
        Reply

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

  4. rawr said on September 4, 2014 at 6:28 pm
    Reply
    1. Martin Brinkmann said on September 4, 2014 at 8:14 pm
      Reply

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

      1. rawr said on September 4, 2014 at 9:23 pm
        Reply

        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…

      2. Martin Brinkmann said on September 4, 2014 at 10:15 pm
        Reply

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

  5. rawr said on September 4, 2014 at 5:35 pm
    Reply

    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.

    1. Martin Brinkmann said on September 4, 2014 at 5:48 pm
      Reply

      Hm, have you restarted Firefox?

      1. rawr said on September 4, 2014 at 5:56 pm
        Reply

        Yup… Multiple times.

      2. Martin Brinkmann said on September 4, 2014 at 6:21 pm
        Reply

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

  6. rawr said on September 4, 2014 at 5:11 pm
    Reply

    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?

    1. Martin Brinkmann said on September 4, 2014 at 5:12 pm
      Reply

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

  7. Oleg said on August 18, 2014 at 1:52 pm
    Reply

    “#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!

  8. Ian said on August 1, 2014 at 10:06 am
    Reply

    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. Jason said on July 31, 2014 at 4:52 am
    Reply

    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?

  10. David said on July 23, 2014 at 2:55 pm
    Reply

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

  11. Robbie Hatley said on June 25, 2014 at 8:49 am
    Reply

    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.

  12. mma173 said on June 18, 2014 at 5:57 pm
    Reply
  13. Jay said on June 18, 2014 at 5:55 pm
    Reply

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

  14. Ray said on June 18, 2014 at 5:54 pm
    Reply

    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.

  15. nonqu said on June 18, 2014 at 10:12 am
    Reply

    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.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.