edit userChrome.css to hide tabstoolbar and nav-bar
I would like to customize my mozilla interface to display in fullscreen without tabstoolbar and without navigation bar. I use ./chrome/userChrome.css like below:
#main-window < max-width:1920px !important; max-height:1200px !important; >#TabsToolbar < display: none >#nav-bar
Tried firefox -P my_profile www.google.com Expected: Google page Result: Blank page, and I’ve got google page after one click. Using Microsoft Windows
3,700 5 5 gold badges 15 15 silver badges 30 30 bronze badges
asked Jun 25, 2019 at 9:49
105 2 2 silver badges 9 9 bronze badges
is my_profile is your default profile set on firefox?
Jun 25, 2019 at 9:58
yes my_profile is my default profile set on firefox
Jun 25, 2019 at 10:02
is that your default profile?
Jun 25, 2019 at 10:03
yes, excuse me.
Jun 25, 2019 at 10:04
then what click you’re talking about. for me, that command is working.
Jun 25, 2019 at 10:06
3 Answers 3
Try changing display: none to visibility: collapse .
Apparently some functions rely on the nav-bar existing, thus «hiding» instead of «removing» seems to do the trick, atleast it did for me.
answered Nov 8, 2019 at 8:23
140 3 3 bronze badges
On Firefox 110.0.1 the following CSS did the trick for me:
#titlebar
3,700 5 5 gold badges 15 15 silver badges 30 30 bronze badges
answered Mar 6 at 16:32
59 3 3 bronze badges
I had a similar problem with firefox 86, somehow all pages were blank and I had to edit my userChrome.css to something like this from superuser.com. Also make sure userChrome.css is enabled, but since you get a white page it is probably used.
/* * Do not remove the @namespace line -- it's required for correct functioning */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ /* * Hide tab bar, navigation bar and scrollbars * !important may be added to force override, but not necessary * #content is not necessary to hide scroll bars */ #TabsToolbar #navigator-toolbox browser
Firefox Quantum + user Chrome.css
In addition to the built-in Customize feature (see Customize Firefox controls, buttons and toolbars at Mozilla Support), you can modify the appearance of Firefox using the powerful userChrome.css feature.
userChrome.css holds style rules for modifying Firefox’s user interface. You can find users on the web offering a wide range of ready-to-paste style recipes, and communities where you can request help with rules to make your Firefox look just the way you want. And it’s all free.
Ready to learn more?
- What is userChrome.css and what can it do?
- How to Create a userChrome.css File
- Resources for Style Recipes and Tools
- What is Autoconfig Startup Scripting (AKA userChrome.js)?
- Firefox 89 – Styling the New Proton UI
- (Firefox 75) Megabar – Configuring and Styling the Firefox Address Bar
- Firefox 69 Broke It!
This site is not maintained by or affiliated with Mozilla, the maker of Firefox. For more information on Firefox, please visit: https://www.mozilla.org/firefox/.
Copyright © 2021 Jefferson Scher. All Rights Reserved. CSS examples available under CC BY 4.0 or BSD-3-Clause License. Privacy statement.
Contributors guide on Firefox advanced customization with CSS
In addition to the built-in customization feature (see Customize Firefox controls, buttons and toolbars), Firefox themes (see Use themes to change the look of Firefox and other types of add-ons (see Find and install add-ons to add features to Firefox), advanced Firefox users can also make changes to their browser user interface (UI) by applying style rules with an optional file named userChrome.css .
As SUMO contributors, here’s what you need to know about Firefox advanced customization using this CSS file:
What does userChrome.css do?
Firefox’s user interface is built of web-like elements (HTML and XUL elements) and styled using CSS. Users can set Firefox to look for a userChrome.css file at startup, so the rules in the file can restyle various elements of the user interface. For example, custom rules can change colors and sizes of many elements, hide them, or reposition them.
What do users need to know before they use userChrome.css customization?
Users should expect that some of their custom rules will stop working correctly in the future, and in extreme cases, this may cause serious issues with the user interface. Firefox is a work in progress and to allow for continuous innovation, Mozilla cannot guarantee that the styled elements will not change. When new features and new user interface designs are introduced, they often require different HTML and XUL tags, and the styling of these tags will evolve as well. For this reason, Mozilla does not officially support custom style rules.
Where can users get help with custom rules and userChrome.css?
Mozilla’s support forum provides peer-to-peer assistance in a very limited basis for these kind of customization. We encourage users with userChrome.css issues to seek assistance and information through other forums and websites instead, such as the userchrome.org site, the r/FirefoxCSS forum on Reddit or the community-driven #firefoxcss room on Matrix.
How to revert Firefox back to its default state?
If Firefox user interface suddenly looks broken after an update, and the users have created a userChrome.css file in the past, they can use Firefox’s Troubleshoot Mode (see Diagnose Firefox issues using Troubleshoot Mode) to quickly disable their custom rules, and see whether that makes any difference. If they would like to undo their customization and restore Firefox to its default UI, Users can use one of the following methods.
Reset Firefox to its default state
Warning: A Firefox refresh removes add-ons and other customizations, such as extensions, extension data, and preference configurations. If you’ve made accessibility customizations to Firefox, you may need to add them back after refreshing.
Users can reset Firefox to its default state by following the steps in the Refresh Firefox — reset add-ons and settings article.
Disable and remove userChrome.css
Users can disable and remove their userChrome.css file so that it does not load on Firefox startup by following this steps:
- Type about:config in the address bar and press Enter Return .
A warning page may appear. Click Accept the Risk and Continue to go to the about:config page. - Search for the toolkit.legacyUserProfileCustomizations.stylesheets preference and set it back to false by clicking on Reset.
- Remove userChrome.css inside the chrome folder of the profile folder. To find the profile folder, see the How do I find my profile? section in Profiles — Where Firefox stores your bookmarks, passwords and other user data.
These fine people helped write this article:
Volunteer
Grow and share your expertise with others. Answer questions and improve our knowledge base.
Styling Firefox UI With CSS
Recently I have discovered userChrome.css. It is a file that allows styling Firefox UI with CSS — not the page contents, the user interface! A quick research has shown me that this feature is unique to Firefox. Other browser can apply custom styling to the displayed content and not to its own interface.
Configuration
Configuring Firefox to use userChrome.css is really straightforward. To set it up simply follow the steps below.
Enable Styling
- Head to about:config
- Search for toolkit. legacyUserProfileCustomizations. stylesheets option and set it to true
Locate Profile Directory
- Head to about:support
- Write down the path visible as Profile Directory
Deploy userChrome.css
- Create a chrome directory within the profile directory
- Save userChrome.css in the chrome directory
- Restart the browser for changes to take place
Now you know how to apply the styling! �� If you wonder how to actually create a style for the browser’s UI, read on!
Style Development
Since userChrome.css is nothing else than a simple CSS, then all that’s left to figure out are the interface elements. To do this we need to enable and run inspector for the browser’s UI and not its contents.
Enabling Inspector
- Open inspector (page does not matter)
- Head to settings (F1)
- Check the following boxes:
- Enable browser chrome and add-on debugging toolboxes
- Enable remote debugging
Running Inspector
Simply click Ctrl+Shift+Alt+I (or its equivalent on Mac) or open Firefox’s hamburger menu, head to More Tools submenu, and start Browser Toolbox. A prompt about an incoming connection will be displayed, and once allowed the inspector for the UI will appear.
Example
To finish off, a simple example of userChrome.css:
.tabbrowser-tab:first-child * background-color: orangered !important; > which styles first tab’s background color:
Summary
If you want to experiment with userChrome.css, then you might find FirefoxCSS subreddit and userChrome.org of use.
From what I have tested, it is quite easy to break stuff. For instance, altering pinned tab width makes them messy when too many tabs are open. Regardless, I find this feature interesting and most likely will experiment with it in the future.
- GitHub
- SourceHut