Permanently Color Tabs and size of pinned Tabs

  • Hello everyone,
    this is my first post here and i'd like to express my love for Vivaldi. After Firefox going all haiwire on their Plugin System and TreeStyleTabs basically beeing unusable (not even speaking of colourful tabs and such), i'm glad to have found a perfect alternative.

    With that out of the way, i have one gripe and one "feature request". I might have missed it though.

    1. Is it possible to enable the coloring on all tabs, not only the active one? I love the dynamic coloring but would love to have it color the tabs always. Maybe a little more transparent than the active one.
    2. Why don't pinned tabs shrink in vertical tab mode like they do in horizontal (I have no previews active, so pinned and not pinned looks identical)? TreeStyleTabs had this perfect with all pinned tabs beeing shrunk to favicon size0_1504005489787_Favicon.PNG

    Any help in those directions would be highly appreciated.

  • Color for all tabs isn't possible. You will have to wait for Vivaldi to implement this, or code it yourself.

    Shrunk pinned tabs would be another feature request, I assume the size isn't adjusted to keep the look coherent. You can try this though:

  • Yeah, the size is fixed. The number of Tabs per row is adjusted for the width of the sidebar though.

    Thanks, i'll look into this.

  • I just checked it, the accent color is determined by the currently active tab. You can color the inactive tabs with css, but they will all share the same accent color. Vivaldi currently has no code in place to accomplish this easily.

  • Ok, after digging through the CSS some more my "small pinned" thing shoudl be doable with flexes or such.

    I was able to resize the pinned tabs to 30px. Enabling flex for the tab-strip does something, but not how i expect it to. It just puts all tabs overtop of another.

  • So, after some trial and error, i at least got the "pinned tabs small" part to work. They don't take the flex-flow: row argument however, so they are still vertically alligned. Any help on how to get this to work would be much appreciated!
    For reference, here's my CSS:

    .tab-position {
    width: 100% !important;

    .tabs-container .resize {
    display: flex !important;
    flex-flow: row wrap !important;

    .tab-position .tab.pinned {
    flex: 0 0 30px !important;

  • First off, you are on the wrong forum board with this request --->

    Modifying tabs on Vivaldi is very painful, and it's clear why this code can't work. Your tab-position is set to 100%, therefore the pinned tab is taking the whole row. You also should make these changes for tabs on the side only, eg

    .tabs-left .tab-position .tab.pinned, .tabs-right .tab-position .tab.pinned {
    flex: 0 0 30px !important;

  • @luetage Sorry, i'll make another thread there. Thanks for the Tip with the sides. I'll add this.

  • Moderator

    @domsch1988 What you want for backgournd colours is to use

    .tab:not(.active) {
        background: var(--colorAccentBgDarker) !important;

    The current active tab will use --colorAccentBg, and the others (tabs without the active class) will be the same colour but slightly darker.


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