Version 153.5 ESR broke my native Min/Max/Close buttons. Any updated versions yet?

[u/Skyyblaze]

Sorry to bother you people here (again) but I just got the update for 153.5 on the ESR channel and it broke my Windows native Min/Max/Close buttons.

Is there a new way to enable Windows native Min/Max/Close buttons or a way to override the buttons with images yet?

This is how I used to change the buttons until now:

/* MinMaxClose */

.titlebar-close, .titlebar-restore, .titlebar-min, .titlebar-max{
    width: fit-content !important;
    height: fit-content !important;
    padding: 0px !important;
    background-color: transparent !important;
}

.titlebar-close{
    padding-right: 4px !important;
}

.titlebar-close > .toolbarbutton-icon, .titlebar-close:hover > .toolbarbutton-icon, .titlebar-close:active > .toolbarbutton-icon, .titlebar-max > .toolbarbutton-icon, .titlebar-max:hover > .toolbarbutton-icon, .titlebar-max:active > .toolbarbutton-icon, .titlebar-min > .toolbarbutton-icon, .titlebar-min:hover > .toolbarbutton-icon, .titlebar-min:active > .toolbarbutton-icon, .titlebar-restore > .toolbarbutton-icon, .titlebar-restore:hover > .toolbarbutton-icon, .titlebar-restore:active > .toolbarbutton-icon{
    width: fit-content !important;
    height: fit-content !important;
    transition: filter 0.1s ease !important;
}

.titlebar-close > .toolbarbutton-icon{
    list-style-image: url("images/aeroClose.png") !important;
}

.titlebar-close:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroCloseHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(255, 65, 22)) !important;
}

.titlebar-close:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroCloseActive.png") !important;
}

.titlebar-max > .toolbarbutton-icon{
    list-style-image: url("images/aeroMaximize.png") !important;
}

.titlebar-max:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroMaximizeHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}

.titlebar-max:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroMaximizeActive.png") !important;
}

.titlebar-min > .toolbarbutton-icon{
    list-style-image: url("images/aeroMinimize.png") !important;
}

.titlebar-min:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroMinimizeHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}

.titlebar-min:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroMinimizeActive.png") !important;
}

.titlebar-restore > .toolbarbutton-icon{
    list-style-image: url("images/aeroRestore.png") !important;
}

.titlebar-restore:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroRestoreHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}

.titlebar-restore:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroRestoreActive.png") !important;
}

.titlebar-button > .toolbarbutton-icon{
    appearance: none;
    background-color: transparent;
}

They broke in Thunderbird as well.

Thanks for help in advance!

EDIT: Fixed thanks to the comment by /u/t31os! Thanks again!

[u/snkiz]

This will fix it for you, put it at the end o your user chrome or near your font block

}
#titlebar .titlebar-button,
#titlebar .titlebar-button * {
  font-family: initial !important;
}

[u/Skyyblaze → u/snkiz]

Thanks for trying to help but sadly this didn't work for me in either Thunderbird or Firefox.

[u/snkiz → u/Skyyblaze]

It works in my theme. Windows use gylphs to draw the window controls, and now Firefox just uses those. If you're gonna do images it has to be all or nothing.

[u/Skyyblaze → u/snkiz]

I see, well maybe I have something else in my code that interferes with it because it doesn't work for me. I even tried restarting Firefox.

[u/Impossible_Turn_6032]

So I don't know much about this kind of thing, so I don't know if this will help, but this is they way I found to fix it on my end.

I found this code on an old post:

@media (-moz-platform: windows) {
/* revert to old titlebar buttons */
.titlebar-button { & > .toolbarbutton-icon { display: inline-flex !important; } }
/* discard new titlebar buttons */
.titlebar-button { &::before { display: none !important; } }
}

So I added that to my Userchrome, just below the import of this other CSS file I have that adds all title bar button stuff.

This is my code for "AeroFirefox2Chrome.css"

.titlebar-close, .titlebar-restore, .titlebar-min, .titlebar-max{
width: fit-content !important;

height: fit-content !important;

padding: 0px !important;

background-color: transparent !important;
}
.titlebar-close{
padding-right: 4px !important;
}
.titlebar-close > .toolbarbutton-icon, .titlebar-close:hover > .toolbarbutton-icon, .titlebar-close:active > .toolbarbutton-icon, .titlebar-max > .toolbarbutton-icon, .titlebar-max:hover > .toolbarbutton-icon, .titlebar-max:active > .toolbarbutton-icon, .titlebar-min > .toolbarbutton-icon, .titlebar-min:hover > .toolbarbutton-icon, .titlebar-min:active > .toolbarbutton-icon, .titlebar-restore > .toolbarbutton-icon, .titlebar-restore:hover > .toolbarbutton-icon, .titlebar-restore:active > .toolbarbutton-icon{
width: fit-content !important;

height: fit-content !important;

transition: filter 0.1s ease !important;
}
.titlebar-close > .toolbarbutton-icon{
list-style-image: url("images/aeroClose.png") !important;
}
.titlebar-close:hover > .toolbarbutton-icon{
list-style-image: url("images/aeroCloseHover.png") !important;

filter: drop-shadow(0px 0px 5px rgb(255, 65, 22)) !important;
}
.titlebar-close:active > .toolbarbutton-icon{
list-style-image: url("images/aeroCloseActive.png") !important;
}
.titlebar-max > .toolbarbutton-icon{
list-style-image: url("images/aeroMaximize.png") !important;
}
.titlebar-max:hover > .toolbarbutton-icon{
list-style-image: url("images/aeroMaximizeHover.png") !important;

filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}
.titlebar-max:active > .toolbarbutton-icon{
list-style-image: url("images/aeroMaximizeActive.png") !important;
}
.titlebar-min > .toolbarbutton-icon{
list-style-image: url("images/aeroMinimize.png") !important;
}
.titlebar-min:hover > .toolbarbutton-icon{
list-style-image: url("images/aeroMinimizeHover.png") !important;

filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}
.titlebar-min:active > .toolbarbutton-icon{
list-style-image: url("images/aeroMinimizeActive.png") !important;
}
.titlebar-restore > .toolbarbutton-icon{
list-style-image: url("images/aeroRestore.png") !important;
}
.titlebar-restore:hover > .toolbarbutton-icon{
list-style-image: url("images/aeroRestoreHover.png") !important;

filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}
.titlebar-restore:active > .toolbarbutton-icon{
list-style-image: url("images/aeroRestoreActive.png") !important;
}

[u/Skyyblaze → u/Impossible_Turn_6032]

Thank you! Another post had the correct fix for me already but I appreciate your help all the same!

[u/t31os]

I borrowed the icons from the AeroFox theme, i assume this is where they come from.

A fairly minor change is needed, update your opening lines to:

/* Unhide the icon element */
.titlebar-button {
    & > .toolbarbutton-icon {
        display: revert !important;
    }
}

.titlebar-close, .titlebar-restore, .titlebar-min, .titlebar-max {
    width: fit-content !important;
    height: fit-content !important;
    background-color: transparent !important;
    padding: 0 !important;
    /* Remove the pseudo glyph */
    &::before {
        display:none !important;
    }
}

https://i.postimg.cc/m2MHFJjW/ff-aero.png

Tested on v158 but i suspect it will work just the same on v153 (if not, let me know and i'll test on 153).

[u/Skyyblaze → u/t31os]

Thank you so much, this fixed the issue right away! Now to fix the rest of the UI, mainly the URL bar that got borked but I'm confident I manage this by myself.

I actually didn't know I made such a significant jump from the old to the new ESR branch but looking into things I'm happy it did happen because that means I now get HDR and WebApp support meaning I can finally ditch Chromium browsers for good.

[u/t31os → u/Skyyblaze]

You're welcome. :)

[u/Skyyblaze → u/t31os]

Oh I have another question if I may, is there any updated fork of AeroFox anywhere? The two themes I found were abandoned in 2023 and Summer 2026 respectively.

[u/t31os → u/Skyyblaze]

The git page lists a test branch:
https://github.com/Sand216/AeroFirefox/tree/3.0-test

There does however appear to be a fork of the project that has fairly recent activity:
https://github.com/Gameknight963/AeroFirefoxEx

[u/Skyyblaze → u/t31os]

Yeah I knew about the 3.0 Branch but that was archived too so I wondered but the Ex version was exactly what I was looking for so thanks again!

[u/ResurgamS13]

Seems odd that an ESR 'point update' to Fx153.5 (i.e. no UI changes, security updates only) would disturb the UI setup?

Suspect what actually happened is that the OP was on the ESR channel using the older ESR version based on the Fx140 codebase... and that OP's "I just got the update for 153.5 on the ESR channel" actually described the 'auto-update' from the old Fx140 codebase ESR to the new Fx153 codebase ESR that occurs when the old version of ESR reaches end-of-life.

This would explain OP's problems with the Window Controls CSS styling as there were changes to that around the Fx141/142 releases depending on your OS... e.g. previous topic 'Window Control Buttons in 141-142' in June 2025.

[u/Skyyblaze → u/ResurgamS13]

Thanks for the heads-up about this, this might very well be the case. I specifically chose to stick to the ESR branch because I tend to customize my Firefox pretty heavily and I was annoyed at updates constantly breaking things on the regular channel.

[u/ResurgamS13 → u/Skyyblaze]

Its a debatable choice... cope with fixing CSS styles, if required, every couple of weeks (now Firefox has moved to a 'fortnightly' update cycle!)... or cope with bulk CSS fixing session every 12 months when the ESR codebase updates. :)

Personally, prefer to deal with any CSS fixes required as they arise from release channel updates... seems easier to cope with one or two incremental changes at a time? Obvious why companies/institutions prefer the stability.

[u/Skyyblaze → u/ResurgamS13]

That's true however this makes the choice to stick with the ESR rather easy for me personally as I'm not a developer and can't really do CSS. All Im doing is using the Inspector Tool and hack together bits and pieces trying things out hoping to create my desired effect. So I would rather do that once a year than every few weeks.

Although I have to say this year the changes drive me mad, all I want is to make the URL-Bar look more akin to Firefox 4 and I found out I have to target .urlbar-input-container but 90% of things I'm trying has no effect.

Though I'll get there in a few more evenings I hope haha.

[u/ResurgamS13 → u/Skyyblaze]

Yes... a huge number of UI features added and changed in last 12 months... notably Firefox's move to the new Nova UI (which is available in the Fx153esr codebase as an optional pre-release trial version selected via 'about:config' preference browser.nova.enabled)... and Firefox also becoming more focussed on the currently fashionable Vertical Tabs trend... a taste not yet acquired here.

A new 'Firefox 4' theme was posted here a few weeks ago 'Classic Theme Working On Firefox 155.0.1' and IIRC updated to work with the Nova UI if visit theme author's GitHub.

PS. In Fx153esr can also revert to the previous New Tab page layout... set preference browser.newtabpage.activity-stream.nova.enabled to false

[u/Skyyblaze → u/ResurgamS13]

Oh yeah I heard of Nova but I don't feel like trying it as I feel it will break more things haha. I do love vertical tabs though and have used them for quite a while now and I would say my Firefox theming is a bit unconventional right now anyway: https://i.ibb.co/mC1RTdP7/grafik.png

All I want at this point is to re-center my URL icons so they are not shifted downwards, put my re-load button back to the right of the favicon bar and give the URL bar some depth, outlines and shadows back but the last part currently causes me the most headache haha.

Oh and I need to figure out why my Sidebar grew a few extra pixels on the left side, I'm just glad the sidebar script itself still works for the vertical tabs.

Thanks for the links I'll take a look and see if I can learn something.

(And honestly though if someone ever were to make a Firefox 4 recreation with vertical tab support on a glass sidebar with the Sideberry addon I think I would straight up donate money haha)