SD Thumbnails: Fit into the dial automatically?

  • Is there any way to get larger SD thumbs to fit the box they're in? Without having to manually create custom thumbs of a certain size?

    I am used to the excellent "Speed Dial" extension on Firefox and there you can choose different methods to fit the images, like fit horizontal, vertical or both/no fit. I usually have fit both for larger thumbs. It's kind silly to have to edit images to fit a specific size in pixels when people are using different resolutions and scaling in the OS.

    At least I am noticing it works fine with some images, while for other they get cropped or scaled wrongly.

    See example:

    alt text

    I get most of my logos from and they are not all a nice fit.

    I assume the devs are working on this, and I guess there is a way to do it in the custom css, if so where/what to change?

  • Moderator

    @Pathduck Custom SD thumbs is a brand new feature, and it will receive enhancements as time goes on. For me, fitting a custom thumb to a speed dial tile is a trivial task, but I'm sure it's not for others. Users are creating and offering for general public use, a TON of custom-fit and custom-designed thumb images. A couple of users are even offering to create them on request for users who are not technically advanced. For the time being though, I do not immediately expect the developers to dive into the thousands of lines of code necessary to enable the browser to custom-fit images to the Speed Dial tiles.

  • Thanks for the reply. Like I said I assume this is something that will come over time, so I can live with it.

    Is there however a way to edit a user css to make them fit, and if so what file would that be, and what values to change? I have had a look in common.css but there are a lot of .speeddial classes that might be it.

  • Moderator

    @Pathduck I'm not aware of anyone having had any success on that score, but perhaps one of the modders can chime in.

  • The speed dial image is set using the css "backgorund-image" property. I think by default it is set to "cover" which means use as much of the full width/height as possible, often meaning part of the image is cropped out.
    What you would want is

    .thumbnail-image { 
       background-size: contain; 
       background-repeat: no-repeat;

  • @LonM that's awesome, thank you very much!

    That solves my problem, apart from a couple of ones where the aspect ratio appears to make them display on the very top of the thumbnail container. I've tried using vertical-align: middle and align-items: center but I'm not all that good with CSS. Any help appreciated.

    It's too bad custom css gets overwritten on Vivaldi updates, so hopefully the devs can make an option to have SD images auto-centered inside the dials.

  • @Pathduck
    Because the image is being set with the background property, you would need to do positioning and styling with the background-* properties. What might work is looking at background-position, and if you're new to css I would recommend having a look here:

    And yeah, having a way to persist custom css across installations would be great.

  • @Pathduck said in SD Thumbnails: Fit into the dial automatically?:

    It's too bad custom css gets overwritten on Vivaldi updates,

    Where you put your customization?
    If you follow this you will need to update one line in one file.

    And your extra stylesheet file survive each update. Well, as long you're not deleting Vivaldi installation folder manually.

  • While you're waiting for the problem to be fixed, maybe you might want to check out some thumbnails from my pack and see if that helps?

  • Thanks for the replies guys.

    @LonM Thanks a bunch again, the background-position: center center; did it for me. Now images are centered horizontally and vertically in the dial box - as well as fitting inside. Awesome. I've fiddled with CSS before but there's a lot new stuff with flexbox and so on, been 10 years since I knew CSS by heart 😉

    @dLeon Yeah I've looked at the guide before, but I didn't really make it work. Maybe I over-complicate things, like I wanted to have it in a different folder, and tried to use

    <link rel="stylesheet" href="../../../style/custom.css" />

    To be able to place the custom css file somewhere outside the versioned install directory which gets overwritten each time. Didn't seem to work but didn't spend too much time on it. Gotta say I really dislike the Chrome way of bundling applications inside versioned directories that gets changed on every bloody update... 😖

    @D0J0P Your pack is really great, all due respect for creating it and being nice enough to create new ones on request, awesome job. Just I am strange that way, I want to do stuff my own way often, and I prefer just grabbing an official logo off the net, as long as it actually fits into the dial. I also prefer transparent logos as I can see more of the background. And I feel I use some sites others don't use that much and don't really feel like asking to make a custom thumb just for me.

  • @Pathduck I understand wanting to do it your own way. I did try to only get official logos/icons of the website company. I'd either get it from the Google Play Store, from their website's branding page, or from logopedia. I'd get the most current, official logo possible, and it has to be official. I also try to make it in the same flat aesthetic as Vivaldi's stock thumbs, and try to scale it in a way I see V's thumbs scaled. I hope I at least did well on that part.

    On asking for sites that aren't used that much, I get a lot of requests for sites that aren't used much. I remember getting one that was a weird site, but I'll do it anyway. Anyway, up to you.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.