How to Remove Search Box from New Tab Page in Mozilla Firefox?

If you are a Mozilla Firefox user and have upgraded your web browser to the latest 31.0 version, you might have noticed the updated "New Tab" page.

In the new version of Mozilla Firefox, a new Search box has been added at the top of the New Tab page as shown in following image:

Google_Search_Box_New_Tab_Page_Mozilla_Firefox.png

Although this new search box may help some users in quickly searching on Internet but many people are not liking this change. Mozilla Firefox already contains a search box in the standard toolbar, so having another search box on New Tab page looks unnecessary. Unfortunately Mozilla didn't provide any way to disable or remove this new Search box from New Tab page.

Although you can customize New Tab page URL using about:config page and change it to open Homepage, blank page or any desired website URL with the help of this guide but some people might want to have the default New Tab page but without search box.

So today in this tutorial, we are going to tell you a simple way to get rid of the Search box or Search bar from New Tab page in Mozilla Firefox web browser.

If you also want to hide Search box from New Tab page, check out following simple steps:

1. First of all you'll need to create a new file userContent.css in "chrome" folder present inside your Firefox user profile folder. If you are not aware of this file and profile folder, check out following article for more information:

All About Mozilla Firefox Profile Folder and Configuration Files

2. Once you create the userContent.css file or if it already exists, open it in Notepad.

3. Now paste following piece of code in the file. If the file already exists and contains some text, paste the code at the end of the file:

/* Disable Search box in New Tab page */
@-moz-document url(about:newtab)
{
#newtab-search-container, #newtab-search-logo { display:none !important; }
}

4. After pasting the above code, save the file and run Mozilla Firefox again. Now you'll not see the Search box in New Tab page as shown in following image:

Remove_Google_Search_Bar_New_Tab_Page_Mozilla_Firefox.png

Thanks to our reader "Travis The Firefox User" for sharing this tip...

PS: If you want to customize thumbnails size on the new tab page, you can use following code in userContent.css file:

.newtab-cell {
max-height: 150px;
max-width: 250px;
}

Just change the px according to your requirements. Thanks to our reader "The Riverboat Captain" for sharing this code...

You can also customize New Tab page background image, website tiles/thumbnails images, change number of rows/columns, etc with the help of following tutorial:

Customize New Tab Page Appearance in Mozilla Firefox Web Browser





Share this article: Facebook | Twitter | Google+ | Reddit | Tell a friend

Posted in: Mozilla Firefox


Other similar articles that may interest you


Comments

  • Thank you so much. You rocks.

  • Nice trick. I'll play with the CSS code to customize the page acc. to my requirements. ;)

  • There's another way to do this also, the Ghacks way:

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

  • The solution to remove the Search Bar on the new tabs as described here does not work. Use the Add-On New Tab Tools. Works like a dream and is very quick to install.

    Link: http://www.askvg.com/customize-new-tab-page-in-mozilla-firefox-change-background-image-add-new-tiles-and-much-more/

  • ^^ The tutorial worked for me without any problem. :)

  • It works, but keeps an emty space on the top: lh3.googleusercontent.com/-wLUqZgTXeM4/U9AXFh3sOSI/AAAAAAAAATA/KeeVGWkyX80/s1152/Firefox_new_tab_page.png

    Any ideas how to remove it? I‘m gonna check the add-on which Alan above me recommended for now.

  • BTW, I was using a user style (userstyles.org/styles/95775/new-tab-full-screen) for Stylish in the screenshot.

  • Sorry if my messages look like spam, but I‘ve just tried the add-on, and it‘s great! It even adds a special launcher (it can be turned off).

  • I have a few more secrets for firefox, AskVG :) I'd be happy to share them :)

  • Nice. I always like your blog and its very useful !!!!

  • Any similar tweak for Chrome or Opera?

  • Thanks! been looking for this!!!!!!!

  • @Travis The Firefox User
    Definitely share them!

  • @MDJ

    Shared them to VG. We should get a new article in a few hours to a day :)

    I'm a volunteer contributor for Firefox and have tons of tweaks :) , I also look for add ons that bring back old features that were removed in past versions. (Cant wait tell i find customize windows) :D

  • Main reasons why I don't use Firefox is that you can not change search engines as easily as Chrome does, and secondly is that uBlock does not have a Firefox Add-on yet.

    And btw, my main browser is not Chrome, it's Chromium. I just used word Chrome as en example above.

  • @TheAslan

    That's completely wrong. In Firefox you go to the search bar and click the icon and click Google. In chrome you have to go to the menu and open up a newpage, then choose from a window and click save.

  • I use Firefox mostly for great functioning with loads of tabs open at the same time.

  • @MDJ

    VG said they would try to publish them tomorrow :D Don't forget to check AskVG.com tomorrow!!

  • @Travis The Firefox User

    Of course! :D

  • The chrome folder was missing so i created a new folder with the userContent.css inside the Firefox user profile folder.
    Your solution is much better and easier than messing around with existing files and about:config

  • For some reason the userChrome.css route isn't working for me. I created the folder and the file and added the code but the search bar remains and is driving me nuts! Anybody have any idea what I might be doing wrong? Or maybe there's an alternate route to removing it?

  • VG

    ^^ Its userContent.css not userChrome.css.

  • If "chrome" folder doesn't exist in %appdata%\Mozilla\Firefox\Profiles\your_profile_folder, create the folder, and then put the file "userContent.css" into it.
    Restart Firefox to apply changes.
    Thank you, friend! :)

  • I was able to create the file, but I have no idea what it means to "open userContent.css file in Notepad." How do you open a file like that in Notepad? I tried, just for the heck of it and it simply wouldn't work. I'm not a particularly sophisticated computer user, so would appreciate as simple an explanation as possible. I really, really, really hate that search bar mucking up my new tabs! Thanks.

  • A really stupid feature,why there is a search box if we can already search in two ways?

  • VG

    @Diana B
    The .CSS file will open in Notepad without any problem. Alternatively, you can open Notepad and then drag-n-drop CSS file inside it.

  • VG, when I try to drag and drop the CSS file into Notepad, a window pops up and says "access is denied."

  • VG

    ^^ Do as following:

    First open Notepad and paste the code. Now save the file with name "userContent.css" (including quotes). Then copy the file to the above mentioned folder.

  • Notepad will not let me save anything with a file name that contains quotation marks. Also, wouldn't it have a .txt extension, anyway? Does that matter?

  • VG

    ^^ If you put double-quotes before and after filename, Notepad will allow you. If you don't use double-quotes, the file will be saved as TXT for example, userContent.css.txt.

    If you don't want to use double-quotes, first disable "Hide file extensions for known filetype" option in Folder Options in Windows Explorer. Then save the file in Notepad. Now check whether the file name is userContent.css.txt or userContent.css. If it contains .txt part, rename the file and remove .txt part from the name.

  • I released my code on userstyles.org! Here's the link! userstyles.org/styles/103854/firefox-31-hide-new-tab-search

  • You can actually use this file to do more, if you wish. I wanted to reduce the size of the thumbnails to fit more on to the new tab page. With a bit of poking around, I found it is possible.

    Add

    .newtab-cell {
    max-height: 150px;
    max-width: 250px;
    }

    ..to the userContent.css file. Play around with the pixel height and width.

  • I was thinking if I can do that, but never thought it possible actually. Great topic and thanks a lot!

  • Doesn't work for me!

  • Is there a way to set the rows and columns.

    I would like to keep the 3 rows and 3 columns regardless of the window size.

  • !!! if you creating "chrome" directory it must be lower case.

    for customize row and columns go to about:config and edit keys:
    - browser.newtabpage.columns
    - browser.newtabpage.rows

    if you have problems with notepad try open new tab in firefox and in address bar type:
    data:text/html,
    now you have editable page, type custom content of userContent.css and save page as userContent.css to firefox profile chrome directory.

Leave a Comment

(required)