The New Tab UI change is terrible

[David_H23]

Screenshot of what the new UI looks like for me

I just updated to 143.0.1 from 142.0.1, and it suddenly changed the UI of the New Tab page and made it much uglier. All of the icons are too far apart, which wastes space, and I hate the rounded corners. I don't have a screenshot of what it looked like before. I tried looking up this problem, but I couldn't find any ways to change it back that worked. I remember using an about:config option before to change it back to the better layout, but now I can't find any that works.

I can't find browser.newtabpage.activity-stream.newtabLayouts.variant-a and browser.newtabpage.activity-stream.newtabLayouts.variant-b anymore, while browser.newtabpage.activity-stream.newtabShortcuts.refresh false does absolutely nothing. How do I change it back to the old UI?

[David_H23]

Also, not related to the New Tab page, but I thought I'd reply to the post I just made instead of making another one: how do I get rid of this unnecessary blue pin button that appears when I move a tab across the taskbar at the top of the browser? This started happening when I updated to 143.0.1. I can't find any settings (including in about:config) to disable it.

[Agentvirtuel]

Hello

https://connect.mozilla.org/t5/ideas/add-an-option-to-disable-this-new-quot-drag-to-pin-unpin-tab/id...

[David_H23]

Sorry, clicked the wrong thing by accident. 

Thank you for the response, but unfortunately this doesn't provide any solutions to this problem.

[David_H23]

Thank you for the response, but unfortunately this doesn't provide any solutions to this problem.

[Agentvirtuel]

Hello

https://connect.mozilla.org/t5/discussions/feedback-for-the-new-tab-layout-variants-in-the-home-page...

Take a look at https://www.camp-firefox.de/forum/thema/139018-änderungenn-der-kachelansicht-bei-startseite-und-neue...

A test, with the help of userContent.css file.

Without userContent.css

With userContent.css

@-moz-document url(about:newtab), url(about:home) {
  
li.top-site-outer {
  margin-top: -10px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;  
}
	
.top-site-outer .tile .icon-wrapper {  
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 8px !important;
}
  
.top-site-outer .rich-icon {
  border: 5px solid white !important;
  border-radius: 8px !important;
}

.top-site-outer .title.pinned span {  
  padding: 0 0px !important;
  }
}

[David_H23]

Sadly, all this does is make the icons in each tile bigger. It doesn't fix the spacing between each tile, the tile size, or the rounded corners. I want a solution that makes it look exactly like how it was before.

[crex · Accepted solution]

I myself much prefer the earlier design. Here's what I came up with to revert to it. It reverts spacing, rounded corners, and also moves the pin icon (if you have pinned tabs) and the 3-dot-menu of the tabs to their old positions.

Additionally, I noticed that the customize button was changed. I don't mind the new version (pen icon + text appearing upon hover instead of just the gear icon). But as I was just in the flow of reverting all changes when I did, I included that.

@-moz-document url(about:home), url(about:newtab) {
	/*
	 * Fix "Activity Stream Refresh"
	 */
	/* Bigger Gap between rows */
	ul.top-sites-list { row-gap: var(--space-xlarge) !important }

	/* Smaller Gap between columns */
	li.top-site-outer { width: calc(var(--size-item-large) * 3) !important }

	/* Smaller border radius */
	.tile, .top-site-outer { border-radius: var(--border-radius-medium) !important }
	.top-site-icon { border-radius: var(--border-radius-small) !important }

	/* Show Pin next to Website title */
	.icon-pin-small { display: none !important }
	div.title.has-icon.pinned > span::before {
		color: var(--icon-color) !important;
		content: " ";
		display: inline-block;
		width: 14px;
		height: 12px;
		background-image: url("chrome://browser/skin/pin-12.svg");
		background-repeat: no-repeat;
		vertical-align: middle;
	}
	.darkWallpaper li.top-site-outer:not(:hover, :active, .active) div.title.has-icon.pinned > span::before { filter: invert(100%) }

	/* Move 3-dot-menu to the top */
	.context-menu-button {
		inset-inline-end: 3px !important;
		top: -20px !important;
		height: 20px !important;
		width: 20px !important;
	}
	.top-site-outer .context-menu { inset-block-start: 0 !important }

	/* Light background on hover */
	.darkWallpaper li.top-site-outer:not(:hover, :active, .active), .darkWallpaper .top-site-outer .context-menu-button { color-scheme: dark !important }
	.darkWallpaper li.top-site-outer { color-scheme: light !important }
	.darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { background-color: rgba(255, 255, 255, 70%) !important }

	/* Non-circular Icons for sites without favicon */
	.top-site-outer .tile .icon-wrapper.letter-fallback { border-radius: inherit !important }
	.top-site-outer .tile .icon-wrapper.letter-fallback::before { color: #fff }

	/* Customize button */
	button.personalize-button {
		background-image: url("chrome://global/skin/icons/settings.svg");
		background-repeat: no-repeat;
		background-color: transparent !important;
		background-size: var(--icon-size-default) !important;
		vertical-align: middle;
		fill: currentColor;
		color: var(--icon-color) !important;
		height: 16px !important;
		width: 16px !important;
		min-width: 16px !important;
		padding: 15px !important;
		transition: unset !important;
		box-shadow: unset !important;
	}
	button.personalize-button:hover { background-color: var(--newtab-element-hover-color) !important }
	button.personalize-button div, button.personalize-button label { display: none !important }
	.darkWallpaper .personalize-button:not(:hover, :active) { color-scheme: dark !important }
}

[David_H23]

Thank you so much! This seems to look pretty much exactly like it did before!

[Agentvirtuel]

Hello

https://www.reddit.com/r/FirefoxCSS/comments/1niummp/how_do_i_remove_excess_space_between_pinned

A test.

Without userContent.css

With userContent.css

.top-site-outer {
width: 90px !important;
}

[David_H23]

Thank you for responding again. This does look a lot better than the CSS you suggested before, but crex's solution above is more accurate to the New Tab page's previous look.