How do i increase the no. of columns in topSites in new tab page
i would like to increase the no of columns for TopSites in newTab page to more than 8 columns.
there is a method to increase the no. of rows but since my monitor is wide I would like to have increased no. of columns which will let me to view all the topSites in a single page without any scrolling.
Is there any property that can be added in the about:config page to increase the no. of columns.
Chosen solution
Thanks for sharing your solutions. Credits for this solution goes to zeroknight & cor-el. I am choosing this post as the chosen answer since I couldn't choose multiple answers.
- Hi Robert Smith, as cor-el replied your solution didn't work for me since I am using the latest firefox version(119.0.1).
- If you only want to have increased no. of shortcut tiles, I will also recommend cor-el's solution which is to install the add-on. It is much simpler; has more customization options and it brings back the old ff newTab style which is awesome. (Do not worry that the development of the add-on is stopped. The extension works fine)
Steps:
- Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true. (not sure if creating the key if it is not present will work or not)
- Go to about:support page and under Application Basics heading look for Profile Folder entry. That is the location of your Profiles folder. Open it.
- Now create a folder named "chrome" (if not present) and inside this folder create a file named "userContent.css" (if not present).
- Follow the zeroknight's solution. Thank you for this solution.
Increase the number of rows with browser.newtabpage.activity-stream.topSitesRows in about:config and then increase the width of the shortcuts section with the following userContent.css:
@-moz-document url(about:home), url(about:newtab) {
@media (min-width: 1800px) {
.ds-outer-wrapper-breakpoint-override main {
width: 1700px !important;
}
}
}
- It might not work for you out of the box. You will have to modify the values. (Inspect the new tab page to find & adjust the values)
@media (min-width: 1800px) { //your firefox window width in px. //If you are using ff in maximized state, then use your screen resolution width: 1700px !important; //your TopSites width in px
- Save the css file and restart firefox.
Thanks a lot to cor-el for sharing some useful resources without which I wouldn't have understood userChrome.css, userContent.css and known how to modify the css property to suit my needs.
All Replies (5)
Here are the steps to increase the number of columns for Top Sites on the New Tab page in Firefox:
- Type about: config in the address bar and press enter. This will open the configuration page in Firefox.
- Search for the preference name browser.newtabpage.columns.
- Double-click on that preference to edit its value.
- Increase the number to whatever you want. For example, if you want 10 columns, enter 10.
- Restart Firefox for the changes to take effect.
- Now when you open a New Tab page, you should see Top Sites laid out in the number of columns you specified...,
The default is 8, but you can increase it to fit more columns on a wide monitor. Just keep in mind that each tile will get smaller as you add more columns. Play around with different values to find a layout that works best for your setup.
Setting the number of columns via browser.newtabpage.columns hasn't been supported for a very long time, setting the number of columns was possible in pre Quantum versions. In current releases the number of columns is fixed to a maximum of 8 or less depending on the available space.
Increase the number of rows with browser.newtabpage.activity-stream.topSitesRows in about:config and then increase the width of the shortcuts section with the following userContent.css:
@-moz-document url(about:home), url(about:newtab) { @media (min-width: 1800px) { .ds-outer-wrapper-breakpoint-override main { width: 1700px !important; } } }
See also:
More info about userChrome.css/userContent.css in case you are not familiar:
Chosen Solution
Thanks for sharing your solutions. Credits for this solution goes to zeroknight & cor-el. I am choosing this post as the chosen answer since I couldn't choose multiple answers.
- Hi Robert Smith, as cor-el replied your solution didn't work for me since I am using the latest firefox version(119.0.1).
- If you only want to have increased no. of shortcut tiles, I will also recommend cor-el's solution which is to install the add-on. It is much simpler; has more customization options and it brings back the old ff newTab style which is awesome. (Do not worry that the development of the add-on is stopped. The extension works fine)
Steps:
- Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true. (not sure if creating the key if it is not present will work or not)
- Go to about:support page and under Application Basics heading look for Profile Folder entry. That is the location of your Profiles folder. Open it.
- Now create a folder named "chrome" (if not present) and inside this folder create a file named "userContent.css" (if not present).
- Follow the zeroknight's solution. Thank you for this solution.
Increase the number of rows with browser.newtabpage.activity-stream.topSitesRows in about:config and then increase the width of the shortcuts section with the following userContent.css:
@-moz-document url(about:home), url(about:newtab) {
@media (min-width: 1800px) {
.ds-outer-wrapper-breakpoint-override main {
width: 1700px !important;
}
}
}
- It might not work for you out of the box. You will have to modify the values. (Inspect the new tab page to find & adjust the values)
@media (min-width: 1800px) { //your firefox window width in px. //If you are using ff in maximized state, then use your screen resolution width: 1700px !important; //your TopSites width in px
- Save the css file and restart firefox.
Thanks a lot to cor-el for sharing some useful resources without which I wouldn't have understood userChrome.css, userContent.css and known how to modify the css property to suit my needs.
Modified