echelon-theme
Pale Moon SVG icons + how to change menu button text and color + how to remove website name from location bar + Vista/7 Basic background for 10/11
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; }
