UserChrome-Tweaks
A community maintained repository of userChrome.css tweaks for Firefox (by Timvde)
PageLoadingEffects
Modern ways of revealing new content using SVG animations. (by codrops)
Our great sponsors
UserChrome-Tweaks | PageLoadingEffects | |
---|---|---|
8 | 1 | |
1,166 | 638 | |
- | 0.0% | |
0.6 | 0.0 | |
almost 3 years ago | almost 10 years ago | |
CSS | CSS | |
GNU General Public License v3.0 only | - |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
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.
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.
UserChrome-Tweaks
Posts with mentions or reviews of UserChrome-Tweaks.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-04-25.
-
Been fiddling around with userChrome.css since I got bothered with TreeStyleTab's lack of horizontal screen space; no tabs and auto-hide sidebar! :D
I've done some weird things with licenses as some of the titlebar code is borrowed from the Timvde user tweaks repo but everyone is credited.
-
Mouseover icon replace?
Upd. Manage to solve it thanks to : https://github.com/Timvde/UserChrome-Tweaks
-
Can anything be done to widen tabs?
There seems to be a separate css for windows. Can't really test it now but here it is https://github.com/Timvde/UserChrome-Tweaks/blob/master/tabs/hide-tabs-windows.css
-
Putting navbar and menu bar on the same level, proton UI edition
/* TABS: on bottom - Firefox 65 and later */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; /* width: 100vw !important; */ } :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */ } #tabbrowser-tabs { width: 100vw !important; } :root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */ } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /* adjust */ } :root #tabbrowser-tabs { --tab-min-width: 80px !important; /* adjust */ } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* windows controls - hide */ #TabsToolbar #window-controls {display: none !important;} /* caption box - hide */ :root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} /* move caption buttons to right of Tab bar */ #main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; right: 0 !important; top: calc(6px + var(--tab-min-height)) !important; display: block !important; visibility: visible !important; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;} /* URL bar on same level as Menu Bar */ :root{ --uc-navbar-height: 32px; } #TabsToolbar{-moz-box-ordinal-group: 2;} #toolbar-menubar{ height: var(--uc-navbar-height); background-color: var(--toolbar-bgcolor); } #nav-bar{ padding-right: 144px; margin-top: calc(var(--uc-navbar-height) * -1); margin-left: 300px; background-color: transparent !important; } /* Black background when loading new page */ browser { background-color: #000 !important; } /* tabs on bottom #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} */ /* Change the tab-bar height tab {height: 20px !important; } .tabbrowser-strip { height: 20px !important; } */ #PanelUI-menu-button { display: none; } #nav-bar-overflow-button { display: none !important;} #back-button, #forward-button { display: none; } /* * Make the toolbar extra-compact (similar to v56 with CTR) * Applies to Compact density * Contributor(s): Alex Vallat * https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/compact-toolbars.css */ :root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: unset !important; min-height: 24px !important; } :root[uidensity=compact] #identity-box { max-height: 22px; } :root[uidensity=compact] #nav-bar .toolbarbutton-1 { padding: 0px !important; } /* Compatibility with auto-hide.css */ :root[uidensity=compact] #navigator-toolbox { --nav-bar-height: 31px !important; }
-
Changing the color of right click menu
But I got it to work by replacing the original context menu section (lines 34~574) with this css code
-
FF89 Context Menu Background Color
Hi everyone, I've been going over my entire userchrome since FF updated to 89 today, I cant seem to work out how to change the context menus background, it seems there is a new element that supersedes older css for the context menus, if you were to try this https://github.com/Timvde/UserChrome-Tweaks/blob/master/context-menu/dark-thin-context-menu.css
-
Firefox 89.0 Beta with New Look
If you need to tweak firefox interface more, these resources will help:
https://www.reddit.com/r/FirefoxCSS/
-
CSS Deep
Timvde/UserChrome-Tweaks - A community maintained repository of userChrome.css tweaks for Firefox
PageLoadingEffects
Posts with mentions or reviews of PageLoadingEffects.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-02-26.
-
CSS Deep
codrops/PageLoadingEffects - Modern ways of revealing new content using SVG animations.
What are some alternatives?
When comparing UserChrome-Tweaks and PageLoadingEffects you can also consider the following projects:
SpinKit - A collection of loading indicators animated with CSS
topbar - Tiny & beautiful site-wide progress indicator
humane-js - A simple, modern, browser notification system
Spin.js - A spinning activity indicator
css-loaders - A collection of loading spinners animated with CSS
pace - Automatically add a progress bar to your site.
FirefoxW10ContextMenus - Emulates the Windows 10 context menus in Firefox.
awesome-conferences
Ladda - Buttons with built-in loading indicators.
pnotify - Beautiful JavaScript notifications with Web Notifications support.
Gutenberg - Modern framework to print the web correctly.
UserChrome-Tweaks vs SpinKit
PageLoadingEffects vs topbar
UserChrome-Tweaks vs humane-js
PageLoadingEffects vs Spin.js
UserChrome-Tweaks vs css-loaders
PageLoadingEffects vs pace
UserChrome-Tweaks vs FirefoxW10ContextMenus
PageLoadingEffects vs SpinKit
UserChrome-Tweaks vs awesome-conferences
PageLoadingEffects vs Ladda
UserChrome-Tweaks vs pnotify
PageLoadingEffects vs Gutenberg