Additional speed dial tweaks

  • Some little code I'm using in speed dial with 75% UI

    /* Font size and two line text */
    .button-title {
      font-size: 11.5px;
      font-weight: 700;
      white-space: normal !important; /* wrap text */
      width: 100px;
      height: 33px;
      margin: -3px 0px 0px 0px;
    /* Speed dial navigation bar */
    button.button-startpage {
      border: 1px dotted transparent;
    .startpage .startpage-navigation {
     font-size: 16px;
     font-weight: 700;
     min-height: 1px; /* Reduced nav bar height */

  • Good, I'll take the Hide close and update buttons into VivaldiHooks, hoping one day they'll be finally added natively as options in settings.

  • How can you reduce the space around the speed dial tiles?

    Not each tile individually, but around the whole set of tiles.

  • @liyin said in Additional speed dial tweaks:

    How can you reduce the space around the speed dial tiles?

    Not each tile individually, but around the whole set of tiles.
    there's one mod about speed dial geometry
    edit it, find
    min: 10,
    max: 100,
    change the min to 1
    then you can change your SD geometry in Settings/Start Page/Dial Geometry

  • The space on top of the first row remained the same after changing the Speed Dial geometry values.


  • @liyin

    For page spacing create a css file that sets the margins

    For just the top

    .speeddial {
    margin-top: 20px;

    If you want to adjust all them you can use

    .speeddial {
    margin: 20px 80px 0 90px !important;

    the margin numbers work in this order, Top-Right-Bottom-Left

  • Setting margin-top worked and it looks better now.

    Couldn't set bottom margin with either "margin" or "margin-bottom".

    If the right and/or left margins are changed the set of tiles is no longer centered horizontally.

  • @liyin

    Try fooling around with this heading

    .startpage .startpage-content .sdwrapper

  • I'm not a fan of where the speed dial titles are so I've made them into an overlay on the dial itself

    .dials .dial .thumbnail-image {
        border-radius: 6px;
    .dials .dial .button-title {
        background-color: var(--colorBgDarker) !important;
        width: 100% ;
        margin-top: -57px;
        border-radius: 0 0 5px 5px;
        padding: 5px 10px 5px 3px;
    .dials .dial:hover .button-title {
        transform: scaleX(1.027);
        margin-top: -47px;

    Looks like this

  • @sjudenim Good idea. I never knew I wanted this, but apparently I do. 😃

  • I forgot to add this to re-position the update button

    .dials .dial .update-thumbnail {
        bottom: 25px !important;

    and this will nestle the edit box (rename) into the same space

    .dials .dial .editable-title-container > input,
    .dials .dial .editable-title-container > input:active {
        margin-top: -29px;
        border-radius: 0 0 5px 5px !important;
        padding: 5px 10px 10px 3px !important;
        border-color: transparent !important;

  • Looks nice.

    Noticed Speed Dial shows the name of folders:


  • @liyin

    I can't reproduce that in the stable or the snapshot. Thumbnails appear as they should.

    Is that folder supposed to be on the navbar?

  • I never noticed that button in the Speed Dial until now.

    Removed the new CSS code and it is still there, it is the back button to return to top level.

    I reduced the top margin and maybe that's why I didn't notice it, but I doubt it because even with the margin reduced the button is quite visible now.

    It should be possible to hide in CSS.

    I rather use the Back gesture to go back (not possible) and since it is near the Speed Dial link I rather use that, or the Backspace key.

  • @liyin

    Haven't tested this but try setting the margin on that button with this heading,

    .startpage .startpage-folder-navigation button

    You might have to set a negative value

  • @sjudenim You are a precise person, I wouldn't have thought about the input when renaming.

    I noticed that the input doesn't scale when hovering. Your original scaling code can be adjusted for the input though. Works out perfectly and looks just fine.

    The only issue I have is the margin between speed dial rows, which is now larger because the title bar is missing, but still uses the space. The draggable area is also larger now and you can pick the dials up well below their border.
    I'm looking for a solution to this since you have posted, but it seems to be quite complicated?

    alt text

  • @sjudenim

    Removed the button with:

    .startpage .startpage-folder-navigation button { display: none }

    If the vertical spacing between rows could be reduced with CSS, I could get all 4 rows to show without a scrollbar in Speed Dial.


  • @luetage

    I found changing space and sizing in pure css to be difficult. Thankfully den-po created the speed dial geometry hook which can be modified


  • For those on snapshot:

    Damn, now on 1.10 speeddial-items-geometry.js stopped working 😕

    Yeah. Now I have 2 ways to solve it:
    easy: to make a patch instead of the hook
    hard: to rewrite whole SpeedDialView class

  • An alternative is the Simple Speed Dial extension (61kb), but I like the "Speed Dial - Bookmarks - History" links at the top to navigate among them.

    Simple Speed Dial

    From Marko ..

    Much more Speed dial tiles per screen PLEASE!!!!


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