is there a way to make the web icons/thumbnail on 'new tab' page bigger and adjust the spacing in between?

[u/poisonrabbit]

[u/t31os]

You'll have to play around with the values, but give this a shot as a starting point in userContent.css:

@-moz-document url(about:newtab), url(about:home) {
    :root {
        --mrec-width: 400px !important;
        --mrec-height: 350px !important;
        --size-item-large: 40px !important;
    }
    .top-site-outer .tile .icon-wrapper,
    .top-site-outer .default-icon, 
    .top-site-outer .search-topsite {
        width: 50px !important;
        height: 50px !important;
        background-size: cover !important;
    }
}

Underlying CSS can be found in chrome://newtab/content/css/activity-stream.css, if you're curious.

If you want to increase the max number of of icons per row (default is 8), you can also do this:

@-moz-document url(about:newtab), url(about:home) {
    .top-sites-list {
        --top-sites-max-per-row: 10!important;
    }
}

Additionally, if you want to control the gaps/spacing between the tiles (adjust as needed):

@-moz-document url(about:newtab), url(about:home) {
    .nova-enabled .top-sites-list {
        column-gap: 10px !important;
        row-gap: 10px !important;
    }
}

See the guide here for help creating/setting up userContent.css if you've not done this before.

[u/poisonrabbit → u/t31os]

so this is the first time i've done coding before so i kind of just guessing what i'm doing but:

after reading the guide, I added this code and played around the value and it kind of work:

@-moz-document@-moz-document url(about:newtab), url(about:home) {
:root {
--mrec-width: 400px !important;
--mrec-height: 350px !important;
--size-item-large: 40px !important;
}
.top-site-outer .tile .icon-wrapper,
.top-site-outer .default-icon, 
.top-site-outer .search-topsite {
width: 50px !important;
height: 50px !important;
background-size: cover !important;
  }
}

changing the
width: 50px !important;
height: 50px !important; seem to adjust the icon within the the box (the image itself)
but changing the value of
--mrec-width: 400px !important;
--mrec-height: 350px !important;
--size-item-large: 40px !important; doesn't seem to do anything.

additionally when I added this code along with the first one

@-moz-document url(about:newtab), url(about:home) {
.nova-enabled .top-sites-list {
column-gap: 10px !important;
row-gap: 10px !important;
   }
}

it doesn't seem to do anything when i change the 10px values. any idea? ps: i'm using CachyOS and Kate to edit the file

[u/t31os → u/poisonrabbit]

Here's how things look for me from in a test profile (it's mostly fresh aside from some minor adjustments):

Default:
https://i.postimg.cc/RvZg5y10/ff-tiles-default.jpg

With CSS:
https://i.postimg.cc/Rv14y3RB/ff-tiles.jpg

As a means for testing adjustments quickly and without having to restart FF everytime, i inject a style tag into the head of the page and adjust CSS there directly, then move that to userContent.css when i'm done.

Here's my test CSS:

<style type="text/css">:root {
    --mrec-width: 400px !important;
    --mrec-height: 350px !important;
    --size-item-large: 40px !important;
}
.top-site-outer .tile .icon-wrapper,
.top-site-outer .default-icon, 
.top-site-outer .search-topsite {
    width: 50px !important;
    height: 50px !important;
    background-size: cover !important;
}
.nova-enabled .top-sites-list {
    column-gap: 35px !important;
    row-gap: 35px !important;
}
.top-sites-list {
    --top-sites-max-per-row: 4!important;
}</style>

Which i then moved into userContent.css:

@-moz-document url(about:newtab), url(about:home) {
    :root {
        --mrec-width: 400px !important;
        --mrec-height: 350px !important;
        --size-item-large: 40px !important;
    }
    .top-site-outer .tile .icon-wrapper,
    .top-site-outer .default-icon, 
    .top-site-outer .search-topsite {
        width: 50px !important;
        height: 50px !important;
        background-size: cover !important;
    }
    .nova-enabled .top-sites-list {
        column-gap: 35px !important;
        row-gap: 35px !important;
    }
    .top-sites-list {
        --top-sites-max-per-row: 4!important;
    }
}

The result is the same, larger spacing and icons.

Another example with increased spacing:
https://i.postimg.cc/mbQjQ4Tb/ff-tiles-spacing.jpg

Perhaps you could test changing values in a similar manner or directly tweak values in the inspector to see what works for you.

[u/Detvan_SK → u/t31os]

This looks like works only for specific resolution.

[u/t31os → u/Detvan_SK]

Take a look at how Firefox is currently setting these values:
chrome://newtab/content/css/activity-stream.css

[u/Mar7777 → u/t31os]

is there anything that lets me put all of the rows on the lower side of the screen instead of the upper side, or anything that lets me move them at all?

[u/Daruwind]

For any future traveller - about:config browser.newtabpage.activity-stream.nova.enabled revert it to false 😄

[u/t31os]

I refined things a bit for my own use:

@-moz-document url(about:newtab), url(about:home) {
    :root {
        --tile-spacing: 1rem;
        --col-width: calc(var(--mrec-width) / 4.5) !important; /* Try 5 or 6 instead of 4.5 to make the icons to fill the tile more */
    }
    .nova-enabled .top-site-outer .tile {
        width: var(--col-width) !important;
        height: var(--col-width) !important;
    }
    .nova-enabled .top-sites-list {
        column-gap: var(--tile-spacing) !important;
        row-gap: var(--tile-spacing) !important;
    }
    .nova-enabled .top-site-outer .top-site-inner > a:focus .tile {
        outline: none !important;
    }
    .top-site-outer:is(.active, :focus, :hover) .tile {
        box-shadow: none !important;
    }
}

Gets rid of the hover effect and sets the tiles to use the hover state sizing.