-
Notifications
You must be signed in to change notification settings - Fork 58
More Tweaks
Andres Monge edited this page Sep 24, 2019
·
24 revisions
-
userChrome.css
-
Navigation Bar
- Windows 7 Aero Theme - Transparent Navbar
- Change color of nav-bar buttons
- Remove background color of sidebar button when active
- Remove forward and back buttons
- Remove owner name for SSL certs
- Remove containers name and symbol
- Remove page actions menu (3 dots)
- Put refresh button "inside" address bar
- Remove reload button on new tab page
- Remove separator before hamburger menu
- Remove hamburger menu button
- Invert color of Neat URL webextension icon
- Navigation Bar on the bottom of the UI
- Tabs Bar
- Bookmarks Bar
- Sidebar
- Combined Setups
-
Navigation Bar
- userChrome.js
- Additional resources
(generated by Table of Contents Generator for GitHub Wiki)
@-moz-document url-prefix(chrome://) {
@media screen and (-moz-os-version:windows-win7) {
window {
background-color: transparent !important;
}
}
}/* Change the color of buttons in the nav-bar (sidebar, more, hamburger)*/
#nav-bar-overflow-button, #PanelUI-menu-button, #sidebar-button {
opacity: 1 !important;
fill: var(--primary-accent-color) !important;
}/* Change the background color of the sidebar button when active */
#sidebar-button[checked] > .toolbarbutton-icon{ background-color: inherit !important; }/* Remove the forward and back buttons */
#back-button, #forward-button { display: none !important; }/* Remove owner name for SSL certs */
#identity-box.verifiedIdentity #identity-icon-labels {display: none !important;}/* Remove containers name and symbol */
#userContext-label, #userContext-indicator { display: none !important;}/* Remove Page Actions Menu */
#pageActionButton {
display: none !important;
}This tweak requires that you first put the refresh button directly to the right of the address bar.
/* Put refresh button "inside" address bar */
#pageActionSeparator{
margin-right:26px !important;
}
#stop-reload-button .toolbarbutton-icon{
border-radius: 0px !important;
padding: 5px 6px !important;
}
#stop-reload-button{
transform: translateX(-62px);
border-radius:0px !important;
margin-right:-32px !important;
}/* Hide reload button */
#main-window[title^="New Tab"] #stop-reload-button { display: none !important; }
#main-window[title^="Nightly"] #stop-reload-button { display: none !important; }/* Remove separator before hamburger menu */
#PanelUI-button {
border-inline-start: 0px !important;
}/* Remove hamburger menu button */
#PanelUI-menu-button {display: none;}/* Invert color of Neat URL icon */
toolbarbutton#neaturl_hugsmile_eu-browser-action {filter:invert(95%) !important;}Original navigation bar to bottom on UI repository: bottom-nav-bar
#browser {
margin-bottom: 32px !important;
}
#nav-bar {
bottom: 0 !important;
height: 32px !important;
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
/* Make it full width, after re-position */
#nav-bar-customization-target {
width: calc(100% - 60px) !important;
}
/* Fix the main menu action */
#PanelUI-button {
display: inline-block !important;
height: 32px !important;
position: absolute !important;
right: 3px;
top: 3px !important;
}
#nav-bar-overflow-button {
display: inline-block !important;
height: 32px !important;
}
/* position the result list above (not below) the address bar */
#urlbar-results {
bottom: 32px;
right: 0px;
width: 100%;
margin-top: -410px !important;
}/* Remove window buttons (Close, Minimize, Fullscreen) */
#titlebar {display: none !important;}
#TabsToolbar .titlebar-placeholder {display: none !important; }/*
* Makes the favicon near-grayscale to match dark mode but remain distinguishable
*
* Contributor(s): Madis0, Timvde, capta
*/
tab .tab-icon, .tab-icon-image {
/* Tweak these values and their order, as you prefer */
filter: invert(1) saturate(2) brightness(.35) hue-rotate(180deg) grayscale(.95) saturate(2) brightness(1.5);
}/* Favicon on Right */
.tab-icon-image {
-moz-box-ordinal-group: 2 !important;
margin-left: 3px !important;
margin-right: 1px !important;
}.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }
.tabbrowser-tab:not([pinned]):hover .tab-icon-image {
display: none !important;
}
.tabbrowser-tab:hover .tab-throbber,
.tabbrowser-tab:hover .tab-icon-image,
.tabbrowser-tab:hover .tab-sharing-icon-overlay,
.tabbrowser-tab:hover .tab-icon-overlay,
.tabbrowser-tab:hover .tab-label-container,
.tabbrowser-tab:hover .tab-icon-sound {
-moz-box-ordinal-group: 2 !important;
}
.tabbrowser-tab .tab-close-button {
margin-left: -2px !important;
margin-right: 2px !important;
}.tab-icon-image {
-moz-box-ordinal-group: 2 !important;
margin-left: 3px !important;
margin-right: 1px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }
.tabbrowser-tab:not([pinned]):hover .tab-icon-image {
display: none !important;
}.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
visibility: collapse !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important;
display: block !important;
}/* Auto-hide bookmarks bar (show only on nav-bar hover) */
#PersonalToolbar{
opacity:0 !important;
margin-top: -23px !important;
transition: all 0.4s ease 0s !important;
}
#navigator-toolbox:hover > #PersonalToolbar{
visibility: visible !important;
margin-top: 0px !important;
transition: all 0.4s ease 0s !important;
opacity: 1 !important;
}/* Hides bookmark text for all bookmarks displayed in a toolbar */
.bookmark-item > .toolbarbutton-text { display: none !important; }#sidebar, #sidebar-box { min-width: 2px !important; }/*
* One-liner, no tabs bar
*
* Contributor(s): @krruzic
*/
/* hide tabs */
#tabbrowser-tabs { visibility: hidden !important; }
tab { display: none !important; }
/* CSS to make urlbar and window controls 1 line */
#nav-bar {
margin-bottom: -1px !important; /* remove navbar bottom 1px border */
margin-top: -30px !important;
margin-right: 7.2vw !important;
border-top: none !important;
}
/* Remove padding above tabbar in compact mode */
#main-window[sizemode="normal"] > #titlebar {
-moz-appearance: initial !important;
}
/* Back & Forward buttons */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
transform: scale(0.9, 0.9) !important;
margin-left: -2px !important;
margin-right: -2px !important;
}
/* Move hamburger menu to the left */
#PanelUI-button,
#customization-panel-container,
#customization-panelWrapper .panel-arrow {
-moz-box-ordinal-group: 0 !important;
margin-right: -6px !important;
}
#appMenu-popup {
margin-right: -258px !important;
}
#appMenu-popup .panel-arrow {
margin-right: 248px !important;
}
/* More tools... button */
#nav-bar-overflow-button {
transform: scale(0.9, 0.9) !important;
}
#titlebar-buttonbox {
background: var(--chrome-secondary-background-color) !important;
}All credit for the following userChrome.js tweaks go to the original developers (linked below) - I did not have a part in writing these, I am merely passing them along.
For more information about what userChrome.js is, how it works, and what it can do, see the following links:
-
https://github.com/Sporif/firefox-quantum-userchromejs
-
https://www.reddit.com/r/FirefoxCSS/comments/7jj3uy/how_to_add_userchromejs_support_with_just_css/
To get these tweaks to work, begin by adding the content found at the following link to your userChrome.css file:
Next, add the corresponding file to your chrome folder for any desired tweak.
Adds a restart button to your browser.
Adds a button to open the browser toolbox.
- https://github.com/Endor8/userChrome.js/blob/master/Firefox-57/Dblclick_ReloadTab.uc.js
Repository of userChrome.css tweaks.
Great website about userChrome.css, with helpful information, style recipes and resources:
Tweaks by the author of Classic Theme Restorer
Many of userChrome.js tweaks listed above came from the same repo. There are plenty more availabe there:
The following sites contain a multitude of graphics if you are looking to change the look of Firefox's built in icons.