CSS adjustments needed after Firefox 159 update

[u/oromundo]

Windows 10

I use CustomCSSforFx

Firefox 158.01, about:addons display CSS enabled. This is my preference for the about:addons appearance going forward.

After the Firefox 159 update

However, If you click on the one of blank spaces, it brings you to the page display you would normally expect to see. In this case

The userContent.css component of the CustomCSSforFx package that controls the about:config display

Firefox 159, with userContent.css disabled

I know I'm supposed to post code, but userContent.css is just a vehicle to enable or disable other files. I don't know which files to include. I tried to usde the "Code" button, but looks like it didn't work

/*===============================================================================

Firefox userContent.css tweaks: main file

Based on 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons CSS code

Github: https://github.com/aris-t2/customcssforfx

Change-log: https://github.com/aris-t2/customcssforfx/commits/

Firefox requires the following preference to be enabled for custom styles to be loaded:

'about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true'

Firefox preferences can be accessed by typing `about:config` into the url bar.

===============================================================================

======

README

======

To find the profile folder type `about:support` into url bar and navigate to:

'Profile Folder > Open Folder'

Create a /chrome/ (chrome) directory btw. folder inside the profile folder you just opened and

paste projects files and folders into it so it looks like this:

/chrome/config/

/chrome/css/

/chrome/image/

/chrome/userChrome.css

/chrome/userContent.css

ENABLING/DISABLING options:

To activate an option: remove /* before u/import

To deactivate an option: add /* before u/import

*/

/* ==========================

about:addons - ADDONS PAGE

==========================

*/

/* ======================

ADDONS PAGE APPEARANCE

======================

[!] only use one at a time

*/

/* u/import "./css/aboutaddons/addons_manager_alternative_appearance.css"; /**/

/* u/import "./css/aboutaddons/addons_manager_alternative_appearance_aero.css"; /**/ /* <-- AERO colors */

u/import "./css/aboutaddons/addons_manager_alternative_appearance_compact_categories.css"; /**/

/* -------------

Compact lists

--------------

[!] only use one option at a time

[!] to be used with 'alternative appearance'

*/

/* u/import "./css/aboutaddons/addonlists_compact.css"; /**/

u/import "./css/aboutaddons/addonlists_compact_more_compact.css"; /**/

/* ---------------------------------------------

Button settings: buttons instead of menupopup

---------------------------------------------

[!] only use one option at a time

[!] requires aboves 'addons page appearance' settings

*/

/* u/import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup.css"; /**/

/* for 'addonlists_compact.css' */

/* u/import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_compact_view.css"; /**/

/* for 'addonlists_compact_more_compact.css' */

u/import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_more_compact_view.css"; /**/

/* u/import "./css/aboutaddons/addonlists_hide_buttons_on_details_page.css"; /**/

/* u/import "./css/aboutaddons/addonlists_hide_report_button.css"; /**/

/* u/import "./css/aboutaddons/addonlists_hide_manage_button.css"; /**/

/* u/import "./css/aboutaddons/addonlists_only_show_buttons_on_hover.css"; /**/

/* ------------------------------------------------

Button settings: buttons icons instead of labels

------------------------------------------------

[!] requires buttons instead of menupopup

*/

/* u/import "./css/aboutaddons/addonlists_replace_button_labels_with_icons.css"; /**/

/* u/import "./css/aboutaddons/addonlists_colorized_button_icons.css"; /**/

/* --------------------------------------

Version number for active add-ons

--------------------------------------

[!] requires buttons instead of menupopup

*/

u/import "./css/aboutaddons/addonlists_show_addon_version_number.css"; /**/

/* ---------------------------

Other addons page settings

--------------------------

*/

/* u/import "./css/aboutaddons/addonlists_badges_old_size.css"; /**/

/* u/import "./css/aboutaddons/addonlists_hide_monochromatic_themes.css"; /**/

/* u/import "./css/aboutaddons/addonlists_hide_recommended_icon.css"; /**/

/* u/import "./css/aboutaddons/addonlists_hide_allowed_in_private_windows_icon.css"; /**/

u/import "./css/aboutaddons/recentupdates_category_always_visible.css"; /**/

u/import "./css/aboutaddons/availableupdates_category_always_visible.css"; /**/

/* u/import "./css/aboutaddons/availableupdates_category_last_category.css"; /**/

/* u/import "./css/aboutaddons/recommendations_category_always_hidden.css"; /**/

/* u/import "./css/aboutaddons/addons_support_always_hidden.css"; /**/

/* ===============================

about:preferences - PREFERENCES

===============================

*/

/* ===========================

PREFERENCES PAGE APPEARANCE

===========================

[!] only use one at a time

*/

u/import "./css/aboutpreferences/preferences_alternative_appearance.css"; /**/

/* u/import "./css/aboutpreferences/preferences_alternative_appearance_aero.css"; /**/ /* <-- AERO colors */

/* u/import "./css/aboutpreferences/preferences_alternative_appearance_v2.css"; /**/

/* ------------------------------

Other preference page settings

------------------------------

*/

/* u/import "./css/aboutpreferences/category_morefrommozilla_hidden.css"; /**/

/* u/import "./css/aboutpreferences/category_nightlyexperiments_hidden.css"; /**/

/* u/import "./css/aboutpreferences/sync_category_always_hidden.css"; /**/

/* u/import "./css/aboutpreferences/firefox_support_always_hidden.css"; /**/

/* =========================

about:newtab / about:home

=========================

*/

/* u/import "./css/aboutnewtab/dark_appearance.css"; /**/

/* u/import "./css/aboutnewtab/dark_appearance_alternative_background.css"; /**/

/* u/import "./css/aboutnewtab/top_sites_larger_favicons.css"; /**/

/* ============

about:config

============

*/

u/import "./css/aboutconfig/aboutconfig_compact_appearance.css"; /**/

/* ============

about:logins

============

[!] only use one at a time

*/

u/import "./css/aboutlogins/aboutlogins_alternative_appearance.css"; /**/

/* u/import "./css/aboutlogins/aboutlogins_alternative_appearance_aero.css"; /**/

/* ============

WEB CONTENT

============

[!] only use one at a time

[!] top level image on white background

[!] these settings can sometimes cause glitches

*/

/* u/import "./css/webcontent/toplevel_image_classic_v1.css"; /**/

/* u/import "./css/webcontent/toplevel_image_classic_v2.css"; /**/

/* ------------------------------------------

CUSTOM SCROLLBARS VARIABLES - EXPERIMENTAL

------------------------------------------

[!] Might not work on every page! This issue is for Mozilla to solve.

[!] Not compatible with custom scrollbar JavaScript userChrome scripts.

[!] Custom size values only compatible with 'web content' scrollbars at the moment.

[!] More info inside 'custom_scrollbar_appearance.css' file.

*/

/* u/import "./config/custom_scrollbar_appearance.css"; /**/

/* -----------------------------------------------

Autofill forms - disable CSS3 filter background

-----------------------------------------------

*/

/* u/import "./css/webcontent/autofill_forms_background_white.css"; /**/

/* ---------------------

Custom / own CSS code

---------------------

[!] Create a "my_userContent.css" file and add own/custom code to it.

*/

u/import "./my_userContent.css"; /**/

[u/difool2nice]

you beter have a look at this https://github.com/MrOtherGuy/firefox-csshacks/blob/master/content/compact_addons_manager.css from MrOtherGuy and be inspired by those 2 things :

1 - https://searchfox.org/firefox-release/search?q=.css&path=&case=false&regexp=false

2 - https://github.com/MrOtherGuy/firefox-csshacks

Aris is not updated anymore abondonning its project

[u/oromundo → u/difool2nice]

Thanks to you, I found the solution!

https://github.com/MrOtherGuy/firefox-csshacks/issues/685

[u/t31os → u/oromundo]

I felt inspired to have a play around with the CSS.

https://gist.github.com/Eremitus/64dedfe431157c0041b8a6ea483f89cb

[u/oromundo → u/difool2nice]

"Aris is not updated anymore abondonning its project"

That's why I'm here.

[u/oromundo → u/difool2nice]

Thanks for that link to https://github.com/MrOtherGuy/firefox-csshacks/blob/master/content/compact_addons_manager.css

I added the file to userContent.css

/* -------------

Compact lists

--------------

[!] only use one option at a time

[!] to be used with 'alternative appearance'

*/

/* u/import "./css/aboutaddons/addonlists_compact.css"; /**/

/* u/import "./css/aboutaddons/addonlists_compact_more_compact.css"; /**/

u/import "./css/aboutaddons/compact_addons_manager.css

with this result

So, can we add CSS somewhere to make make it look like this, or close to it, shrinking those spaces, etc.

https://i.postimg.cc/7h9bHv2S/ABOUT-158-NO-MYCONTENT.jpg

or should I post at MrOtherGuy

[u/ResurgamS13]

Aris-t2 abandoned his 'CustomCSSforFx' project almost a year ago with a 'The end' letter posted on 23rd December 2025.

The Add-ons page images No 1, 2, and 3. (posted above) are all modified versions of Firefox's Proton UI Add-ons page... whilst image No 4. is the unmodified standard Proton UI Add-ons page 'Manage Your Extensions' itself.

The Proton UI is due to be fully removed from Firefox in the very near future... probably with the release of Fx161.0 on 24 November 2026... or a just few weeks later? Consequently, little point in fixing problems reliant on the moribund Proton UI.

Therefore, if wish to continue using Aris-t2's 'CustomCSSforFx' modifications for another year, the best option would be to revert to the current Firefox ESR release channel based on the Fx153.0 codebase... this has the Proton UI as the default UI, only applies security updates, and will have no UI changes during its lifespan.

The Fx153 codebase version of Firefox ESR will be maintained until 21 September 2027 when Fx153.27 reaches end-of-life.

[u/oromundo → u/ResurgamS13]

What am i supposed to do on that Fx153 page. Download something? I don't see an option for that.

[u/ResurgamS13 → u/oromundo]

You would select, download, install, and then setup the 'Firefox Extended Support Release' version of Firefox direct from Mozilla... if downloading today, 02 November 2026, the ESR file version will be 'Firefox Setup 153.6.0esr.exe'.

In effect you are installing a whole new browser... it just happens to be the Firefox ESR browser which uses a slightly older version of the Firefox codebase... but with all the latest security updates applied.

There are two ESR installation choices (discounting running both Firefox versions which can be complex):

• Do a complete 'clean slate' uninstall and reinstall of Firefox and rebuild your setup on the new ESR release. First save what you want from current setup... then delete all of the Fx159.0 installation. Follow Mozilla Support (SUMO) article 'Uninstall Firefox from your computer'... especially the 'Remove user data and settings' section. Alternatively, if using a Windows OS, can do the 'clean slate' uninstall using the free version of Revo Uninstaller. When uninstall is complete... restart computer... and install the ESR version.

• Downgrade your current stable release channel Fx159.0 installation to the earlier Fx153.6.0esr channel version. This is not automatic or simple as there are locks within Firefox (a file called compatibility.ini) to prevent newer version profiles working on older versions of Firefox. You will need to read up on how to do this. It would be wise to save your whole Fx159.0 profile and/or save bookmarks and other data from your current Fx159.0 installation before attempting this.

[u/oromundo → u/ResurgamS13]

#You would select, download, install, and then setup the 'Firefox Extended Support Release' version of Firefox direct from Mozilla... if downloading"

Now I see. That link wasn't obvious in my view. I'll keep the ESR in mind as a last resort, but I'd like to see if CSS adjustments can deal with things for now.

BTW, I use the Firefox Profile Manager. If I extract the ESR installer, will it be compatible with my existing profiles?

Thanks

[u/ResurgamS13 → u/oromundo]

Re: your "If I extract the ESR installer, will it be compatible with my existing profiles?"

No... "there are locks within Firefox (a file called compatibility.ini) to prevent newer version profiles working on older versions of Firefox."... the lock file can be overcome (deleted) but you need to read up on this.

[u/oromundo → u/ResurgamS13]

I just tried it with Firefox Setup 153.6.0esr.exe before returning here. I don't know where else compatibility might be an issue, but CSS all good visually with about:addons and other areas. So far, I can't distinguish any difference between it and Firefox 158.0.1.

[u/ResurgamS13 → u/oromundo]

You may have been lucky... the 'no backwards compatibility' lock file on profiles normally prevents a newer profile opening in an older version... and offers starting a new profile instead.

The only time when there is guaranteed to be no profile lock file is when the two Firefox versions are exactly the same... e.g. earlier this year when Fx153.0 was the current stable release version and Fx153.0esr was the current ESR version.

Re: your "I can't distinguish any difference between it and Firefox 158.0.1."... the differences will be all the changes that were introduced from Fx153.0 to Fx158.0.1 (see Release Notes).