How do you change the number of thumbs in a speed dial row ?
-
Hi,
I already made several modifications to my custom.css. For my speed dial, I managed to reduce the thumbs' sizes via zoom. I suppose it was not the best thing to do : No matter the size, I still get a row of five links, no more.So, I wondered what modifications should be made to obtain a result such as this one, by @mib2berlin :
Thanks
-
@GoldNoway
vivaldi://settings/startpage/ In Speed Dial pick a maximum columns setting that fits your needs. No customization needed. -
Your link doesn't show an example.
You have 5 rows because that is what fits the amount of dials you have with 7 columns. You can change that in the
speed dial
settings.edit @luetage , beat me to it
-
Thanks. The thing is that I already chose 12 columns as a maximum. A minute ago, I decided to go with "no maximum", and put a ".dials {
zoom: 70%;
}" in my custom css.I suppose it's not the best way to get the result I'm expecting, because I'm always left with 5 rows, as illustrated below :
That's the reason why I'm trying to find a css-related answer
-
I wonder if the problem is the zoom. The page still thinks the thumbnails take the original space and therefore can't fit any more?
-
Yep, I think so as well. When changing the window's size, the number of rows decrease, so my problem won't be solved by the zoom function.
Hence my question, which code should I use to properly reduce the thumbs size ?
-
@goldnoway The original code doesn't solve this problem. You will probably have to do it without zoom. Even if you increase the width of the
.dial-colums
selector, only the original number of dials per row will be displayed. Vivaldi probably has javascript code running to evaluate this, and therefore javascript code would be needed to change the behaviour? -- I reckon? No idea, maybe I'm overlooking a very simple css solution I just can't see.In any case post your current code. You can't ask for help without providing it. Took me some time to hunt it down.
-
@luetage Ok, that's mostly code from the mod section, but I did alter it in some places
// In the next post
Thanks again for your time & patience
-
Oh lord, this is messed up. Why do you have javascript code inside a css file? Doesn't this throw an error and everything below that point isn't implemented anymore?
And just as a tip: You can display code in markdown by using three backticks before and after the segment.
Like this:
```
code
```
And it probably suffices to just paste the code you use on the startpage.
-
In fact I just realized the presence of javascript and edited it immediately, I suppose you saw the unedited version of my post
For what it's worth, my code does still work as intended with or without the js segment.Thanks for the tip, I didn't know how to post code in markdown, and desperately searched for it
I think the relevant section of my code is as follows :.startpage .startpage-navigation { font-size: 15px; background: rgba(0,0,0,0.4); /* font-weight: 700; */ min-height: 2px; /*Reduced nav bar height*/ } /* Use the following to hide the site info text*/ button.button-addressfield.addressfield-siteinfo.certified .siteinfo-text{ display: none } /* Include the following to display the full name on hovering */ button.button-addressfield.addressfield-siteinfo.certified:hover .siteinfo-text { display: block } /* Speed Dial Thumbnails ============================*/ .dials { zoom: 90%; } .speeddial { margin-top: 30px; padding: 10px; } .dials .dial .thumbnail-image { /* border-radius: 6px; width: 110% !important;*/ min-width: auto !important; } /* Speed dial thumbnails opacity */ .thumbnail { opacity: .85; } /* Speed dial thumbnails opacity on hover */ .thumbnail:hover { opacity: 1; }
I also uploaded the whole code. Thanks again !
-
So, I found that some of the previous code didn't work as planned because of the previously inserted js. I messed with my css a little bit, to obtain this :
.startpage .startpage-navigation { font-size: 15px; background: rgba(0,0,0,0.4); /* font-weight: 700; */ min-height: 2px; /*Reduced nav bar height*/ } /* Use the following to hide the site info text*/ button.button-addressfield.addressfield-siteinfo.certified .siteinfo-text{ display: none } /* Include the following to display the full name on hovering */ button.button-addressfield.addressfield-siteinfo.certified:hover .siteinfo-text { display: block } /* Speed Dial Thumbnails ============================*/ .dials { zoom: 90%; } .speeddial { margin-top: 30px; padding: 10px; } .dials .dial .thumbnail-image { /* border-radius: 6px; width: 110% !important;*/ min-width: auto !important; width: 180px; height: auto; margin: 0 auto; } /* Speed dial thumbnails opacity */ .thumbnail { opacity: .85; } /* Speed dial thumbnails opacity on hover */ .thumbnail:hover { opacity: 1; }
I think that the only problem here is that I don't know what to use to change the margins of the thumbs. If someone has an idea, I'm all ears !
-
I'm assuming you got your code from here
You have blocked the part that would help you with the horizontal margins,
width
, you need to increase that to take up some of the margin space. The vertical ones are a little trickier because of the titles but you can addmargin: -10px;
ormargin-bottom: -15px;
. It will work well with the thumbs that V generates but it can make custom ones get cropped a bit depending on their size (aspect ratio). Then you can reduce the zoom again if desired -