Notice: Welcome to Minichan, an account has automatically been created and assigned to you, you don't have to register or log in to use the board, but don't clear your cookies unless you have set a memorable name and password. Alternatively, you can restore your ID.
You have to make a userContent.css file and create a folder named chrome and put that in your profile folder. There are several blocks of css that are useful to change so for instance, you can have as many columns of site shortcut tiles as will fit for any particular zoom level.
boof (OP) replied with this 1 day ago, 30 minutes later, 56 minutes after the original post[^][v]#1,375,437
OK but I'll put notes also because some of these settings are dependent on the resolution that you have set for your monitor. I had to figure that out early on -- if you do not have the typical aspect ratio of most monitors, then instructions you see by others out there will contain numbers that do not work.
boof (OP) double-posted this 1 day ago, 15 minutes later, 1 hour after the original post[^][v]#1,375,438
OK these are generic notes, not the actual userContent.css that I use yet. Anyway, I use the ordinary settings to turn off everything first (Pocket, etc) except for the Top Sites section, which is the only part of the new tab page that I find useful.
Also I have to mention that there is an about:config that has to be dealt with to allow more tiles.
browser.newtabpage.activity-stream.topSitesRows
On my Firefox (an older portable version), regardless of UI settings, the about:config setting behaves as if there are 6 tiles per row no matter how it really looks. So if you want 180 tiles, set to 30.
boof (OP) triple-posted this 1 day ago, 21 minutes later, 1 hour after the original post[^][v]#1,375,443
The single most important css change has to do with a way to allow more columns. You will need to open a new tab, rightclick, and click Inspect. You want to search the html part for .ds-outer-wrapper-breakpoint-override main. Most instructions out there report the first css block found starts with "@media (min-width: 1800px)" but mine was different and that's why my first attempts did not work. Your css file has to match what you happen to find. I found three instances of "@media (min-width:" in the same area, with three different numbers, I presume for different zoom levels you might do. (I do Ctrl+ three or four times to make my tiles bigger than they would otherwise show.) Anyway, as described at https://support.mozilla.org/ml/questions/1430289, you will see something like
@media (min-width: 1800px) {
.ds-outer-wrapper-breakpoint-override main {
width: 1700px;
}
It is the second number (here 1700) that you want to change in the css file you will make. For all three (for me) instances, you have to change whatever the second number is to a larger number. You could make it arbitrarily large, but the horizontal screen resolution that you happen to be using with your monitor will do the job. So maybe you have 1800. Change all three second numbers to 1800 then. Do not try to change any "min-width" numbers, because those are part of the labels of the css blocks you are changing, and not the settings themselves.
So maybe your css file will have (I made up the other min-width numbers; you'll see something else that you have to use instead when you use Inspect to look) if somehow your monitor is set to 2100 horizontal (a number I made up for the example):
boof (OP) replied with this 1 day ago, 8 hours later, 10 hours after the original post[^][v]#1,375,531
yeah it was a problem I tried to remedy more than once over the course of I don't how the fuck long, and it was only the most recent that I read just the right words that helped me to figure out that it is not as easy as a copy and paste, and I'd have to poke around in the html/css shit of the new tab page
the guy got 14 columns, and with tweaking of another setting I see he could fit 16 with that tile size, but for my setup it looks better with 10 with spacing between and in the left and right margins that it does not look too spacy or too crowded.
boof (OP) triple-posted this 1 day ago, 8 minutes later, 11 hours after the original post[^][v]#1,375,533
OK, here's is more css to allow more columns. Remember that all of this new tab css can be together with one instance of
@-moz-document url(about:home), url(about:newtab) {
at the top of your css file text, and the closing } to match as the very last line.
The first padding number affects vertical placement of the block of tiles by adjusting the amount of space above. The second affects horizontal placement, although incrementally changing the number does not make for an apparent change until the breakpoint position gets to where the block of tiles are (I think that is how it works). With enough change, the number of columns that show on the page is affected. The third number, if large enough, affects the amount of space shown at the bottom of the block of tiles. Set all numbers to your taste, perhaps 25px is fine.
boof (OP) quadruple-posted this 1 day ago, 3 minutes later, 11 hours after the original post[^][v]#1,375,534
Another setting that affect possible number of columns.
The first number affects the whole block of tiles shift up/down and the second number is for left/right. Be aware that the left-right setting also affects the number of columns, as shifting too much reduces the space that the tiles can occupy. With my particular monitor resolution, if the left/right page margins are not changed from default, 5px -9px is fine for Ctrl+ 4 times with 97px set for width in the .top-site-outer block next in these notes. For Ctrl+3 with 110px set for width, 5px -7px is fine. changing the zoom level or anything else affecting the number of columns will affect the centering of the block, so I wonder why there is no tile block center setting instead. I did find someone's words that said:
"If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block. margin: 0 auto, this basically reset the margin for the top and bottom to zero and make it auto for the left and right sides. https://ishadeed.com/article/styling-wrappers-css/"
boof (OP) quintuple-posted this 1 day ago, 3 minutes later, 11 hours after the original post[^][v]#1,375,536
oh and be sure to tuck in !important before the semicolon of any line that you change, so that your new setting will override the default setting.
e.g.
.outer-wrapper .ds-top-sites .top-sites .top-sites-list {
margin: 5 -7px !important;
}
boof (OP) replied with this 22 hours ago, 10 hours later, 22 hours after the original post[^][v]#1,375,588
So now that I got the settings that affect number of columns out of the way (yeah there's no setting where you could just set number of columns), here's more tweaks. I am showing the defaults. Remember that if you change any line, cram a !important before the semicolon.
The first setting is for the background colouar of the new tab page, and the second is for the tiles. The colouars are represented by the hexadecimal form of RGB (red green blue) values. I like #e5e2d9 and #f7f4f1.
boof (OP) triple-posted this 21 hours ago, 4 minutes later, 22 hours after the original post[^][v]#1,375,593
This section seems redundant as the settings move the block of tiles, which is also what the margin settings of .ds-top-sites .top-sites .top-sites-list does. However, I found that too much movement to the left caused by changing the padding setting here causes the block of tiles to lurch to the left a lot when changed by just one px increment.
boof (OP) quintuple-posted this 21 hours ago, 2 minutes later, 23 hours after the original post[^][v]#1,375,595
The width setting affects the spacing between the columns. With my particular monitor resolution, if the left/right page margins are not changed from default, then for Ctrl+ 4 times, width 97px is the most that allows 10 columns. For Ctrl+ 3, 110px is the most that allows 10 columns. You'll need to play with your settings to know when similar effects happen. The first padding number also affects spacing between the columns. The second padding number affects space on top of each row, and the third padding number affects space on the bottom of each row. All three numbers set to 0px is fine. For whatever reason, the changes to the padding do not always take effect for a home page set as a new tab page.
boof (OP) sextuple-posted this 21 hours ago, 1 minute later, 23 hours after the original post[^][v]#1,375,596
The width and height settings affect the size of the "rich" icons (larger type from websites) and Firefox's stock letter icons if the position setting is the default "relative". The largest icons reach the edges of their tiles at 80px, assuming the tile itself has not been changed from its default width and height of 80px. A third type of icon that is a smaller type from websites is not affected. If position is set to "initial", the result is maximally big rich icons regardless of the size settings, while the stock letter icons only are sizable. For the default tile sizing of 80px, setting width and height each to 69px is fine for a border effect. If the tile height has been changed (see .top-site-outer .tile) to 69px, then width and height of 52px is fine.
boof (OP) septuple-posted this 21 hours ago, 53 seconds later, 23 hours after the original post[^][v]#1,375,597
The border-radius setting makes the icon art have the shape range from circle to almost square. If the above block of settings has position set to the default relative, then setting border-radius at 0 makes almost square, and 24 makes for a circle. If position is set to initial, then 0 makes for a square, 24 is the maximum that allows full icon art to show no gap, and 40 makes for a circle.
boof (OP) octuple-posted this 21 hours ago, 43 seconds later, 23 hours after the original post[^][v]#1,375,598
These settings are for the container tiles of the icon art. Setting border-radius to 0px makes for a square, while increasing the value makes the corners rounder until 40px is reached, when the shape is circular. Setting border-radius to 24px is fine. For an oblong shape to the tile instead of square, setting height at 69px is fine.
boof (OP) nonuple-posted this 21 hours ago, 3 minutes later, 23 hours after the original post[^][v]#1,375,601
These settings are supposed to affect the positioning of the gear icon, but nothing happens when I try to change the settings. I would have have preferred to put the icon 4px from the top and inset-inline-end. When you have allowed more columns with changing of other settings I described, sometimes the rightmost tile at the top crowds the gear icon.
boof (OP) decuple-posted this 21 hours ago, 3 minutes later, 23 hours after the original post[^][v]#1,375,603
hmmm what happened to the ability to edit? 0 sec edit window? anyway, the 701px is probably different for you so you'd have to do the Inspect on a new tab page and find it. Search for .personalize-button.
boof (OP) undecuple-posted this 21 hours ago, 5 minutes later, 23 hours after the original post[^][v]#1,375,609
oh hey, swell news -- I figured out that I could set top and inset-inline-end in another section for the gear icon settings, despite these settings not being in that section before.