Pop Mood Daily
general /

How to customize firefox quantum’s new interface

How to customize firefox quantum’s new interface

Firefox Quantum

Firefox Quantum is here, and that is full of improvements including the new Photon interface. Photon replaces the “Australis” interface used since 2014 and offers a multitude of customization options. Which is good because there are some annoyances – like all that empty space on either side of the URL bar.

” data-medium-file=” data-large-file=” loading=”lazy” src=” alt=”Firefox Quantum” width=”640″ height=”295″ data-recalc-dims=”1″ data-lazy-srcset=” 650w, 300w” data-lazy-sizes=”(max-width: 640px) 100vw, 640px” data-lazy-src=” srcset=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″> Firefox Quantum

Quickly delete items from the toolbar (including empty spaces)

Let’s start with the simplest option: remove items you do not like in the toolbar. There are a lot of ways to do it, but here’s the quickest: right-click on any of the items (including blanks surrounding the URL bar), then select the command ” Remove from the toolbar ”

Note that spaces, just like the toolbar buttons, are not entirely functionless. You can move the window by clicking and dragging it, which can be useful because there is less space to click at the top of the window than in older versions of Firefox.

Add New Buttons and Rearrange Toolbar

You can also add buttons to the toolbar. Right-click the spaces (or anywhere else in the toolbar other than the URL bar) and choose the “Customize” option. This allows you to make larger changes to the user interface.

Keep in mind that if you upgrade from Firefox version 56, the default customization settings may be slightly different from those of a new installation. For example, Firefox got the search bar when I updated on my desktop, but it was missing when I made a fresh install on my laptop.

Important Notes:

It is easy to modify the elements of the user interface from the personalization window. Just click and drag the desired item in the toolbar to add it or drag items to the Customize menu to delete them. This includes empty spaces (or “Flexible”) surrounding the default URL bar.

You can also drag items into the side window to add them to the overflow menu (which you can access by clicking on the icon with two arrows). This is fine for tools that you use quite often and want to reach quickly, but do not need to take up space all the time.

Many extensions (at least the that still work in Firefox Quantum) also add buttons to the toolbar. You can also move these icons, rearrange them, or hide them if you do not need them.

Installing New Themes

Firefox Quantum includes three stock themes, as well as some more fanciful themes. Click on the “Themes” button at the bottom of the “Customize” window to access them. The default theme is shown below (and in all screenshots above).

If you want to reduce the glare of your screen (and save some power if you have an OLED display ), you can choose the Dark theme.

The Light theme is more in the style of older versions of Firefox.

By clicking on “Get More Themes” at the bottom of the Theme menu, you access the Mozilla Thematic Repository where you can download even more.

Render Toolbar and Smaller Buttons with “Compact” Mode

Quantum Firefox allows you to control the size of UI elements by modifying the “Density” setting at the bottom of the Customize window. Most users will be satisfied with the “Normal” setting, but the “Compact” setting is ideal for people who want to insert a few more pixels into web pages (or more buttons in the toolbar). There is also a “Touch” setting that provides extra-large, thumb-friendly icons. By default, Firefox on Windows 10 will switch to the “Touch” setting if you put the operating system in tablet mode . The screenshot below uses the “Compact” setting. Note that icons and tabs are smaller.

Bring back the favorites bar, the menu bar and the title bar

The Firefox interface is pretty streamlined these days, but if you’re a fan of old elements of the UI like the bookmarks bar, the title bar and the menu bar (with drop-down menus File, Edit, etc.), you can drag these bars.

To enable the bookmarks bar, click the “Toolbars” drop-down list at the bottom of the Customize window, then enable the “Favorite Toolbar” option.

You can also activate the menu bar in this same drop-down list. Most of the features of the menu bar have been copied and moved to the rest of the Firefox user interface in recent years, so it’s not really necessary unless you prefer to have this bar old school menu. Alternatively, you might find it easier to simply press Alt to bring up the menu bar when you need it. When done, press Alt again to make it disappear.

Finally, you can activate the title bar in the Customize window. It does not appear in the “Toolbars” drop-down menu (as it is not a toolbar), but you can enable a checkbox “Title bar” in the lower left corner of the window. Honestly, though, we think Chrome had the good idea to kill the title bar in 2008 (and Firefox Quantum, now). This takes up a lot of space to display relatively little information.

If you do not need the full title bar, but you still want to grab something and drag the window, consider enabling the “Drag Space” check box. This option adds a few pixels above the top of the tabs, giving you more space to click and drag the window.

Note that the Drag Space only appears if the window is not maximized. Unless you switch from one group of monitors to another, there is not really any need to slide out of space when Firefox occupies the entire screen.

Also keep in mind that moving space and the title bar are not your only two options for moving the window. You can also click and drag the flexible spaces that we deleted earlier, or any blank space in the tab bar, including the little space between the tab controls and the minimize button.

Stop the Downloads button for auto-masking

From Quantum Firefox, the “Downloads” button only appears when you download a file, phasing, and outputting as needed. If you are not a fan of the UI objects that appear, you can force the button to stay in place. With the “Customize” window open, click the “Downloads” button, then disable the “Auto hide” option.

It only took a few minutes, but I finished customizing Firefox Quantum. I’ve removed the flexible spaces and Home buttons, Search and Sidebars. I stopped downloading Donwloads automatically, I activated Spaces, added icons for some extensions that I used and I went into Compact mode with the Dark theme.

How to customize firefox quantum’s new interface

Firefox Quantum version 61 is Mozilla’s 4th major browser release in 2018 and it brought a ton of goodies including performance improvement, faster scrolling, security enhancements, bug fixes, and an overall UI polish.

You can switch between tabs better and the settings for the home and new tab pages have been added to the preferences section.

How to customize firefox quantum’s new interface

Also, you can now add websites that support an OpenSearch-compatible search engine to Firefox as a built-in search provider via a special button located on the address bar action Menu > Options > Search.

How to customize firefox quantum’s new interface

Add Custom Search to Firefox

To summarize, the major features added to Firefox 61 are:

  • Faster page rendering with Quantum CSS improvements and the new retained display list feature
  • Faster switching between tabs on Windows and Linux
  • WebExtensions now run in their own process on MacOS
  • Tab Warming is now included with the Stable release

Now that you know what’s new, how do you customize it? Trust me, it has never been easier!

Adding/Removing Buttons and Customizing Your Toolbar

Right-click on any free space (other than the address bar) in your toolbar and choose the “Customize” option. Now, you can click and drag items around to sit where you would like them to be.

If you’re not conversant with the overflow menu, it is where you can drag items into to hide extensions and other icons by default. Summon the overflow menu’s window by clicking on the forward double arrows in the toolbar.

How to customize firefox quantum’s new interface

Even more easily done, is right-clicking on buttons and empty spaces to remove them from the toolbar. Remember, however, that you can use the empty spaces on the toolbar to move windows around.

Bookmarks, Menu, and Title Bars

Open the Customize window and click on the “Toolbars” dropdown button to enable the bookmarks bar. The same dropdown button has the option to activate the menu bar and the checkbox to activate the Title bar is on the bottom left of the window.

How to customize firefox quantum’s new interface

Customize Firefox Toolbars

The “Drag Space” option adds a little padding-top to tabs and the paddings only show when Firefox is not in a maximized mode. So, activate it if it will be useful to you when dragging windows.

Compact, Normal, and Touch UI Modes

You can change the size of items in your browser by using the “Density” setting located at the bottom of Firefox’s customize menu. Select “Compact” if you want to make the UI items smaller, and “Touch” if you want the UI items to be extra large (like you were using a tablet). Firefox is set to “Normal” by default and “Touch” in Tablet mode on Windows 10.

How to customize firefox quantum’s new interface

Customize Firefox Size

Deactivating Auto-Hide for the Downloads Button

The downloads button auto-hides by default in Firefox Quantum and shows only when there is an active download. Force the button to stay in place by opening the customize window, clicking on the “Downloads” button and unticking the “auto-hide” option.

How to customize firefox quantum’s new interface

Firefox Auto-Hide Downloads

Installing Firefox Themes

Saving the coolest option for the last, Firefox comes with 3 stock themes with a few recommendations. You can manage your themes by clicking on the “Manage” button or download new themes by clicking on the “Get More Themes” button after clicking on the “Themes” button in the customize window.

How to customize firefox quantum’s new interface

Install Firefox Themes

Have you been enjoying Firefox Quantum so far? What’s your UI set up like and which customization options are your favorite, among other features? Let us know in the comments section below.

How to customize firefox quantum’s new interface

Firefox Quantum‘s interface is still extremely customizable thanks to its userChrome.css file. You can edit this file to hide unwanted menu items, move the tab bar below the navigation toolbar, view multiple rows on your bookmarks toolbar, and do other things that normally wouldn’t be possible.

How This Works

Firefox’s userChrome.css file is a cascading style sheet (CSS) file that Firefox uses. While style sheets are normally applied to web pages, this particular style sheet is applied to Firefox’s user interface. It allows you to change the appearance and layout of everything surrounding the webpage iteslf. You can’t actually add any features; you can only modify what’s already there to change, hide, or move it.

This has nothing to do with Google Chrome. “Chrome” refers to the user interface of the web browser, which is what Google Chrome was named after.

The userChrome.css file has existed in Firefox for a long time, but it’s taken on renewed importance with Firefox Quantum. Many tweaks that could previously be accomplished by browser add-ons can now only be accomplished by editing the userChrome.css file.

Where to Find Tweaks

While you could create your own tweaks if you understand CSS code and how Firefox’s interface was designed, you can also just find tweaks online. If you want to make a certain change, someone else has probably already figured out how to do it and written the code.

Here are some resources to get you started:

  • Sample Tweaks from userChrome.org: A short list of interesting tweaks that demonstrate the power of userChrome.css.
  • Classic CSS Tweaks: A repository of userChrome.css tweaks from the author of the Classic Theme Restorer extension, which no longer functions on Firefox Quantum.
  • userChrome Tweaks: A collection of interesting Firefox tweaks.
  • FirefoxCSS on Reddit: This subreddit is a community for discussing tweaks. You can search the subreddit to find other people’s tweaks, see what people are sharing, and even ask for input if you can’t find a tweak you really want.
  • Guide to Editing Your Context Menu: Instructions for removing items from Firefox’s context menu and changing their order in the list, taken from the FirefoxCSS subreddit.

Bear in mind that older versions of Firefox had a different interface. Older userChrome.css tweaks you find online may not function on Firefox 57 and later, also known as Firefox Quantum.

If you know what you’re doing with CSS, you can enable the browser toolbox to inspect the Firefox browser’s chrome. This will provide the information you need to customize various browser interface elements with your own CSS code.

How to Create Your userChrome.css File

The userChrome.css file does not exist by default, so once you have a tweak or two you want to try out, you first have to create the file in the appropriate location inside your Firefox profile folder.

To launch your Firefox profile folder, click menu > Help > Troubleshooting Information in Firefox.

How to customize firefox quantum’s new interface

Click the “Open Folder” button to the right of Profile Folder to open it. (On macOS or Linux, you’ll see a “Show in Finder” or “Open Directory” button instead. The following instructions show the process on Windows, but it’s basically the same on Mac and Linux—you’ll just be using a different file manager and text editor.)

How to customize firefox quantum’s new interface

If you see a folder named “chrome” in the profile folder that appears, double-click it. However, you probably won’t, as this folder isn’t created by modern versions of Firefox.

To create the folder, right-click in the right pane and select New > Folder. Name it “chrome”, press Enter, and then double-click it.

How to customize firefox quantum’s new interface

You’ll need to tell Windows to show you file extensions, if you haven’t already. Windows hides file extensions by default to simplify things. This step isn’t necessary on macOS or Linux, which show this information by default.

On Windows 8 or 10, you can simply click the “View” tab on the ribbon and check the “File name extensions” box to make them visible. On Windows 7, click Organize > Folder and search options, click the “View” tab, and uncheck “Hide extensions for known file types”.

How to customize firefox quantum’s new interface

You will now create the userChrome.css file, which is really just a blank text file with the .css extension instead of the .txt extension.

To do so, right-click in the right pane here and select New > Text Document. Name it “userChrome.css” making sure to remove the .txt file extension.

Windows will warn you that you’re changing the file’s extension and this may be a problem for certain types of files. Click “Yes” to confirm your change.

On macOS or Linux, create an empty text file with the same name.

How to customize firefox quantum’s new interface

How to Edit the userChrome.css File

You can use any text editor to edit the userChrome.css file. The Notepad text editor included with Windows works just fine. If you want a more powerful text editor with more features, we like Notepad++.

To edit the file in Notepad, right-click it and select “Edit”.

How to customize firefox quantum’s new interface

Add whatever tweaks you want to the file by copying and pasting them in. If you add multiple tweaks, be sure to add them all on their own lines.

How to customize firefox quantum’s new interface

Once you’re done, save the file by clicking File > Save in Notepad.

Firefox Quantum has quicker speeds and many more useful features, but what about the Firefox appearance, such as themes, menu items? How to customize Firefox? In this article, I will show you how to customize the Firefox user interface to suit your needs.

Some of these methods will work with older versions of Firefox as well.

If you want to make sure that you have the latest Firefox Quantum installed, head over to the menu bar. If it’s not visible, you can tap the ALT key on your keyboard or just right-click on any open space at the top and select menu bar from the drop-down menu.

Click on help then select about Firefox. If you have Quantum installed that will update Firefox Quantum. If you’re new to Firefox, you can download it from firefox.com. We’ll start out with an easy one.

How to customize Firefox

Remove or add items from Firefox toolbar

What you quickly remove items from the toolbar just right click on that item and select remove from the toolbar. You can even get rid of empty space in the toolbar by right-clicking on the empty space and selecting remove from toolbar again.

Select the three bar menu icon in the upper right, then select customize, this will open a new tab with more customization options. Most functions on this page involve left clicking with your mouse and dragging the elements.

You can remove items from the toolbar by dragging and dropping into the main area below. For example, the Firefox search bars, you don’t need these search bars as internet searches can also be done in the address bar.

How to customize firefox quantum’s new interface

Move your cursor up to search left click and drag it down below to the other elements to remove elements to customize Firefox.

Adding items to the toolbar works the same way but in reverse from the main area just left-click and drag those elements to where you want them on the Firefox toolbar.

How to customize firefox quantum’s new interface

There is also an overflow menu to the right or tools that you use but don’t want them to take up space on the toolbar, just left-click and drag the items to the overflow menu box.

Customize add-ons and themes

For many people the add-ons they used to use no longer work with Quantum that also includes certain themes, themes are a great way to change the appearance of Firefox at the bottom of the page.

How to customize firefox quantum’s new interface

Click on themes, Firefox Quantum includes three themes that are pre-installed default light and dark. They also have a few that are recommended. You can preview them by just moving your cursor over each one, they are called “a web browser renaissance”, “space fantasy” and “pastel gradient”. I like the space fantasy one as it is easier on the eyes.

Below that you can select get more themes to see what other themes for Firefox Mozilla has to offer. They have thousands of themes that you can choose from.

Customize menubar and bookmarks toolbar

How to customize firefox quantum’s new interface

On the customize Firefox page, you can add or remove the menu bar and bookmarks bar by selecting the toolbars button at the bottom of the page and just click each menu item to turn it on or off.

Customize toolbar menu size

How to customize firefox quantum’s new interface

You can also control the size of the items in the toolbar by selecting density. Normal is the default size, compact makes the menu smaller and touch makes the menu items just slightly larger than normal.

Show title bar

How to customize firefox quantum’s new interface

Some people miss the title bar that used to appear at the top of the page. There’s an option here to turn the title bar in Firefox back on, click the Title bar in the left bottom corner and you’ll see the title bar at the top of the page.

When you are done customizing Firefox to your needs, select Done in the lower right corner. You will now see that your changes have taken effect.

Firefox Quantum has many new features. The most useful is the screenshot tool, at least for me. The screenshot tool is hidden on the address bar on the page actions menu.

How to customize firefox quantum’s new interface

The screenshot tool works great to capture and save any part of any web page.

Enjoy Firefox, I hope this article has helped you customize Firefox to suit your needs.

Thank me! Help other people. Share this information on social media, a forum or website, and contribute to a safer internet for everyone.

The new Responsive Design Mode is significantly less usable than the old one.

There are many annoyances in the new interface, but the worst is the centring of the viewport in the window, so that when you resize it, everything moves, and you can’t see how your design is responding to the new size, since _everything’s_ moving. Maybe centring looks cool, but Responsive Design Mode is for designers and developers, it doesn’t need to look cool, it needs to work!

You used to be able to get the old Responsive Design Mode – the one that had the viewport aligned top-left – by disabling multi-processes. This no longer works in Firefox 57.

Is there any way to get back the old Responsive Design Mode? Or, if not, configure the new one _not_ to centre the viewport in the window? I do a lot of responsive web design and development, so this is a real showstopper for me.

Chosen solution

You can only get the new design when multi-process is enabled. Still works for me with multi-process disabled.

What do you see with multi-process disabled?

You can look in “Help -> Troubleshooting Information” (about:support) to see the current multi-process state.

  • “Help -> Troubleshooting Information” -> “Application Basics”:
    Multiprocess Windows
    Web Content Processes

You can disable multi-process windows in Firefox by setting these prefs to false on the about:config page.

  • browser.tabs.remote.autostart = false
  • browser.tabs.remote.autostart.2 = false

You can open the about:config page via the location/address bar. You can accept the warning and click “I accept the risk!” to continue.

  • Log in
  • Register
  • Home
  • News
  • How to Remove or Customize the Firefox Quantum Highlights, Top Sites Page.

Related news

  • How to only view preferences you’ve modified in about:config on Firefox.
  • How to skip or bypass wait times for downloads. Link Bypassers
  • How to get Parental Controls for your Internet browser.
  • How to disable sponsored top sites on Firefox. Disable top site ads on Firefox.
  • How to add notes and comments to PDF files using Microsoft Edge.
  • How to force close duplicate and near-duplicate tabs in Chrome and Firefox.
  • How to bookmark specific sections of a website.
  • How to stop users from installing Add-ons in Firefox. Block access to extensions in Firefox.
  • How to Export Passwords From Microsoft Edge. (Transfer Save Passwords From Edge)
  • How to Use Firefox Private Relay on Firefox to Avoid Spam and Malicious Content.
  • How to Disable Detaching Tabs on Firefox. Stop Accidentally Detaching Tabs on Firefox.
  • How to Restore the Old Firefox Address Bar? Remove Firefox Awesome Bar.
  • How to Disable ‘is Now Fullscreen’ Warning Message on Firefox.
  • How to Add a Calendar, Notes, or a ‘To Do’ List to the New Tab Page of Firefox, Chrome or Edge
  • How to Record/Capture Audio Straight From Your Browser. (Chrome, Edge Firefox)

Related files

  • Mozilla Firefox
  • Yahoo! Toolbar for Mozilla Firefox
  • Auslogics Browser Care
  • Firemin
  • Cyberfox
  • how to close highlights firefox
  • firefox quantum Top Sites Highlights löschen
  • how to remove highlights from firefox
  • “firefox 58” “remove” three dots

Firefox Quantum ‘aka’ Firefox 57 is the latest version of Firefox and has been built from the ground up. It has a redesigned interface focusing on minimalism yet is still super practical. In addition to this, it’s also quite a lot more customisable with plenty of features you’ll find yourself tinkering with. For this guide will be showing you how to customise or completely remove the New Tab highlights page.

How to customize firefox quantum’s new interface

If you’re a long time Chrome user and haven’t yet checked out Firefox Quantum is definitely worth download and trailing. As well as the redesigned interface it also uses about 30% less Ram than Chrome and has a great system in place for managing bookmarks. Private Mode has also been enhanced with better tracker protection and some inbuilt ad-blocking that speeds up website load times substantially. You can check out the full brag list at the official Firefox Quantum page below.

As most other Internet browsers do, Firefox Quantum also displays your recent and top websites on the main page when you open a new tab. For some people, this is going to be a good thing and for others, this is going to be a bad thing. Especially for the people who don’t like to broadcast their recent history. Thankfully, Firefox was considerate enough to allow full customisation of this screen, giving you the ability to completely turn it off or change what information is shown.

Tip: On a side note, if you are looking for the Screenshot option on Firefox Quantum, you can find it by clicking the three dots at the end of the address bar.

How to Remove Individual Websites From ‘Highlights’ or ‘Top Sites’ on Firefox Quantum.

To remove individual websites from the Highlights group on Firefox Quantum, you will need to open a new tab so you can view all the highlighted websites. Once you are on the main page, hover your mouse over the website you wish to remove, then click the 3 dots that appear in the top left corner of the website. This will open a small options window where you can either Dismiss or Delete the page from your history. To remove an item from Top Sites, follow the exact same procedure.

How to customize firefox quantum’s new interface

How to Remove Highlights, Search, Top Sites & Snippets From Firefox Quantum New Tabs.

If you want to completely remove highlights or another group from Firefox Quantum, open a new tab, then click the small Settings Cog in the top right-hand corner of the window. This will open a new tab with a list of different options, to disable any of the features simply uncheck the box next to the feature you want gone. Once this is done close the tab and you’ll see the item removed from Firefox. If at any stage you would like to restore the option, simply place a tick back in the box. Unless you are actively using either of these options, you might as well disable them all and gain a slight speed boost to load times.

How to customize firefox quantum’s new interface

Challange your knowledege, and take a quiz.

The new Firefox Quantum browser from Mozilla brought tons of new features and updates. It is now faster, lighter and more organized than ever it was before. However, with the new Firefox Quantum technologies which detached the older APIs used for complete themes and other add-ons, users were having a hard time customizing the browser’s interface.

Fortunately, you can easily customize Firefox +57 interface by modifying the default “skin”. You can simply create a bunch of CSS rules which change the Firefox interface however you like. We’ll learn together how to do it in this tutorial.

Table of Contents

Step 1: Locate your userChrome.css File

To make it easy on you, open the Firefox main menu and go to Help –> Troubleshooting Information . Under Profile Directory click the “Open Directory” button. Which should open the folder of your current Firefox profile:

How to customize firefox quantum’s new interface

Now, create a folder called chrome , and inside that folder, create an empty file called userChrome.css . You can now start putting all the CSS rules you want in that file and they will be automatically loaded by Firefox when it starts (if you modify the file, you have to restart Firefox).

Step 2: Enable Browser Toolbox

In order to write CSS rules related to Firefox interface, you need to know the available CSS selectors that you can use. For example, can we use #tab-bar to modify the CSS of the Firefox tab bar? What possible selectors are there? That’s why you need to enable an option called “Browser Toolbox”.

To do this, open the “Inspect Element” option from the context menu (right click anywhere on any opened web page), and open settings like the following:

How to customize firefox quantum’s new interface

Scroll down to “Advanced options” and check both the “Enable browser chrome and add-on debugging toolboxes” and “Enable remote debugging” options as you can see in the picture:

How to customize firefox quantum’s new interface

Now open the browser toolbox from Web Developer –> Browser Toolbox . A confirmation message like this will appear, hit OK:

How to customize firefox quantum’s new interface

Finally, the browser toolbox window should appear, which you can use to analyze the structure of Firefox interface:

How to customize firefox quantum’s new interface

Click on the inspector button (the first button on the left) in order to be able to inspect elements by your mouse:

After that, you can put your mouse pointer on any place in your browser window in order to learn it unique ID. For example, if you put it on the navigation bar, you’ll see a red dotted line around it:

How to customize firefox quantum’s new interface

Browse FOSS Post ad-free when you subscribe to Patreon

How to customize firefox quantum’s new interface

Notice the id=”nav-bar” CSS selector in the code, it means that you can use #nav-bar in your userChrome.css file to modify the look of the navigation bar. For example, say that I want to change the background of the navigation bar into complete white, what I’ll add in my userChrome.css file is the following:

Remember always to use !important in each CSS rule you create in order to overwrite the default Firefox skin rules. Otherwise, you may go crazy about why your CSS is not being applied. Also don’t forget to restart Firefox after each modification you do.

After restarting Firefox, this is what I’ll get:

How to customize firefox quantum’s new interface

Step 3: Start Playing

You now know how to create the CSS rules you need to customize any part of your browser. You can change the default skin, or modify the structure of your browser’s interface however you like.

I would recommend installing the Tab Center Redux extension which creates a sidebar for your opened tabs. After that, you can apply the following CSS rules in userChrome.css :

And here’s how your browser will look like:

How to customize firefox quantum’s new interface

Your tabs will be auto-hidden on the left side:

How to customize firefox quantum’s new interface

If you want always to see the tab bar on the left, then just replace the #sidebar-box part of the code with following code snippet:

And you’ll get a better view:

How to customize firefox quantum’s new interface

The following list of selectors for Firefox CSS should get you going:

  • #appcontent: The web view of Firefox (the web page itself).
  • #tabbrowser-tabs: The tab bar at the top of Firefox.
  • #urlbar: The URL bar in the navigation bar.
  • #identity-box: The small area in the left side of the URL bar which contains the information & connection icons.
  • #sidebar-box: The sidebar tab bar provided by the “Tab Center Redux” extension.
  • #back-button: Get back button in the navigation bar.
  • #forward-button: The forward button.
  • #reload-button: The reload button.
  • #home-button: The home button.
  • #downloads-button: The downloads button.
  • #PanelUI-menu-button: The main Firefox menubar button.

You can explore the rest of available selectors from the way we explained in step 1. Feel free to apply whatever CSS styles you want to get the look & feel you enjoy the most.

Conclusion

Although we lost the complete Firefox themes in Firefox 57, we still can customize the UI of Firefox to a very good level. In the future, we may be able to install ready themes which include ready userChrome.css modifications to customize Firefox in many different ways and combinations.

If you have any specific tip or skin you made related to that, feel free to share them in the comments.

How to customize firefox quantum’s new interface

Browse FOSS Post ad-free when you subscribe to Patreon

How to customize firefox quantum’s new interface

Challange your knowledege, and take a quiz.

How to customize firefox quantum’s new interface

Firefox 57 comes with a lot of changes, and that includes a new tab design. If you’re not happy with the new tab design, there are options when it comes to customizing the Firefox Quantum new tab page.

For example, it’s possible to add a background image to the new tab. You can also have your favorite sites appear with every new tab so they’re easier to access. There are different options when it comes to adding your own personal touch; let’s see what they are.

1. Add a Background Image to Firefox 57’s New Tab

If you find Firefox 57’s new tab page dull, add some life to it with the New Tab Tool 86 extension. With this tool you can add more tiles, add an image from your computer, and even see the recently closed tabs.

How to customize firefox quantum’s new interface

To add an image, click on the cog wheel on the upper-right corner. At the bottom left you should see the option to add your photo. You can also decide how many tiles you want per row and how many columns. There’s also an option to choose between a dark and light theme as well.

2. Get the Old Tab Page in Firefox Quantum

When you open a new tab in Firefox 57, you see the search bar at the top, followed by the most visited, and finally with some highlighted sites. If you don’t like the new design and want to revert back to the old tab page in the pre-Firefox Quantum era, you’ll need to type about:config in the search bar.

Click “Yes” and say you’ll take the risk of voiding your warranty. Type browser.newtabpage.activity-stream.enabled in the search bar and click on “True” until it turns into “False.” Reboot Firefox and the next time you open a new tab, you’ll see the new (or perhaps, the old) changes.

3. Customize the Most Visited Sites in a New Tab

At the top of a new tab, you’ll see the sites you visit the most. To either add or remove a row, click on the cog wheel, and on the “Show two rows” option under “Most Visited.”

How to customize firefox quantum’s new interface

As long as you’re in the Settings tab, you can also remove the search bar and choose to get information from Mozilla about updates and even a meme here and there.

4. Add a Yahoo Look to a New Tab

With the New Tab by Yahoo extension, you get a new tab but with a touch of Yahoo. You get a new image with every new tab. For example, with one tab you can get an image of a mountain and with another an image of flowers.

How to customize firefox quantum’s new interface

At the top you’ll see what’s trending and at the bottom shortcuts to sites such as Yahoo, Facebook, Firefox extensions and more. If you use the search bar, it will give you your results by using Yahoo (obviously) as the browser that gives you the results.

5. Have a Particular Site Open with Every New Tab

If you have a blog and want Firefox to open it every time you launch a new tab, that can easily be done by installing the New Tab Override extension. Once the extension is installed, go to Firefox’s settings and then to the extensions option.

How to customize firefox quantum’s new interface

Click on the extension, and you should see the space where you can add the site URL. You can only add one site. If you try to add two, the new tab will simply freeze.

Conclusion

Just because Firefox Quantum’s new tab page is different, it doesn’t mean it also has to be boring. These options will help you personalize the new tab page to best suits your needs. How are you going to personalize your new tab page? Share your thoughts in the comments below.

Just a simple guy that can’t enough of Technology in general and is always surrounded by at least one Android and iOS device. I’m a Pizza addict as well.

How to customize firefox quantum’s new interface

Firefox 57 comes with a lot of changes, and that includes a new tab design. If you’re not happy with the new tab design, there are options when it comes to customizing the Firefox Quantum new tab page.

For example, it’s possible to add a background image to the new tab. You can also have your favorite sites appear with every new tab so they’re easier to access. There are different options when it comes to adding your own personal touch; let’s see what they are.

1. Add a Background Image to Firefox 57’s New Tab

If you find Firefox 57’s new tab page dull, add some life to it with the New Tab Tool 86 extension. With this tool you can add more tiles, add an image from your computer, and even see the recently closed tabs.

How to customize firefox quantum’s new interface

To add an image, click on the cog wheel on the upper-right corner. At the bottom left you should see the option to add your photo. You can also decide how many tiles you want per row and how many columns. There’s also an option to choose between a dark and light theme as well.

2. Get the Old Tab Page in Firefox Quantum

When you open a new tab in Firefox 57, you see the search bar at the top, followed by the most visited, and finally with some highlighted sites. If you don’t like the new design and want to revert back to the old tab page in the pre-Firefox Quantum era, you’ll need to type about:config in the search bar.

Click “Yes” and say you’ll take the risk of voiding your warranty. Type browser.newtabpage.activity-stream.enabled in the search bar and click on “True” until it turns into “False.” Reboot Firefox and the next time you open a new tab, you’ll see the new (or perhaps, the old) changes.

3. Customize the Most Visited Sites in a New Tab

At the top of a new tab, you’ll see the sites you visit the most. To either add or remove a row, click on the cog wheel, and on the “Show two rows” option under “Most Visited.”

How to customize firefox quantum’s new interface

As long as you’re in the Settings tab, you can also remove the search bar and choose to get information from Mozilla about updates and even a meme here and there.

4. Add a Yahoo Look to a New Tab

With the New Tab by Yahoo extension, you get a new tab but with a touch of Yahoo. You get a new image with every new tab. For example, with one tab you can get an image of a mountain and with another an image of flowers.

How to customize firefox quantum’s new interface

At the top you’ll see what’s trending and at the bottom shortcuts to sites such as Yahoo, Facebook, Firefox extensions and more. If you use the search bar, it will give you your results by using Yahoo (obviously) as the browser that gives you the results.

5. Have a Particular Site Open with Every New Tab

If you have a blog and want Firefox to open it every time you launch a new tab, that can easily be done by installing the New Tab Override extension. Once the extension is installed, go to Firefox’s settings and then to the extensions option.

How to customize firefox quantum’s new interface

Click on the extension, and you should see the space where you can add the site URL. You can only add one site. If you try to add two, the new tab will simply freeze.

Conclusion

Just because Firefox Quantum’s new tab page is different, it doesn’t mean it also has to be boring. These options will help you personalize the new tab page to best suits your needs. How are you going to personalize your new tab page? Share your thoughts in the comments below.

Just a simple guy that can’t enough of Technology in general and is always surrounded by at least one Android and iOS device. I’m a Pizza addict as well.

It’s fast. Really fast. Firefox Quantum is over twice as fast as Firefox from 6 months ago, built on a completely overhauled core engine with brand new technology stolen from our advanced research group, and graced with a beautiful new look designed to get out of the way and let you do what you do best: surf a ton of pages, open a zillion tabs, all guilt free because Firefox Quantum uses less memory than the competition. Your computer will thank you. 🙂

It’s by far the biggest update we’ve had since we launched Firefox 1.0 in 2004, it’s just flat out better in every way. If you go and download Firefox Quantum right now, you’ll immediately notice the difference, accompanied by a feeling of mild euphoria. If you’re curious about what we did, read on.

The first thing you’ll notice is the speed. Go on, open some tabs and have some fun. The second thing you’ll notice is the new User Interface (UI). We call this initiative Photon, and its goal is to modernize and unify anything that we call Firefox while taking advantage of the speedy new engine. You guessed it: the Photon UI itself is incredibly fast and smooth. To create Photon, our user research team studied how people browsed the web. We looked at real world hardware to make Firefox look great on any display, and we made sure that Firefox looks and works like Firefox regardless of the device you’re using. Our designers created a system that scales to more than just current hardware but lets us expand in the future. Plus, our Pocket integration goes one step further, which includes Pocket recommendations alongside your most visited pages.

As part of our focus on user experience and performance in Firefox Quantum, Google will also become our new default search provider in the United States and Canada. With more than 60 search providers pre-installed across more than 90 languages, Firefox has more choice in search providers than any other browser.

We made many, many performance improvements in the browser’s core and shipped a new CSS engine, Stylo, that takes better advantage of today’s hardware with multiple cores that are optimized for low power consumption. We’ve also improved Firefox so that the tab you’re on gets prioritized over all others, making better use of your valuable system resources. We’ve done all this work on top of the multi-process foundation that we launched this past June. And we’re not done yet. David Bryant who first told you about Project Quantum explains what’s to come and what we’re doing to continue to improve your browser’s performance.

Here’s a look at the new Firefox browser in action:

Making Firefox look, feel and perform faster was no small feat. Employees and volunteers from around the world worked in record time to create the best Firefox yet. Let’s take a moment to take a look at what we accomplished this past year to make this happen:

The New Firefox Quantum By the Numbers

How many authors contributed code?

  • More than 700 authors contributed code to Firefox since the August 6th release.

How many volunteers contributed to code development?

  • 80 contributors from all over the world, with nearly every time-zone represented in round-the-clock awesomeness!

How many ways can you customize the toolbar in the new Firefox?

  • There are 265,252,859,191,742,656,903,069,040,640,000 more ways to customize the new Firefox toolbar right out of the box!

We’ve already heard from many voices about Firefox Quantum while it was in beta, and here’s what they have to say:

“This is called mind blowing stuff.” — @sndp_007

“It’s quite a leap” or “IT’S SO FAST” — @felixreiseberg

Check out the new Firefox browser on Windows, Mac or Linux. The new appearance will also be available on iOS and Android.

There’s more that could be said about all the amazing work that went into Quantum, or about some of the exciting stuff in the very near future, but at this point you should stop reading and download Firefox Quantum, because it will make you happy.