Note: If you didnt notice it, in source code is updated version for 128 ESR, in releases is old one.
palemoonSVG.zip
Now you can have Pale Moon/Mypal SVG icons in Echelon.
Place in \chrome\assets\images\firefox-4\toolbar\ folder
note: Some icons like history icon are in different version folders, history should be in firefox-29\toolbar.
How to change menu button text
Open chrome\JS\echelon_appmenu.uc.js (best is in Visual Studio Code).
Find line with "let browserName =" (without ")
Replace it to let browserName = "Your Name";
In echelon settings, change branding to something other, and after restart set it back to Firefox
Name should be applied now.
How to change menu button color
In echelon settings, set style to Firefox
Open chrome\branding\firefox\content\branding.css
Add these lines (or if they arent copied correctly, copy them from Auora or other branding)
:root:not([privatebrowsingmode=temporary]) {
--appmenu-button-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-hover-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-active-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-normal-background: linear-gradient(hsl(211, 33%, 32%), hsl(209, 53%, 10%) 95%) !important;
--appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 10%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, hsla(211, 70%, 83%, .5), hsla(211, 70%, 83%, 0)),
linear-gradient(hsl(211, 33%, 32%), hsl(209, 53%, 10%) 95%) !important;
--appmenu-button-active-background: linear-gradient(hsl(211, 33%, 26%), hsl(209, 53%, 6%) 95%) !important;
--appmenu-button-normal-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset, 0 0 2px 1px hsla(211, 65%, 85%, .15) inset !important;
--appmenu-button-hover-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset,
0 0 2px 1px hsla(210, 48%, 90%, .4) inset,
0 -1px 0 hsla(210, 48%, 90%, .2) inset !important;
--appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
0 1px 1px rgba(0, 0, 0, .2) inset !important;
}
Try to find color you want. Colors are in HSL format, but you can just overwritte hsl to rgb and hsla to rgba. Classic Theme Restorer for Basilisk can also help.
How to remove website name from location bar
Remove or rename chrome\JS\echelon_urlbar.uc.js file.
How to make Basic background on Windows 10/11
place these files in chrome\ _chrome_user.css file (you need to create)
#navigator-toolbox {
background-color: #B9D1EA !important;
}
Or, if you want colors like in Basilisk (configured for Australis, on classic theme remove some lines)
#navigator-toolbox {
background-color: #202340 !important;
}
#main-menubar > menu {
color: white !important;
}
.titlebar-button {
color: white !important;
fill: white !important;
stroke: white !important;
}
.tabbrowser-tab:not([selected="true"]) .tab-label {
color: white !important;
opacity: 1 !important;
}
#tabs-newtab-button image,
#tabs-newtab-button .toolbarbutton-icon {
filter: invert(100%) !important;
}
.tabbrowser-tab:not([selected="true"]) .tab-close-button {
filter: invert(100%) !important;
}
Mypal button color settings
:root:not([privatebrowsingmode=temporary]) {
--appmenu-button-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-hover-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-active-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-normal-background: -moz-radial-gradient(center bottom, farthest-side, rgba(26, 30, 32, 0.4) 50%, hsla(210, 48%, 90%, 0.2) 100%),
-moz-radial-gradient(center bottom, farthest-side, rgba(0, 0, 0, 0.5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(0, 218, 54), rgb(0, 218, 54) 95%) !important;
--appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 50%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgba(0, 0, 0, 0.5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(0, 218, 54), rgb(0, 218, 54) 95%) !important;
--appmenu-button-active-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 50%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgba(0, 0, 0, 0.5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(0, 168, 42), rgb(0, 218, 54) 95%) !important;
--appmenu-button-normal-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset, 0 0 2px 1px hsla(211, 65%, 85%, .15) inset !important;
--appmenu-button-hover-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset,
0 0 2px 1px hsla(210, 48%, 90%, .4) inset,
0 -1px 0 hsla(210, 48%, 90%, .2) inset !important;
--appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
0 1px 1px rgba(0, 0, 0, .2) inset !important;
}

Pale moon button color settings
:root:not([privatebrowsingmode=temporary]) {
--appmenu-button-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-hover-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-active-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-normal-background: linear-gradient(rgb(92, 181, 245), rgb(48, 123, 221) 95%) !important;
--appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 10%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, hsla(211, 70%, 83%, .5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(74, 148, 201), rgb(30, 78, 141) 95%) !important;
--appmenu-button-active-background: linear-gradient(rgb(95, 181, 243), rgb(30, 78, 141) 95%) !important;
--appmenu-button-normal-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset, 0 0 2px 1px hsla(211, 65%, 85%, .15) inset !important;
--appmenu-button-hover-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset,
0 0 2px 1px hsla(210, 48%, 90%, .4) inset,
0 -1px 0 hsla(210, 48%, 90%, .2) inset !important;
--appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
0 1px 1px rgba(0, 0, 0, .2) inset !important;
}
Note: If you didnt notice it, in source code is updated version for 128 ESR, in releases is old one.
palemoonSVG.zip
Now you can have Pale Moon/Mypal SVG icons in Echelon.
Place in \chrome\assets\images\firefox-4\toolbar\ folder
note: Some icons like history icon are in different version folders, history should be in firefox-29\toolbar.
How to change menu button text
Open chrome\JS\echelon_appmenu.uc.js (best is in Visual Studio Code).
Find line with "let browserName =" (without ")
Replace it to let browserName = "Your Name";
In echelon settings, change branding to something other, and after restart set it back to Firefox
Name should be applied now.
How to change menu button color
In echelon settings, set style to Firefox
Open chrome\branding\firefox\content\branding.css
Add these lines (or if they arent copied correctly, copy them from Auora or other branding)
:root:not([privatebrowsingmode=temporary]) {
--appmenu-button-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-hover-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-active-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-normal-background: linear-gradient(hsl(211, 33%, 32%), hsl(209, 53%, 10%) 95%) !important;
--appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 10%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, hsla(211, 70%, 83%, .5), hsla(211, 70%, 83%, 0)),
linear-gradient(hsl(211, 33%, 32%), hsl(209, 53%, 10%) 95%) !important;
--appmenu-button-active-background: linear-gradient(hsl(211, 33%, 26%), hsl(209, 53%, 6%) 95%) !important;
--appmenu-button-normal-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset, 0 0 2px 1px hsla(211, 65%, 85%, .15) inset !important;
--appmenu-button-hover-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset,
0 0 2px 1px hsla(210, 48%, 90%, .4) inset,
0 -1px 0 hsla(210, 48%, 90%, .2) inset !important;
--appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
0 1px 1px rgba(0, 0, 0, .2) inset !important;
}
Try to find color you want. Colors are in HSL format, but you can just overwritte hsl to rgb and hsla to rgba. Classic Theme Restorer for Basilisk can also help.
How to remove website name from location bar
Remove or rename chrome\JS\echelon_urlbar.uc.js file.
How to make Basic background on Windows 10/11
place these files in chrome\ _chrome_user.css file (you need to create)
#navigator-toolbox {
background-color: #B9D1EA !important;
}
Or, if you want colors like in Basilisk (configured for Australis, on classic theme remove some lines)
#navigator-toolbox {
background-color: #202340 !important;
}
#main-menubar > menu {
color: white !important;
}
.titlebar-button {
color: white !important;
fill: white !important;
stroke: white !important;
}
.tabbrowser-tab:not([selected="true"]) .tab-label {
color: white !important;
opacity: 1 !important;
}
#tabs-newtab-button image,
#tabs-newtab-button .toolbarbutton-icon {
filter: invert(100%) !important;
}
.tabbrowser-tab:not([selected="true"]) .tab-close-button {
filter: invert(100%) !important;
}
Mypal button color settings
:root:not([privatebrowsingmode=temporary]) {
--appmenu-button-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-hover-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-active-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-normal-background: -moz-radial-gradient(center bottom, farthest-side, rgba(26, 30, 32, 0.4) 50%, hsla(210, 48%, 90%, 0.2) 100%),
-moz-radial-gradient(center bottom, farthest-side, rgba(0, 0, 0, 0.5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(0, 218, 54), rgb(0, 218, 54) 95%) !important;
--appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 50%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgba(0, 0, 0, 0.5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(0, 218, 54), rgb(0, 218, 54) 95%) !important;
--appmenu-button-active-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 50%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, rgba(0, 0, 0, 0.5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(0, 168, 42), rgb(0, 218, 54) 95%) !important;
--appmenu-button-normal-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset, 0 0 2px 1px hsla(211, 65%, 85%, .15) inset !important;
--appmenu-button-hover-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset,
0 0 2px 1px hsla(210, 48%, 90%, .4) inset,
0 -1px 0 hsla(210, 48%, 90%, .2) inset !important;
--appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
0 1px 1px rgba(0, 0, 0, .2) inset !important;
}
Pale moon button color settings
:root:not([privatebrowsingmode=temporary]) {
--appmenu-button-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-hover-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-active-border-color: hsla(210, 59%, 13%, .9) !important;
--appmenu-button-normal-background: linear-gradient(rgb(92, 181, 245), rgb(48, 123, 221) 95%) !important;
--appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, hsla(210, 48%, 90%, .5) 10%, hsla(210, 48%, 90%, 0) 70%),
-moz-radial-gradient(center bottom, farthest-side, hsla(211, 70%, 83%, .5), hsla(211, 70%, 83%, 0)),
linear-gradient(rgb(74, 148, 201), rgb(30, 78, 141) 95%) !important;
--appmenu-button-active-background: linear-gradient(rgb(95, 181, 243), rgb(30, 78, 141) 95%) !important;
--appmenu-button-normal-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset, 0 0 2px 1px hsla(211, 65%, 85%, .15) inset !important;
--appmenu-button-hover-shadow: 0 1px 0 hsla(210, 48%, 90%, .15) inset,
0 0 2px 1px hsla(210, 48%, 90%, .4) inset,
0 -1px 0 hsla(210, 48%, 90%, .2) inset !important;
--appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
0 1px 1px rgba(0, 0, 0, .2) inset !important;
}