My personal Firefox custom CSS—designed to remove the clutter that comes default with Firefox, especially when used in conjunction with Tree Style Tabs. The main goal was to maximize screen and browser real estate.
Tabs hidden on top bar
Tabs are hidden because of the redundancy with Tree Style Tabs
#TabsToolbar{ visibility: collapse !important }
This is to done to increase the compactness of the browser window, for that one-line nav bar.
#nav-bar {
margin-right:140px;
}
#TabsToolbar .titlebar-buttonbox-container {
visibility: visible !important;
position: absolute;
display: block;
top: 14px;
right: 1px;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
display: none;
}
Edit the min-width
value to change the breakpoint size on which Cascade will switch to the oneline layout.
@media (min-width: 1000px) {
[...]
}
- Type
about:config
into your URL bar. Click on the I accept the risk button if you're shown a warning. - Seach for
toolkit.legacyUserProfileCustomizations.stylesheets
and set totrue
. - Go to your profile folder:
- Linux:
$HOME/.mozilla/firefox/######.default-release/
- MacOS:
Users/[USERNAME]/Library/Application Support/Firefox/Profiles/######.default-release
- Windows:
C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\######.default-release
- Linux:
- If it doesn't exist, create a folder called
chrome
. - Copy
userChrome.css
into that folder.
- Update preview to showcase pinned tabs