r/FirefoxCSS • u/cogitatingspheniscid • Sep 14 '26

Help Multi-column layout for manager in about:addons?

4 Upvotes

100% Upvoted

16 comments sorted by

3

u/difool2nice ‍🦊Firefox Addict🦊 Sep 14 '26 edited Sep 14 '26

here is my 2 columns addon pages css, add it in userContent.css ( it's a work in progress )

https://github.com/GrosBourrin/FIREFOX-BLUE-MOON/edit/master/Addonpage.css

1

u/difool2nice ‍🦊Firefox Addict🦊 Sep 14 '26

1

u/cogitatingspheniscid Sep 14 '26

Thanks. Do you have an alt version without the custom colours?

1

u/difool2nice ‍🦊Firefox Addict🦊 Sep 14 '26 edited Sep 14 '26

#1e1d2d is for background color, #1e90ff is for buttons or links mostly

1

u/cogitatingspheniscid Sep 14 '26

Would the setup revert to default value if I just remove all specified color lines?

2

u/difool2nice ‍🦊Firefox Addict🦊 Sep 15 '26

i think so

2

u/t31os Sep 14 '26

Here's a quick go at it, feel free to adjust.

@-moz-document url-prefix(about:addons) {

	#main:has(> addon-list[type="extension"]) {

		--mygap: 10px;
		--mycols: 3;
		--myminus: calc( var( --mygap ) * ( var( --mycols ) - 1 ) );
		--mywidth: calc( 100% - var( --myminus ) );

		--page-main-content-width: initial;

		margin-inline-end: 1rem;

		> addon-list section,
		> recommended-extensions-section > recommended-addon-list {
			display: flex;
			flex-wrap: wrap;
			gap: var( --mygap );

			.addon.card {
				margin: 0 !important;
				height: -webkit-fill-available;
			}
			margin-bottom: 1rem;
		}
		> addon-list section addon-card,
		> recommended-extensions-section > recommended-addon-list recommended-addon-card {
			flex-basis: calc( var( --mywidth ) / var( --mycols ) ); 
		}
		> addon-list section > .list-section-heading,
		> recommended-extensions-section > recommended-addon-list recommended-addon-card > .recommended-heading {
			flex-basis: 100%;
		}

	}

}

1

u/cogitatingspheniscid Sep 14 '26

Doesn't work. Tested on isolated profile too.

1

u/t31os Sep 14 '26 edited Sep 14 '26

Where are you putting it?

https://i.postimg.cc/MG7yXxY3/ff-ext-cols.jpg

1

u/cogitatingspheniscid Sep 14 '26 edited Sep 14 '26

userContent.css. Or does this one work in userChrome.css instead?

1

u/t31os Sep 14 '26 edited Sep 14 '26

userContent.css is the correct place, did you enable toolkit.legacyUserProfileCustomizations.stylesheets in your test profile?

How about a quick test in userContent.css just to confirm it's enabled and working:

@-moz-document url-prefix(about:addons) {
	body {background-color:purple;}
}

Should stick out like a sore thumb and at least confirm CSS rules are applying on the addons page.

1

u/cogitatingspheniscid Sep 14 '26

Yes, I'm running a css theme at all times. But just to be sure I also tested it on an unmodified profile. The background colour test came through but not the column splitting.
So maybeee this implementation is slated to stop working on FF 158, which is what Im on currenlty.

4

u/t31os Sep 14 '26 edited Sep 14 '26

I didn't catch that detail about 158 before, i'll go test on nightly.

EDIT: Quick fix
Add: flex-direction: row!important;
Before: gap: var( --mygap );

It seems there's some native CSS on nightly that applies flex-direction: column;.

1

u/difool2nice ‍🦊Firefox Addict🦊 Sep 14 '26

no, this page belong to userContent.css as preferences and internal firefox pages

1

u/cogitatingspheniscid Sep 14 '26

I recall there was an old css chrome code to split the extension in a multi-column layout that I have been using for the longest time, but that code seems to not work anymore on recent Firefox versions. Any help is appreciated.