Reduce hight of title bar



  • How can I reduce the height of the title bar to make it as high as the tabs, also how to lower the position of the minimize, resize and close buttons to make them alien with the trash icon. (spaces coloured pink in accompanying image).

    0_1519993048970_final.png

    Regards
    raed



  • @raed
    Hi, there is a setting in vivaldi://settings/tabs/ called Tab Display > Remove Tab spacing in ...
    This should reduce height to 0.

    Cheers, mib



  • @mib2berlin
    I have this setting ticked, it does not make a difference, the spaces I have highlighted in the image do not get altered, using my custom browser.html and an unaltered browser.html.

    The problem of title bar height is not present in full screen, it is only present in a resized screen, the same goes for the position of the close resize and minimize icons.

    Using native window makes the problem disappear, but beats the purpose of reducing unused screen real estate.
    Regards
    raed



  • Ah, I never work with resized browser, may some modders step by.
    Not possible atm. in Vivaldi.

    Cheers, mib



  • This should work.

    .win.normal #tabs-container.top {
        padding-top: 0px;
    }
    

    However, you'll need to fiddle with the rest of the elements in the top bar as they get mis-aligned a bit.



  • @lonm

    Thank you, that worked very well indeed, the only element to be miss aligned in my setup is the hamburger menu icon (which can be changed into a Vivaldi icon in browser settings)at the left of the title bar.

    Does anyone know the element name for it so I can pad it back into the correct position?

    Regards
    raed



  • @raed Dev tools just tells me it's button.vivaldi:

    0_1520007609108_9822a378-307f-4fe0-9aeb-7cda7ff2cad1-image.png



  • @lonm
    Thank you once again, I am getting too involved with this, time to learn how to use dev tools me thinks.

    Regards
    raed



  • @lonm
    I have attempted to use:

    .win.normal #.button.vivaldi.top {
        padding-top: 3px;
    }
    
    

    but it is not working regardless of what value I use for

     padding-top:
    

    Regards
    raed



  • @raed said in Reduce hight of title bar:

    .win.normal #.button.vivaldi.top {
    padding-top: 3px;
    }

    I've just tried. I would suggest

    .win.normal button.vivaldi {
        height: 32px !important;
    }
    
    

    It seems you were using an invalid selector (# is for IDs, and you don't need . for element names), and the element will auto-centre if you give it the right height.



  • You should be able to use this.

    .vivaldi {
        top: 3px !important;
    }
    
    


  • @lonm

    Thank you, that worked beautifully.

    0_1520014547051_01.png

    @sjudenim

    Thank you, your approach worked beautifully as well with -5px value

    .vivaldi {
        top: -5px !important;
    }
    

    Regards to you both
    raed



  • @sjudenim and @LonM

    Using:

    /* Correct vivaldi button position on address bar*/
    .vivaldi {
        top: -5px !important;
        padding-right: 5px;
    }
    
    

    makes the hamburger icon spot on in the middle of the tabs bar while the window is resized.

    0_1520034383339_0022.png

    Once the window is maximized it messes it all up, I have attempted curing it with adjusting the top: value, but it does not work.

    While using:

    .win.normal button.vivaldi {
        height: 32px !important;
        padding-right: 5px;
    }
    

    Keeps it where it should be, regardless if the window was maximized or resized.

    Regards
    raed


 

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