Change Start Page margins to fit more columns?
-
@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.
-
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:
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 toinline-flex
instead offlex
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...
-
@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:
Edit: removed imageEdit: 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
frominline-flex
toinline-block
. -
@potmeklecbohdan LOL I was just about to write when I saw your reply :face_savouring_delicious_food:
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.
-