FirefoxCSS-Store
firefox-csshacks
Our great sponsors
FirefoxCSS-Store | firefox-csshacks | |
---|---|---|
179 | 668 | |
636 | 2,801 | |
6.4% | - | |
9.1 | 8.5 | |
4 days ago | 1 day ago | |
JavaScript | CSS | |
GNU General Public License v3.0 or later | Mozilla Public License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
FirefoxCSS-Store
- Fox11 - theme with auto-color, Mica, auto-hide nav-bar support and Edge/Chrome restyle 2023
-
Future of /r/FirefoxCSS
yes, we can put "links of interest" on the web to collect all the communities, websites, or whatever related to firefox themes.
-
Brave Browser introduces vertical tabs
You can also remove that unnecessarily large sidebar header that Firefox insists on not letting users disable via normal means with userchrome mods. Some such setups can be seen at https://firefoxcss-store.github.io/.
-
There are no theme setups. Just doubts and clarifications.
I like to use this
-
Any way to make firefox look like the good ol' Windows 7 days?
you can find others here https://firefoxcss-store.github.io/
-
Getting a new computer soon, what browser should I use?
UI: really based on preference but firefox has the most customization there is a whole website for firefox CSS themes
- Customizing the UI — toolbar, address bar, and tabs
-
I think it's hard to decide. Help me guys!
Firefox has a lot better themes https://firefoxcss-store.github.io/
-
High Contrast, light, distraction free Firefox Theme for e-ink monitor?
But check out https://firefoxcss-store.github.io/. You may find it useful.
firefox-csshacks
- Show HN: Advanced Tab Manager for Firefox
-
Restore the tab bar under the browser tab
Couple of suggestions: this, current styles including some for centered tab content.
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_content.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container,
-
help a noob!
i've been playing around with some custom css (helped by the resources in this repo) and i love how is it looking. however, i need help with two things: 1. How do i remove that awful space at the left of the nav controls? I'd love if the url took all that extra space instead 2. I don't know what i did but I wanna get my title bar and WinButtons (Min,Max,Close) again.
-
Separate audio icon when combining favicon and close button
As far as I can tell, combined_favicon_and_tab_close_button.css works perfectly fine with inline_tab_audio_icon.css
I tried https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/inline_tab_audio_icons.css to separate out the audio button from the favicon, but when playing audio, I instead get "(blank) 🔊 Website title"
You'll need to add bunch more rules to make the buttons behave like you want. See the style i linked earlier for how it works
-
Umpteenth Firefox update (113.0), umpteenth CSS customization shenanigans: can anyone please help me restore tabs on bottom? Thank you!
/* This part does the tabs on bottom. */ #titlebar{ order: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(20px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } /* This part is from pre Firefox 113 and does the transparency */ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Modify to change window drag space width */ /* Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css */ /* Transparent toolbars */ #main-window[lwthemetextcolor="bright"] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { background-color: transparent !important; background-image: none !important; } :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } .browser-toolbar{ background: transparent !important; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; }
-
How to move tabs to below the bookmark toolbar?
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css */ *the code below moves tabs to below the bookmarks bar*/ :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 30px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; }
What are some alternatives?
WhiteSur-gtk-theme - MacOS Big Sur like theme for Gnome desktops
firefox-sidebery-minimal-style - Universal minimal style for Firefox and Sidebery
Zotero-Dark-Theme - userChrome.css file for a Zotero dark theme. Suggestions for improvements are welcome.
sidebery - Firefox extension for managing tabs and bookmarks in sidebar.
Firefox-UI-Fix - 🦊 I respect proton UI and aim to improve it.
firefox-moonlight-dracula - A fork of https://github.com/eduardhojbota/moonlight-userChrome with Dracula colors
ff-ultra-compact-mode - A Compact Mode for Firefox Proton
slick-fox - :fox_face: A firefox config that has rounded tabs and a url bar that can disappear when not selected on. It works with any theme.
firefox-91plus-photon-userchrome - userChrome.css to restore the classic Photon look on Firefox 91+
Sweet-Pop - Sweet_Pop! Beautify, Customize Firefox. Minimalist animated oneliner theme for Firefox perfectly matching Sweet Dark.