Speed Dial margins

nparekh

Does anyone know how to reduce the margins in the speed dial?

2019-10-06 (1).png

I want the top row and bottom row to be closer.

Pathduck

@nparekh I have the following mod for the dials:

.speeddial .dial {
    position: initial !important;
    transform: none !important;
    display: inline-block !important;
    vertical-align: top;
    margin: 0 5px 3em;
}

I think you have to override the position, transform and display values to be able to change the margin values.

A Former User

@Pathduck Also this to fix titles position:

.dials .dial .editable-title-container {
    position: unset !important;
    display: block;
}

nparekh

@Pathduck the problem i have is that since all the speed dials have the same class, whatever i do to one affects all of them. So how do I only change on of them?

nparekh

@Pathduck uhh

2019-10-06 (2).png

A Former User

@nparekh That would need all CSS you use for speed dials.

About selecting only some of them, you can use :nth-of-type, but why do you want to do this?

Pathduck

@nparekh Welcome to modding Vivaldi - sometimes frustrating, always fun

I guess I left out some parts back there, sorry about that

Try to add these as well:

.dials .dial .thumbnail-image {
    height: 100%;
    padding: 1em;
}

.dials .dial .thumbnail-image img {
    object-fit: contain;
}

I'm not going to give you all the CSS I use because everyone's needs are different, and besides how else are you gonna learn by doing

Here's a tip to help you along: Start Vivaldi with the following command line:
vivaldi --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end
This will allow you to Right click > Inspect on the UI elements, so you can examine the CSS and play around with it, it's extremely useful when modding.

A Former User

@nparekh Ah, nice error: I forgot to try the code without my mods You can take a look at the link in my signature → CSS folder if the code by @Pathduck doesn't work.

Pathduck

@potmeklecbohdan said in Speed Dial margins:

doesn't work.

What doesn't work? Please be more specific.

This is just the basics to be able to control the margins of the SD. For some reason you can't change the margins of each dial without changing the position, transform and display declarations. I think it's to do with the default "flex" definition of the element, but not sure about this.

As for how to style individual dials and not all of them, that's more advanced CSS and would like you say probably require use of :nth-of-type.

@nparekh This should be complete:

.dial-columns {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center;
} 

.speeddial .dial {
    position: initial !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 5px 3em;
}

.dials .dial .thumbnail-image {
    height: 100%;
    padding: 1em;
}

.dials .dial .thumbnail-image img {
    object-fit: contain;
}

.dials .dial .editable-title-container {
    position: relative !important;
    top: .4em !important;
}

It's important to note that the Vivaldi team changes the code underneath from time to time, and it will break mods, that's why it's important to know what each element does.

A Former User

@Pathduck said:

What doesn't work? Please be more specific.

Ah, you misunderstood the if. That means only that I didn't test it and in case it would still be incomplete (what can happen, as you could see with our previous try), @nparekh can look if (s)he can find the needed part there (because I don't see such issues, although I did previously) so doesn't need with every unsuccessful change to wait until someone responds with new idea.

Pathduck

@potmeklecbohdan Yes, it's true, I didn't read that sentence correctly because of the line break at that point, missed the if - sorry about that

Yes, I tested with a clean mod, just to see what was the bare minimum to make it work. If they use other mods it might break, so this is up to the user to understand and test. Also the search field will need to be changed to not overlap with the dials, I leave that up to them to figure out (hint: negative bottom margins*

* Man I hate negative values in CSS, why use them unless you want things to overlap...

nparekh

@potmeklecbohdan how do you use :nth-of-type? As to why I want to do this, it's just that I want all the margins to be equal

BoneTone

@nparekh said in Speed Dial margins:

@potmeklecbohdan how do you use :nth-of-type? As to why I want to do this, it's just that I want all the margins to be equal

https://lmddgtfy.net/?q=css nth of type