What size/format image is useable by the start page/new tab page buttons?

[BrandonKalicharan]

When I try to "Select Custom Thumbnail" no image I have seems to be use able. I have a couple youtube links there for some pages and I'd like them to actually show the Podcaster/Youtuber so its easier for me to recognize. I used google image advance search and got a wide array of "icons" 256x256 etc but none seem to work.

[Pathduck]

@BrandonKalicharan Hi, the thumbnails use 440 x 360 Pixels (1.22) so if you use a square thumb it won't work well.

If you look under Application\6.8.3381.46\resources\vivaldi\resources\sd_thumbnails in the install folder you will find examples.

I use the following CSS to be able to use any image and not care about their size, as long as the a/r is not completely distorted.

/* Speed Dials thumbnail */
.speeddial .dial .thumbnail-image {
	display: block;
	padding: 1em;
}

/* Speed Dials thumbnail fit container */
.speeddial .dial .thumbnail-image img {
	object-fit: contain;
	object-position: center;
}

You strictly don't need the padding there but it looks better with a little border.

I honestly don't know why they haven't changed this to allow us to use any image. But at least we have CSS mods.

[BrandonKalicharan]

I tried replacing my Amazon icon with the one from the folder but it didnt work for some reason. i can see that its "trying" since when i right click on it now it asks me to clear the custom thumbnail but it still shows the regular image that was there before

[Pathduck]

@BrandonKalicharan You have it set to Icon, set it to something else.
The default is Icon and it only shows the favicon.

It helps to read the docs, but this isn't well documented.
https://help.vivaldi.com/desktop/bookmarks-speed-dial/speed-dials/
https://help.vivaldi.com/desktop/navigation/start-page/#Quick_Settings

[BrandonKalicharan]

Is it possible to change the Icon? Even when i set it to "tiny" im getting way less buttons. I currently have 48 Icons and tiny still only gives 27 thumbnails.

I'm "making" a visual folder of my sites

I'm no artist or anything so i made each square individually in paint with the rectangle tool. I was hoping to have different corners be different things and so on

[Pathduck]

@BrandonKalicharan No you can't change the icon, it's the favicon from the website.

Try playing with the Quick Settings.
Otherwise you'll have to get advanced with CSS.

[BrandonKalicharan]

ive been trying a lot it looks like i'll just have to make little images on my "custom" background to help me out. chatgpt's best try was: and it still didnt work

/* Change Amazon.com favicon to Steam favicon */
.speed-dial .speed-dial-button a[href*="https://www.amazon.com/"] .thumbnail-image {
    background-image: url("file:///C:/Users/brand/AppData/Local/Vivaldi/Application/6.8.3381.46/resources/vivaldi/resources/favicons/steam.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
}

[Pathduck]

@BrandonKalicharan ChatGPT is an idiot.

There is no .speed-dial element, there is no a element.
You can't just set a background-image without also removing the image already there with a higher z-index.

Learn to inspect the UI and see how the code looks.
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools
Inspecting allows you to play with the code without having to restart every time you make a change.

For this "project" you have your work cut out for you - I'd say if not impossible certainly very hard because the way the SD tiles are coded. But good luck, way over my head

[BrandonKalicharan]

@Pathduck im no coder but if theres one thing i can do its to find a half ass method of getting the job done, and adding titles/images in paint seems like the way to go. its a lot of trial and error since theres no real good template out there but since i made my own im working slowly on adding the labels. here's how its looking so far

[Pathduck]

@BrandonKalicharan I really really hope you're not using actual MS Paint for this?

And even if you make a nice background image with all the icons on it, how are you making them clickable unless they overlay exactly with the actual SD thumbnails?

[BrandonKalicharan]

@Pathduck yup, good old paint.

yeah im making them overlap with the icons directly. its a lot of trial and error since the sizes are weird and the scaling is off when i load it in but its getting the job done, in the most half ass way possible