Speed Dial Thumbnails too Large...



  • I have to keep the "User Interface" zoomed to 100% or the text in menus and address bar are too small to read comfortably. When the UI is zoomed to 100%, the Speed Dial thumbnails are HUGE! Is there a way around this? If not, please consider separate sizing of the UI and the thumbnails. Thanks!

    Robert



  • Hi, you must be new using Vivaldi because, too bad, this is a really old and often requested feature (ability to define speeddial thumbs geometry unrelated to UI zoom)
    You can try see if a feature request in the relevant threads is already there or create a new one, and see if it gets voted enough to get the devs attention. Don't hold your breath.
    https://forum.vivaldi.net/topic/20968/feature-requests-for-1-13


  • Moderator

    @ddferrari said in Feature requests for Vivaldi 1.14:

    Allow resizing of Speed Dial Thumbnails.



  • @bobad hello, try to use my custom css code. I'm using UI zoom on 110%, so they may be too small for you, but I think it's still better than default.

    Follow these articles on how to apply it:
    https://forum.vivaldi.net/topic/10549/modding-vivaldi/11
    https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/19

    Here the code:

    /* SPEED DIAL */
    .startpage .startpage-navigation {
        min-height: 40px;
    }
    .dials {
        position: relative;
        margin: 30px auto 0;
    }
    .sdwrapper .dial-columns {
        position: relative;
        width: auto !important;
        height: auto !important;
        padding: 15px;
        margin: 0 auto !important;
    }
    @media only screen and (min-width: 951px) and (max-width: 1120px) {
    .sdwrapper .dial-columns {
        width: 930px !important;
    }
    }
    @media only screen and (min-width: 1121px) and (max-width: 1320px) {
    .sdwrapper .dial-columns {
        width: 1110px !important;
    }
    }
    @media only screen and (min-width: 1321px) and (max-width: 1520px) {
    .sdwrapper .dial-columns {
        width: 1290px !important;
    }
    }
    @media only screen and (min-width: 1521px) and (max-width: 1720px) {
    .sdwrapper .dial-columns {
        width: 1470px !important;
    }
    }
    @media only screen and (min-width: 1721px) and (max-width: 1920px) {
    .sdwrapper .dial-columns {
        width: 1650px !important;
    }
    }
    @media only screen and (min-width: 1921px) {
    .sdwrapper .dial-columns {
        width: auto !important;
    }
    }
    .speeddial .dial {
        position: relative;
        float: left;
        width: 160px !important;
        height: 135px !important;
        transform: none !important;
        margin: 10px;
    }
    .dials .dial .thumbnail-image {
        border-radius: 5px;
    }
    .dials .dial .button-title {
        padding: 2px 6px 3px;
        border-radius: 15px;
        font-size: 11.5px;
    }
    .speeddial .dial:last-of-type {
        margin-bottom: 15px;
    }
    .speeddial .dial.add {
        display: none;
    }
    


  • Cool, it works, thanks :P



  • @retoree said in Speed Dial Thumbnails too Large...:

    @bobad hello, try to use my custom css code. I'm using UI zoom on 110%, so they may be too small for you, but I think it's still better than default.

    Follow these articles on how to apply it:
    https://forum.vivaldi.net/topic/10549/modding-vivaldi/11
    https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/19

    Here the code:

    /* SPEED DIAL */
    .startpage .startpage-navigation {
        min-height: 40px;
    }
    .dials {
        position: relative;
        margin: 30px auto 0;
    }
    .sdwrapper .dial-columns {
        position: relative;
        width: auto !important;
        height: auto !important;
        padding: 15px;
        margin: 0 auto !important;
    }
    @media only screen and (min-width: 951px) and (max-width: 1120px) {
    .sdwrapper .dial-columns {
        width: 930px !important;
    }
    }
    @media only screen and (min-width: 1121px) and (max-width: 1320px) {
    .sdwrapper .dial-columns {
        width: 1110px !important;
    }
    }
    @media only screen and (min-width: 1321px) and (max-width: 1520px) {
    .sdwrapper .dial-columns {
        width: 1290px !important;
    }
    }
    @media only screen and (min-width: 1521px) and (max-width: 1720px) {
    .sdwrapper .dial-columns {
        width: 1470px !important;
    }
    }
    @media only screen and (min-width: 1721px) and (max-width: 1920px) {
    .sdwrapper .dial-columns {
        width: 1650px !important;
    }
    }
    @media only screen and (min-width: 1921px) {
    .sdwrapper .dial-columns {
        width: auto !important;
    }
    }
    .speeddial .dial {
        position: relative;
        float: left;
        width: 160px !important;
        height: 135px !important;
        transform: none !important;
        margin: 10px;
    }
    .dials .dial .thumbnail-image {
        border-radius: 5px;
    }
    .dials .dial .button-title {
        padding: 2px 6px 3px;
        border-radius: 15px;
        font-size: 11.5px;
    }
    .speeddial .dial:last-of-type {
        margin-bottom: 15px;
    }
    .speeddial .dial.add {
        display: none;
    }
    

    Hey I've been using your code and works great. However there's a strange pattern for the shadows of the thumbnails. Is there any method to remove the shadows?


Log in to reply
 

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