Skip to content

More Tweaks

Jump to bottom Edit New page
HUANTING-WU edited this page Mar 17, 2019 · 24 revisions

(generated by Table of Contents Generator for GitHub Wiki)

userChrome.css

Navigation Bar

Windows 7 Aero Theme - Transparent Navbar

@-moz-document url-prefix(chrome://) {
  @media screen and (-moz-os-version:windows-win7) {
    window {
      background-color: transparent !important;
    }
  }
}

Change color of nav-bar buttons

/* 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;
}

Remove background color of sidebar button when active

/* Change the background color of the sidebar button when active */
#sidebar-button[checked] > .toolbarbutton-icon{ background-color: inherit !important; }

Remove forward and back buttons

/* Remove the forward and back buttons */
#back-button, #forward-button  { display: none !important; }

Remove owner name for SSL certs

/* Remove owner name for SSL certs */
#identity-box.verifiedIdentity #identity-icon-labels {display: none !important;}

Remove containers name and symbol

/* Remove containers name and symbol */
#userContext-label, #userContext-indicator { display: none !important;}

Remove page actions menu (3 dots)

/* Remove Page Actions Menu */
#pageActionButton {
  display: none !important;
}

Put refresh button "inside" address bar

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;
}

Remove reload button on new tab page

/* 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

/* Remove separator before hamburger menu */
#PanelUI-button {
    border-inline-start: 0px !important;
}

Remove hamburger menu button

/* Remove hamburger menu button */
#PanelUI-menu-button {display: none;}

Invert color of Neat URL webextension icon

/* Invert color of Neat URL icon */
toolbarbutton#neaturl_hugsmile_eu-browser-action {filter:invert(95%) !important;}

Tabs Bar

Mac - remove window buttons (Close, Minimize, Fullscreen)

/* Remove window buttons (Close, Minimize, Fullscreen) */
#titlebar {display: none !important;}
#TabsToolbar .titlebar-placeholder {display: none !important; }

Dark favicons

/*
 * 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);
}

Favicons on right

/* Favicon on Right */
.tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
  margin-left: 3px !important;
  margin-right: 1px !important;
}

Turn favicons into close buttons on hover

.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;
}

Turn favicons into close buttons on hover on the 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;
}

Show close button on hover

.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;
}

Bookmarks Bar

Auto-hide bookmarks bar (show only on nav-bar hover)

/* 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;
}

Hide bookmark labels (text) for bookmarks in bookmarks toolbar

/* Hides bookmark text for all bookmarks displayed in a toolbar */
.bookmark-item > .toolbarbutton-text  { display: none !important; }

Sidebar

Decrease minimum width

#sidebar, #sidebar-box { min-width: 2px !important; }

Combined Setups

One-liner: no tabs bar

/*
 * 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;
}

userChrome.js

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:

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.

Dark scroll bars

Restart button

Adds a restart button to your browser.

Browser toolbox button

Adds a button to open the browser toolbox.

Double click tab to reload

Middle click tab bar to undo Close

Open profile folder

Hide tab bar with one tab

Additional resources

userChrome.css

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

userChrome.js

Many of userChrome.js tweaks listed above came from the same repo. There are plenty more availabe there:

Icons

The following sites contain a multitude of graphics if you are looking to change the look of Firefox's built in icons.

Add a custom footer

Table of Contents

Background Information

Installation

Customization

Webextensions

Known Problems

Extending the Dark Theme

More Tweaks

Development

Clone this wiki locally