Change Start Page margins to fit more columns?



  • When running at 1080p at 125% scaling, I can only fit four columns into the Start Page. What CSS would I need to use in my custom.css to:

    • Change left & right margins (to fit more columns)?
    • Change margin between the dials?

    I am pretty sure I can fit at least another column in there so I don't need to scroll to see my dials.

    Also, is there any kind of documentation on the names of the CSS elements of this page for modders? Or do we have to just guess and base changes on what others know?



  • @Pathduck No, we don't guess, we look it up.

    https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools

    I have requested that this thread be pinned, but no one did so far in over a year. So most users don't know, some do and yet others ask and then know.



  • @luetage Thanks a lot for that, very useful, they really should pin that thread!

    I had a look with the DevTools, and found the elements that are probably related, but my CSS skill is not good enough to figure out what I want. I know it's possible because I've seen examples of something similar, for instance: https://forum.vivaldi.net/topic/32865/share-speed-mod

    In the example above, the huge margin between dials is reduced, and it can easily fit six dials in one row.



  • @Pathduck First of all check that you have set the maximum number of speed dials in a row high enough in vivaldi://settings/startpage/. I take it you're scaling the .dials? I wouldn't be so sure you can fit more in a row, it completely depends on the size of your window. Scaling has no effect whatsoever on it, because you scale the whole element. Individual speed dials cannot be displayed outside the container.



  • @luetage Yeah, I've set max dials to 6.

    It does look like the number of dials in a row is calculated somewhere, depending on size of the container.

    I am not scaling the dials, I want to avoid that.

    But surely it must be possible to increase the size of the containing element to make it fit more dials? The margin from the dials to the edge of screen is bloody huge.

    CSS flows is a relatively new thing to me, and I know very little about it, I notice they use it here, and it might be related to its inner workings.

    Edit: example of what elements I want to trim the size of, marked in red.
    alt text



  • Try this (if you want you can uncomment commented areas – these are not important):

    .dial-columns {
      height: auto !important;
      width: auto !important;
      margin: 0 !important;
      /*text-align: center;*/
      /*text-align-last: left;*/ /*WARNING: doesn't use the margin auto-generated by the line above*/
    }
    .speeddial .dial {
      position: initial !important;
      transform: none !important;
      display: inline-flex !important;
      /*margin: 10px;*/
      /*height: auto !important;
      width: auto !important;*/ /*or set values you want*/
      vertical-align: top;
    }
    /*.speeddial .dial:last-of-type {
      margin-bottom: 0 !important;
    }*/
    

    Edit: Max columns setting doesn't work with this. (can be done with max-width)
    Edit 2: Still a bit buggy with folders (only without custom thumbnails AFAIK) solved



  • @potmeklecbohdan Thanks, that seems to be getting somewhere. I was now able to set the margin of the .dial elements - no idea why I could not do it before, maybe because of the display: value?

    However, it now also aligns left, so I've had to specify text-align: center to make the dials center on the page. Any way to avoid the left align? Example:
    alt text

    With the above centering, new dials now also add to center, which is ok I guess... But if you've got a solution to this, it will be appreciated, as I think it looks a bit strange.

    However the 'add' button is now offset down, so I had to set its vertical-align to 'top'.

    And as you say, the max. columns value won't work with this. But not as important to me, I think it's better the dials just fit as they can.

    I wish Vivaldi would have something like the "Speed Dial" extension in FF, where the dials would shrink according to how many columns you want to fit.



  • @Pathduck said:

    @potmeklecbohdan Thanks, that seems to be getting somewhere. I was now able to set the margin of the .dial elements - no idea why I could not do it before, maybe because of the display: value?

    Because of the transform. display is set to inline-flex instead of flex because you want more dials in one row.

    However, it now also aligns left, so I've had to specify text-align: center to make the dials center on the page. Any way to avoid the left align?

    Yes, the text-align was it. It's there, but commented.

    With the above centering, new dials now also add to center, which is ok I guess... But if you've got a solution to this, it will be appreciated, as I think it looks a bit strange.

    However the 'add' button is now offset down, so I had to set its vertical-align to 'top'.

    Can you please explain more?

    And as you say, the max. columns value won't work with this. But not as important to me, I think it's better the dials just fit as they can.

    Another way of setting the max number of columns would be max-width.



  • @potmeklecbohdan

    Can you please explain more?

    I needed to add vertical-align to the below element otherwise it ends up unaligned with the rest. And as you can see new dials are now centered because of the text-align=center. But those are minor things, it looks much better now, and I am able to fit 5 dials where I could only fit 4 on one row earlier. So thanks 👍

    .speeddial .dial:last-of-type {
        vertical-align: top;
    }
    
    

    If not then...

    alt text



  • @Pathduck Wow, thanks for that code. It solves the bug I wrote (if you set it for all, not only last). I'll add it to the code.



  • @potmeklecbohdan said in Change Start Page margins to fit more columns?:

    @Pathduck Wow, thanks for that code. It solves the bug I wrote (if you set it for all, not only last). I'll add it to the code.

    Oh yeah, good idea to just set it on all the dial elements, not just the last!

    Glad I could be of some help back ☺



  • Damn, looks like the latest snapshot broke this mod. I was able to fix part of it by removing the position and transform rules, but now the dials are left-aligned and I cannot control the margin between them.

    EDIT: I've been able to center the dials again with removing width=100% from .the dial-columns class.

    I think the main issue is that the margins are not selectable in CSS at all so I can't set them small enough to fit as many dials as possible. Again, might be some CSS black magic I don't understand here...

    @luetage @potmeklecbohdan Any ideas?



  • @Pathduck Until I solve it you can use 'Hide Title' in SD settings—then you don't need any other changes, because the problem is here: The title is on the right, not on the bottom:
    Bad positioned SD thumbnail title

    Edit: what, I use word “left” for meaning of “right” and “right” instead of “bottom”? I should go to bed…



  • @Pathduck OK, everything you have to do is to change display of .speeddial .dial from inline-flex to inline-block.



  • @potmeklecbohdan LOL I was just about to write when I saw your reply 😋

    Thanks a lot! It seems to have done it without any more changes needed. I will try some more to see if other elements can be trimmed off, I like to keep things minimal so I understand what each directive does, and I just don't get the flex stuff 🙂

    Not sure why I even have titles on - so good tip, might as well have them off by default.


 

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