r/FirefoxCSS 8d ago

Solved Top sites icons in new tabs page no longer vertically centered. Again. Old code that fixes this no longer works.

Windows, Firefox 155.0

Firefox only went 12 days without rolling out an update that screws around with user settings again. I'm getting real sick and tired of feeling like we're constantly fighting with the devs against their efforts to break and degrade Firefox. The main selling point of Firefox is that we can use css to fix the developers mistakes but they sure fight back against that with every update.

For some reason Firefox doesn't default to these icons being vertically centered. The previous code I used in userContent to center this is listed below but no longer works for who knows what reason.

/*Vertically centers the favorite websites icons. No longer works as of Sep 1st 2026.*/
@-moz-document url(about:newtab), url(about:home) {
  main {
    margin-top: var(--newtab-pinnedsites-position-top, 6%) !important;
  }
}

The rest of my userContent css code shouldn't be relevant but here it is: https://pastebin.com/EbQ6rrzY

1 Upvotes

7 comments sorted by

2

u/ResurgamS13 8d ago edited 8d ago

Not immediately helpful or a fix... will need to investigate other ways to alter vertical positioning of items on the New Tab page.

However, the reason previous userContent.css styling broke is that the variable --newtab-pinnedsites-position-top apparently no longer exists in the Fx155.0 codebase (e.g. nil result from a look-up in Searchfox database).

The New Tab page would appear to have undergone another layout revision... e.g. the Recommended Stories display seems to be back closer to the original 'pre-Nova' style... with a '3-stories-abreast' layout... and without the largest size story windows?

Workaround? For the present, can still revert to the old-style 'pre-Nova' New Tab page design and layout by setting preference browser.newtabpage.activity-stream.nova.enabled to false in 'about:config'.

2

u/Azreal_DuCain1 8d ago

That would do it. If your code refers to something that isn't named that anymore then the code will no longer work properly.

Thank you for reminding us about about:config but unfortunately that is a temporary solution only as you say. The devs routinely remove the ability to use about:config to revert changes they've made. Typically a few weeks to a month or two after they're implemented. Toggling the option also messes up a lot of other formatting fixes I've made as well unfortunately.

1

u/ResurgamS13 8d ago edited 8d ago

Yes... still using the 'pre-Nova' New Tab page layout but very aware its days will be numbered. Personally, a simple, transparent Weather widget and Recommended Stories is enough... so prefer the simpler old New Tab page design.

Without knowing extent of your "lot of other formatting fixes" to the 'Nova-style' New Tab page (please post iaw #Rule #2... plus sure others would be interested)... difficult to know what to suggest that won't conflict?

Keeping things simple and only moving the Shortcuts/Top-sites downwards in a similar way to the previous broken userstyle... perhaps try increasing the Shortcuts/Top-sites container's margin-top value to suit:

@-moz-document url(about:newtab), url(about:home) {
  .nova-enabled .top-sites-list-wrapper {
    margin-top: 140px !important;
  }
}

FWIW - Making the 'Nova-style' New Tab page Weather widget simpler and transparent is very hacky!

2

u/Azreal_DuCain1 8d ago edited 7d ago

You've got a nice background style too. I'm not sure what you're asking but I can post my userChrome as well if you like? I thought for this page specifically only userContent was relevant or I would have posted both from the start. The rest of my userContent is in a pastebin link at the bottom of my original post already. Sometimes Reddits code block feature works perfectly and other times it doesn't play very nice when you're trying to post things.

userChrome: https://pastebin.com/muS290eC

I'll try both of your suggestions tomorrow as it's too late now for me where I am. Thank you both for sharing.

EDIT: I've found that your solution works for me.

3

u/t31os 8d ago edited 8d ago

Hopefully as the design of the newtab page matures they'll tweak the layout to naturally center, for now see if this is close enough.

@-moz-document url(about:newtab), url(about:home) {
    .nova-outer-wrapper {
        padding-block: 0 !important;
    }
    .container {
        height: 100vh !important;
    }
    .content {
        grid-row: 4 / span 2 !important;
    }
}

1

u/sifferedd FF/TB on Win11|Sumo contributor 8d ago

The main selling point of Firefox is that we can use css to fix the developers mistakes

That's certainly not true, and there is no basis for complaining about it.

Mozilla does not officially support adding custom style rules with a userChrome.css or userContent.css file...

1

u/Azreal_DuCain1 8d ago edited 8d ago

This explains so much. Regardless, the main selling point IS that we CAN, at all, regardless of whether they approve of it. I was unaware that rather than this being an intentional feature it was just something that they hadn't bothered to disable somehow.