Want a thinner tab height and got no clue.

vhxlyt

Can I mod tab height in someway, since I crave more vertical space for webpage？

Aaron

https://forum.vivaldi.net/category/52/modifications

Pathduck

@vhxlyt Hi, take a look at:

https://pathduck.github.io/vivaldi/mods/CSS/custom.css

The Skinnier Mainbar/Statusbar code should work

vhxlyt

@Pathduck Truly appreciate, but I'm new to css file editing, I made one like below but didn't work , I should have missed sort of "structure" I guess

/* CUSTOM CSS for Vivaldi */

/* Vivaldi logo */
.vivaldi-v, .vivaldi-horizontal-icon {opacity: 1 !important;}
.vivaldi-v svg, .vivaldi-horizontal-icon svg {background: radial-gradient(white, white 50%, transparent 50%); fill: #383838;} 

/* Skinnier mainbar */
.mainbar>.toolbar-mainbar,
.mainbar>.toolbar-mainbar .button-toolbar button,
.mainbar>.toolbar-mainbar .toolbar-extensions,
.mainbar>.toolbar-mainbar .toolbar-extensions .button-toolbar button {
   height: 30px;
}

/* Skinnier mainbar - fix BookmarkButton focus */
.toolbar-mainbar .UrlBar-AddressField .BookmarkButton button {
   height: 100%;
}

/* Skinnier statusbar */
#browser footer .toolbar-statusbar {
   height: 22px;
}

mib2berlin

@vhxlyt
Hi, with my low knowledge of CSS the mainbar is the address bar, not the tab hight.
Change the hight from 30 to 20px will show you what happen.

Cheers, mib

Pathduck

@vhxlyt Yeah sorry, I misunderstood - that code is for the address bar, not tab bar. I don't have any code for the tab bar.

Read the docs already linked to, learn to inspect the UI and play around, learn CSS. You'll figure it out

vhxlyt

Thank you guys for great help here, gratefully!
@Aaron @Pathduck @mib2berlin

dannii

+1 for this request. I've dug around the forums and Google, and nothing about making tabs thinner. Tbh those few extra pixels wasted make my OCD go nuts :lol:

I remember Opera had this option, not sure why it didn't migrate to Vivaldi

mib2berlin

@dannii
Hi, it seems you mean tab spacing, you can remove this but only on maximized window.

There are mods about this:
https://forum.vivaldi.net/search?in=titlesposts&term=tab spacing&matchWords=all&by=&categories[]=52&searchChildren=true&hasTags=&replies=&repliesFilter=atleast&timeFilter=newer&timeRange=&sortBy=timestamp&sortDirection=desc&showAs=posts

EDIT: This one is working in 6.6/6.7:
https://forum.vivaldi.net/topic/94541/remove-tab-spacing-in-non-maximized-window?_=1713063760297

dannii

@mib2berlin yessir! I mean Tab Spacing. However I want to remove it in non-maximised windows

mib2berlin

@dannii
You can use the modification I linked in my edit, it seems this work only on Windows.
You have to create a empty text file with an editor paste the CSS code from the user @nomadic and save the file as .css file.
I use tab_high.css.
A description how you do it: https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

It is one of the major features of Vivaldi to modify the user interface as you like. We have mods Vivaldi look like Firefox, if this make any sense.
If you do this once and get it working you know how easy it is.

Cheers, mib

dannii

@mib2berlin said in Want a thinner tab height and got no clue.:

You have to create a empty text file with an editor paste the CSS code from the user @nomadic and save the file as .css file.
I use tab_high.css.

Hello~ What code from Nomadic?

mib2berlin

@dannii
I post the link:

Here you are: https://forum.vivaldi.net/topic/94541/remove-tab-spacing-in-non-maximized-window?_=1713063760297

dannii

@mib2berlin Thank you!