top toolbar is a little too tall for me

yonta

alt text

my top toolbar looks like this now.

can you somehow remove a few pixels above and below the address bar?

Pathduck

@yonta Hi!
This is because you have the tab bar on the side, and I believe this was done to make it easier to drag the window now that the standard Windows title bar is hidden by default in 6.0.

I don't like it either, it's way too tall, I like it as skinny as possible.

You can use this custom CSS to make it skinnier:

.mainbar>.toolbar-mainbar {
    min-height: calc(30px / var(--uiZoomLevel)) !important;
}

.mainbar>.toolbar-mainbar .vivaldi,
.mainbar>.toolbar-mainbar .window-buttongroup {
    height: 30px !important;
}

How To: https://forum.vivaldi.net/topic/10549/modding-vivaldi

It's probably not perfect and might cause issues when zooming the UI, if you do that.

yonta

@Pathduck

that code works perfect for me!

tried zooming the UI and no problem. i don't use the feature anyway.

thank you very much!

yonta

this css file doesn't work anymore on snapshot v6.9.3425.3
it still works on stable v6.8.3381.50

i don't really know anything about the code cause i just copied it from this forum
any help?

/*
make main toolbar height shorter by some guy on vivaldi forum
*/

.mainbar>.toolbar-mainbar {
min-height: calc(30px / var(--uiZoomLevel)) !important;
}

.mainbar>.toolbar-mainbar .vivaldi,
.mainbar>.toolbar-mainbar .window-buttongroup {
height: 30px !important;
}

Pathduck

@yonta Hi, some tips:

You can access your old posts from your forum user profile:
https://forum.vivaldi.net/user/yonta

This will find you:
https://forum.vivaldi.net/post/665042

Also instead of that useless "some guy" comment instead add a link to the forum.

/*
Make main toolbar height shorter
https://forum.vivaldi.net/post/771221
*/
.mainbar .toolbar-mainbar,
.mainbar .toolbar-mainbar .window-buttongroup,
.mainbar .toolbar-mainbar .button-toolbar button,
.mainbar .toolbar-mainbar .toolbar-extensions,
.mainbar .toolbar-mainbar .toolbar-extensions .button-toolbar button {
    height: calc(30px / var(--uiZoomLevel)) !important;
    min-height: unset !important;
}

This way next time you're having trouble with a mod you've borrowed, you can find the source easily.

Also note that CSS mods break all the time because of changes to the UI. You are recommended to learn basic CSS so you can maintain your own mods instead of having to wait for someone else to fix your problem.
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools
https://www.w3schools.com/css/default.asp

yonta

@Pathduck

thank you for the tips and the new code!

it works with latest snapshot!