Forum Response - Tabs below the URL bar

<!-- The first paragraph and the Note below it provide general information about userChrome.css files. --> Firefox's style or appearance can be [https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin modified] by creating a chrome folder inside your [[Profiles - Where Firefox stores your bookmarks, passwords and other user data|Firefox profile folder]] and then placing a '''userChrome.css''' file inside, that includes a custom style rule. The rules you put in the userChrome.css file will override the default styles in Firefox. '''''Note:''' Custom style rules might not work every time because of other factors (such as incompatibility with other custom style rules) beyond the Mozilla community's control. Your custom style rule might also stop working each time a new Firefox release comes out. Here's how to modify Firefox so that tabs are shown below the address (URL) bar instead of at the top (see [https://www.userchrome.org/how-create-userchrome-css.html this help page] and our [https://vimeo.com/242513527 community member's video starting at 8:45] for more detail). #Open your currently active profile folder: Type '''about:support''' in the Firefox address bar and, under the "Application Basics" section next to "Profile Folder", click '''Open Folder''' (Windows) '''Open Directory''' (Linux) or '''Show in Finder''' (Mac). #Create a new folder named '''chrome''' inside the profile folder. #*Create a desktop shortcut to the '''chrome''' folder, if you wish, for easier future access. #Create a new text file inside the chrome folder and name it '''userChrome.css''' (on Windows, make sure that file name extensions are not hidden and that the file is named userChrome.css and not userChrome.css.txt). #Go to https://www.userchrome.org/what-is-userchrome-css.html and copy the CSS rules under the "Move the Tab Bar Below the Other Toolbars" example ([https://www.userchrome.org/what-is-userchrome-css.html#movetabbar here]). #Open the '''userChrome.css''' file you created earlier, paste the CSS rules inside the file, close the file and save your changes. #Restart Firefox. ('''Tip:''' Turn on your title bar or menu bar after you've made these changes.) ----- '''Alternative solution'''<!-- This solution is from https://support.mozilla.org/en-US/questions/1185495 and works on Mac OS. --> (A) You need to create a new '''chrome''' folder in your Firefox profile folder. This article has the steps for that (#1, #2, and optionally #3):<br> https://www.userchrome.org/how-create-userchrome-css.html (B) Download the following file and move it into that chrome folder:<br> https://www.userchrome.org/samples/userChrome-tabs_on_bottom.css (C) Rename the file to just '''userChrome.css''' The next time you quit Firefox and start it up again, it should discover that file and apply the rules.

Firefox's style or appearance can be modified by creating a chrome folder inside your Firefox profile folder and then placing a userChrome.css file inside, that includes a custom style rule. The rules you put in the userChrome.css file will override the default styles in Firefox.

Note: Custom style rules might not work every time because of other factors (such as incompatibility with other custom style rules) beyond the Mozilla community's control. Your custom style rule might also stop working each time a new Firefox release comes out.

Here's how to modify Firefox so that tabs are shown below the address (URL) bar instead of at the top (see this help page and our community member's video starting at 8:45 for more detail).

1. Open your currently active profile folder: Type about:support in the Firefox address bar and, under the "Application Basics" section next to "Profile Folder", click Open Folder (Windows) Open Directory (Linux) or Show in Finder (Mac).
2. Create a new folder named chrome inside the profile folder.
   • Create a desktop shortcut to the chrome folder, if you wish, for easier future access.
3. Create a new text file inside the chrome folder and name it userChrome.css (on Windows, make sure that file name extensions are not hidden and that the file is named userChrome.css and not userChrome.css.txt).
4. Go to https://www.userchrome.org/what-is-userchrome-css.html and copy the CSS rules under the "Move the Tab Bar Below the Other Toolbars" example (here).
5. Open the userChrome.css file you created earlier, paste the CSS rules inside the file, close the file and save your changes.
6. Restart Firefox.

(Tip: Turn on your title bar or menu bar after you've made these changes.)

---

Alternative solution

(A) You need to create a new chrome folder in your Firefox profile folder. This article has the steps for that (#1, #2, and optionally #3):
https://www.userchrome.org/how-create-userchrome-css.html

(B) Download the following file and move it into that chrome folder:
https://www.userchrome.org/samples/userChrome-tabs_on_bottom.css

(C) Rename the file to just userChrome.css

The next time you quit Firefox and start it up again, it should discover that file and apply the rules.