Skip to content

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 #154

Description

@RalphCZ

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

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions