Distraction Free Firefox

Distraction-Free-Firefox-1.md

Hiding the Firefox tab bar completely can be achieved through custom CSS, but it requires some manual steps since there's no direct option to disable it in Firefox's user interface. Here's how to do it:

1. Enable UserChrome.css Support in Firefox:

• Type about:config in the Firefox address bar and press Enter.
• Accept any warnings and proceed.
• Search for the following setting: toolkit.legacyUserProfileCustomizations.stylesheets.
• Double-click it to set it to true.

2. Find Your Firefox Profile Folder:

• Type about:profiles in the address bar and press Enter.
• Look for the Root Directory of your active profile and click Open Folder.

3. Create a chrome Folder (if not already present):

• In the profile folder that just opened, create a new folder called chrome.

4. Create or Edit userChrome.css:

• Inside the chrome folder, create a file named userChrome.css (if it doesn't already exist).

• Open the file with a text editor and add the following code to hide the tab bar:

  /* Hide the tab bar */
  #TabsToolbar {
      visibility: collapse !important;
  }

5. Restart Firefox:

• After saving the file, restart Firefox to apply the changes.

This will hide the tab bar completely. Keep in mind that this could make it difficult to switch between tabs, so using keyboard shortcuts like Ctrl+Tab (for cycling between tabs) or the Tab List button might be useful.

Let me know if you need further tweaks!

Distraction-Free-Firefox-2.md

I'm glad you liked the tip! Here are some cool Firefox customization tricks using userChrome.css that can make your browsing experience more personalized:

1. Move the URL Bar to the Bottom of the Screen

Want a unique layout? Move the address bar to the bottom of the window!

/* Move URL bar to the bottom */
#nav-bar {
    position: fixed;
    bottom: 0;
    width: 100vw;
}

#browser {
    margin-bottom: 30px; /* Adjust height based on nav-bar size */
}

2. Remove the Title Bar

If you want a clean look with only the navigation and tab bars visible, you can remove the window's title bar.

/* Hide the title bar */
#titlebar {
    display: none !important;
}

3. Compact Mode for Minimalism

For a more compact browsing experience, you can reduce padding and make the UI more minimalistic.

/* Compact UI */
#TabsToolbar, #nav-bar, #PersonalToolbar {
    max-height: 28px !important;
}

#nav-bar .toolbarbutton-1 {
    padding: 0 2px !important;
}

#tabbrowser-tabs {
    height: 24px !important;
}

4. Center Tabs for a Unique Look

This trick centers your tabs in the middle of the tab bar.

/* Center the tabs */
.tabbrowser-tab {
    margin-left: auto !important;
    margin-right: auto !important;
}

5. Hide the Bookmark Bar Until Hovered

If you want to declutter your browser, you can hide the bookmark toolbar and only reveal it when you hover over it.

/* Hide bookmark toolbar until hover */
#PersonalToolbar {
    visibility: collapse;
}

#navigator-toolbox:hover #PersonalToolbar {
    visibility: visible;
}

6. Rounded Tabs for a Sleeker Look

Add some rounded corners to your tabs for a modern design.

/* Rounded tabs */
.tab-background {
    border-radius: 12px !important;
}

7. Change the Color of Active Tab

Make the active tab stand out by changing its background and text color.

/* Customize active tab */
.tabbrowser-tab[selected="true"] .tab-background {
    background-color: #ffcc00 !important;
    color: black !important;
}

8. Move Tabs Below the Address Bar (Classic Look)

If you miss the old Firefox layout, you can move tabs below the address bar.

/* Tabs below the address bar */
#TabsToolbar {
    -moz-box-ordinal-group: 3;
}

#nav-bar {
    -moz-box-ordinal-group: 1;
}

9. Hide the Close Button on Tabs

If you accidentally close tabs frequently, you can hide the close button entirely or only show it on the active tab.

/* Hide close button on all tabs */
.tab-close-button {
    display: none !important;
}

/* Show close button only on active tab */
.tabbrowser-tab:not([selected="true"]) .tab-close-button {
    display: none !important;
}

10. Thicker Scrollbars for Easier Scrolling

Make scrollbars thicker if you prefer larger ones.

/* Thicker scrollbar */
scrollbar {
    width: 16px;
}

scrollbar-thumb {
    background-color: #999999;
    border-radius: 10px;
}

You can mix and match these tricks to create a Firefox layout that’s perfect for your workflow and aesthetic preferences. Let me know if you want more customizations or need help combining any of these!

userChrome.css

/* Hide the tab bar */
#TabsToolbar {
    visibility: collapse !important;
}

/* Move URL bar to the bottom */
#nav-bar {
    position: fixed;
    bottom: 0;
    width: 100vw;
}

#browser {
    margin-bottom: 30px; /* Adjust height based on nav-bar size */
}


#nav-bar .toolbarbutton-1 {
    padding: 0 2px !important;
}

/* Center the tabs */
.tabbrowser-tab {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide bookmark toolbar until hover */
/* #PersonalToolbar { */
    /* visibility: collapse; */
/* } */

#navigator-toolbox:hover #PersonalToolbar {
    visibility: visible;
}

/* Rounded tabs */
.tab-background {
    border-radius: 4px !important;
}

/* Tabs below the address bar */
#TabsToolbar {
    -moz-box-ordinal-group: 3;
}

#nav-bar {
    -moz-box-ordinal-group: 1;
}

/* Hide close button on all tabs */
.tab-close-button {
    display: none !important;
}

/* Show close button only on active tab */
.tabbrowser-tab:not([selected="true"]) .tab-close-button {
    display: none !important;
}

/* Auto-hide tab bar when only one tab is open */
.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"] {
    display: none !important;
}


/* Hide some context menu options */
menuitem[label="Bookmark This Page"],
menuitem[label="Save Page to Pocket"],
menuitem[label="Select All"],
menuitem[label="View Page Source"],
menuitem[label="Inspect Accessibility Properties"],
menuitem[label="Inspect (Q)"],
menuitem[label="Video DownloadHelper"],
menuitem[label="Save Page As"],
menuitem[label="Take Screenshot"],
menuseparator
{
    display: none !important;
}

/* Transparent address bar */
#urlbar {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
}


/* Move bookmark toolbar above tabs */
#PersonalToolbar {
    -moz-box-ordinal-group: 1 !important;
}

#TabsToolbar {
    -moz-box-ordinal-group: 2 !important;
}


/* Dim inactive tabs */
.tabbrowser-tab:not([selected="true"]) {
    opacity: 0.8 !important;
}

.tabbrowser-tab[selected="true"] {
    opacity: 1 !important;
}

/* Hide all extension icons */
#nav-bar toolbarbutton[class="browser-action"] {
    display: none !important;
}


/* Blank new tab page */
@-moz-document url("about:newtab") {
    body {
        display: none !important;
    }
}

/* Hide the status bar */
#statuspanel {
    /*display: none !important;*/
}

/* Hide any empty toolbar at the bottom of the window */
#navigator-toolbox + toolbar,
#browser-bottombox {
    display: none !important;
}

/* Hide empty toolbars, extension bars, or any toolbars at the bottom */
/*#addon-bar, 
#statuspanel,
#findbar, 
#downloads-button, 
#PersonalToolbar {
    display*/: none !important;
}

/* Hide bottom toolbars and elements */
#addon-bar,
#browser-bottombox,
#FindToolbar,
#download-button,
#statuspanel,
#sidebar-box,
#sidebar-header,
#tabbrowser-bottom-box,
#TabsToolbar-bottom-box,
#sync-button,
#navigator-toolbox + toolbar {
    display: none !important;
}

/* Hide add-on bar or any remnants */
#addon-bar,
#addon-bar-panel,
#extensions-container,
#customizableui-special-toolbars {
    display: none !important;
}