Posted: . At: 8:38 AM. This was 3 years ago. Post ID: 15453
Page permalink. WordPress uses cookies, or tiny pieces of information stored on your computer, to verify who you are. There are cookies for logged in users and for commenters.
These cookies expire two weeks after they are set.



Sponsored



How to color the menu and toolbar areas of Firefox and have them all one color.

by

This userChrome.css file will colour your Firefox browser toolbars all one colour.

userChrome.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/* Do not remove the @namespace line -- it's required for correct functioning */
/*@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");*/
 
@media (-moz-proton) {
	menupopup:not(.in-menulist) > menuitem, 
	menupopup:not(.in-menulist) > menu {
	  padding-block: 2px !important;
	  min-height: unset !important; /* v92.0 - for padding below 4px */
	  font-family: monospace !important;
	}
 
	:root {
	  --arrowpanel-menuitem-padding: 2px 4px !important;
	}
 
	{
	    font-size: 10pt !important
	}
 
	menupopup > * {
	   font-size: 10pt !important
	}
	#urlbar {
		font-family: monospace !important;
		max-width: 900px !important;
		text-align: right !important;
		background-color: #363d42 !important;
		border-style: dashed !important;
		border-width: 0.3px !important;
	}
	#urlbar-background {
		background: #363d42 !important;
	}
    toolbar#TabsToolbar
    {
        -moz-appearance: none !important;
        background-color: #363d42 !important;
    }
 
    #PlacesToolbar {
        background-color: #363d42 !important;
        font-family: monospace !important;
        font-size: 9pt !important;
    }
    navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) { 
        max-height: 50px !important;
        background-color: #363d42 !important;
        font-family: monospace !important;
    }
 
    #toolbar-menubar, #menubar-items, #main-menubar {
        background-color: #363d42 !important;
        background-image: none !important;
        font-family: monospace !important;
    }
    #main-menubar, #nav-bar, #customToolbars, #TabsToolbar, #PersonalToolbar, #web-developer-toolbar, #browser-bottombox {
        background-color: #363d42 !important;
        border: none !important;
        box-shadow: none !important;
    }
}

This is a great way to customize the browser.

Follow the instructions in this post to get the userChrome.css file created and working. This requires an about:config tweak to switch on the functionality.

https://securitronlinux.com/bejiitaswrath/how-to-have-less-padding-in-the-menu-area-of-firefox-92/.

This edit to the URL bar will blend it into the background and then make the font smaller.

	#urlbar {
		font-family: monospace !important;
		max-width: 900px !important;
		text-align: right !important;
		background-color: #363d42 !important;
		border-style: none !important;
		border-width: 0.3px !important;
		font-size: 9pt !important;
	}

These changes are great. Using CSS variables does not seem to work properly for some reason, but I am happy with this code and how it turned out.

For Firefox 99, use this version of the code. This is the chrome/userChrome.css file. This still works with the latest Firefox release.

chrome/userChrome.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

/* Do not remove the @namespace line -- it's required for correct functioning */
/*@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");*/
 
/* added after awful 89.0 proton release */
/* Reduce line spacing in bookmarks and other pull-down menus: */
/* another fix after 92.0 release */
 
menupopup > menuitem, popup > menuitem, 
menupopup > menu,     popup > menu {
-moz-appearance: none !important; 
padding-top:     0px  !important; 
padding-bottom:  0px  !important;
padding-block:   0px  !important;
}
 
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/
menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 0px   !important;    /* reduce to 0-4 px as needed */ 
  min-height:    unset !important;    /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}
 
.menu-accel, .menu-iconic-accel, .menu-text, .menu-iconic-text {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
 
menuseparator {margin: 0px 0px 0px 0px !important;}
 
#TabsToolbar{
  font-size: 8pt !important;
  max-height: 3.8em !important;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
  padding: 0.5px !important;
}
#urlbar {
  font-size: 8pt !important;
  max-height: 3.8em !important;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
  padding: 0.5px !important;
}
#urlbar-background {
  background: #363d42 !important;
}
#main-menubar, #nav-bar, #customToolbars, #TabsToolbar, #PersonalToolbar, #web-developer-toolbar, #browser-bottombox {
  background-color: #363d42 !important;
  border: none !important;
  box-shadow: none !important;
}
 
navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) { 
  max-height: 50px !important;
  background-color: #363d42 !important;
  font-family: monospace !important;
}
 
#toolbar-menubar, #menubar-items, #main-menubar {
  background-color: #363d42 !important;
  background-image: none !important;
  font-family: monospace !important;
}

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.