Further Customization for New Tab page
I would like to further customize my new tab page.
Specifically, I'd like to get rid of the firefox logo at the top, and I'd like to increase the number of columns of shortcuts per row from 8 to lets say 14, while decreasing the spacing between each icon by about half.
I've already followed [tutorial] from y'all on how to increase the number of rows, and another tutorial that had me fiddle with the browser.newtabpage.activity-stream.topSitesRows setting directly in my about config. I have enough rows I want more columns and less space between them.
Find attached the current state of my new tab page, with my particular shortcuts redacted, and the number of additional shortcuts I could fit on the page without adjusting the gabs between them or resorting to a scroll bar. I'm missing out on at least 44 short cuts due to the default constraints, which I've been unable to find working overrides for. Depending on how cut-throat I get with my thin-margins, I could potentially be missing out on up to 80.
I tried following the near identical instructions from both this stack exchange and this tutorialpedia article, to try and get at the problem by modifying my about page's CSS; but I was unable to change part of the page's appearance. Not even the background or text color.
Is the information in these out-dated (the stack-exchange is 7 years old) or otherwise inaccurate; or is there perhaps a setting in firefox which is interferring with these tutorials' solution method.
I have already tried resetting firefox with extensions disabled to check if any of my extensions are causing the problem to no discernable affect.
منتخب شدہ حل
About, Profile Folder. https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile
About, toolkit.legacyUserProfileCustomizations.stylesheets.
Since https://www.firefox.com/en-US/firefox/69.0/releasenotes
Firefox no longer loads userChrome.css or userContent.css by default improving start-up performance. Users who wish to customize Firefox by using these files can set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true to restore this ability.
Have you verified, toolkit.legacyUserProfileCustomizations.stylesheets 1 - Go to configuration editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox 2 - Enter a search term toolkit.legacyUserProfileCustomizations.stylesheets Double-click on the preference, to set its value to true And, restart Firefox.
اس جواب کو سیاق و سباق میں پڑھیں 👍 1تمام جوابات (6)
Hello
About logo. https://support.mozilla.org/en-US/questions/1545347. If you wish to test, userContent.css
For information purposes. https://www.reddit.com/r/FirefoxCSS/comments/1m6u88z/more_than_8_shortcuts_per_row
You can test userContent.css
@-moz-document url(about:newtab), url(about:home) { .logo-and-wordmark-wrapper { display: none !important; } /** Grid column count Override Fx141 **/ .top-sites-list { grid-template-columns: repeat(4, 1fr) !important; } @media (min-width: 680px) { .top-sites-list { grid-template-columns: repeat(6, 1fr) !important; } } @media (min-width: 920px) { .top-sites-list { grid-template-columns: repeat(8, 1fr) !important; } } @media (min-width: 1080px) { .top-sites-list { grid-template-columns: repeat(10, 1fr) !important; } } @media (min-width: 1360px) { .top-sites-list { grid-template-columns: repeat(12, 1fr) !important; } } }
Agent virtuel کی جانب سے میں ترمیمکی گئ
https://connect.mozilla.org/t5/discussions/the-new-tab-ui-change-is-terrible/td-p/105808
Other test, adjustment. After, it is up to you carry out tests to see and modify at your convenience.
@-moz-document url(about:home), url(about:newtab) { .logo-and-wordmark-wrapper { display: none !important; } /** Grid column count Override Fx141 **/ .top-sites-list { grid-template-columns: repeat(4, 1fr) !important; } @media (min-width: 680px) { .top-sites-list { grid-template-columns: repeat(6, 1fr) !important; } } @media (min-width: 920px) { .top-sites-list { grid-template-columns: repeat(8, 1fr) !important; } } @media (min-width: 1080px) { .top-sites-list { grid-template-columns: repeat(10, 1fr) !important; } } @media (min-width: 1360px) { .top-sites-list { grid-template-columns: repeat(12, 1fr) !important; } /* * 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 } }
Agent virtuel کی جانب سے میں ترمیمکی گئ
Hi, thank you for your help. I'm hopeful that this css will work once I get firefox to recognize any css at all; which it's currently not doing.
I created the 'chrome' folder in my profile's root directory, and a 'userContent.css' file in that folder which is where I'm copy+pasting the css you've provided, per the tutorials and the various intructions you linked; but I'm not observing any changes in the new tab page, even after restarting firefox.
I've also tried doing putting the chrome folder in the local directory to no effect.
Any ideas what I'm might be doing wrong, or what settings I might need to change in firefox's config to make it work?
منتخب شدہ حل
About, Profile Folder. https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile
About, toolkit.legacyUserProfileCustomizations.stylesheets.
Since https://www.firefox.com/en-US/firefox/69.0/releasenotes
Firefox no longer loads userChrome.css or userContent.css by default improving start-up performance. Users who wish to customize Firefox by using these files can set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true to restore this ability.
Have you verified, toolkit.legacyUserProfileCustomizations.stylesheets 1 - Go to configuration editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox 2 - Enter a search term toolkit.legacyUserProfileCustomizations.stylesheets Double-click on the preference, to set its value to true And, restart Firefox.
Thank you. The CSS is applying now. There's some quirks with it, but it's at the point where I'll be able to iron them out.
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.