Adding locally stored custom thumbnail to Top Sites
I've created some pre-defined tiles (name, url) in the "Top Sites" of the New Tab section, to which I now want to add locally stored thumbnails.
The edit section does forsee an url section to add those thumbnails, however that method only works for external links and has its limitations:
- external links might break / become outdated - firefox constantly updates those externally linked thumbnails at each start (slows down)
I'm looking for a native solution, i.e. not adding any add-on's.
Opaite Mbohovái (6)
Currently, Firefox does not allow for top sites icons or thumbnails to be stored locally on your computer. To get around this, you would need to put them on the internet somewhere and then use that URL.
Hi
You can specify an image from the website and use code in userContent.css to override this image with an image stored locally in the chrome folder where userContent.css is located.
Add code to the userContent.css file.
@-moz-document url(about:newtab), url(about:home){
.top-site-button[href="https://<url-of-webpage>"] .top-site-icon.rich-icon{background-image: url("image.png") !important;}
}It is not that difficult to create userContent.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
See also:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
See:
@ cor-el:
Many thanks, but unfortunately only 2 tiles changed to the desired images, which were placed in the chrome folder. For the other ones, Firefox keeps pre-fetching a screenshot of the website upon each restart (cache/ cookies being deleted with each shutdown). My userContent.css:
____ '@-moz-document url(about:newtab), url(about:home){
.top-site-button[href="https://www.youtube.com"] .top-site-icon.rich-icon{background-image: url("youtube.jpeg") !important;}
.top-site-button[href="https://amazon.de"] .top-site-icon.rich-icon{background-image: url("amazon.png") !important;}
.top-site-button[href="https://www.dkb.de"] .top-site-icon.rich-icon{background-image: url("dkb.jpeg") !important;}
}' _____
While the above first two cases work fine (though break easily, once I add/ remove "www" or "/" at the end of the link), the third does not.
I would understand, if this wouldn't work with sites, which "resolve" the address (e.g. to display/ ask for your cookie preferences, automatically re-direct acc. to your language preference), but the above 3rd case does not do this ... and still does not work.
Do you have any further ideas?
You can use a partial (fuzzy) selector . A selector like https://www.youtube.com only works for this specific URL. You can use href^="https://www.youtube.com" for each URL the starts with this URL fragment. It is also possible to use a selector for only a specific part of the URL like [href*="list=xxx-xxxxxxxx"] or [href*="v=xxxxxxxxxxx"] for a specific YouTube video.
See:
Moambuepyre cor-el rupive
That is a very helpful comment, many thanks - I have actually replaced all my selectors to "href*" to avoid any misreference. Unfortunately, the problem still did persist, i.e. the tiles do still pre-load a screenshot (apart from the above two outliers).
Following some advice on: SuperUser Forum , I have replaced:
".top-site-icon.rich-icon" with ".screenshot.active"
and now the Top Sites do actually load the local images, instead of external screenshots. Now the only problem is the big initial letters (indicating the no-image fall-back option acc. to the CSS inspector tool) partially hiding the images ((
Strangely enough, the above two outlier websites don't display the "letter" under the ".top-site-icon.rich-icon" command, while still loading the local image ...
I'm no CSS expert, but pls. leave a message on how to code that "letter" out, in case someone knows.
Like I wrote above, if you first apply an image via the edit dialog then Firefox does all the hard work and adds the .top-site-icon.rich-icon element that sets the background-image and hides the fallback image and that allows you to override the website image with your own image with the code I posted above. The fallback icon has .top-site-icon.default-icon as selector as you can easily see in the Inspector if you right-click the fallback image.