Multiple Row Tabs

nomadic

I myself just did that, I created a custom.css in %LOCALAPPDATA%\Vivaldi\Application\3.6.2165.34\resources\vivaldi\user_files

This is the main issue.

You don't need to put CSS files on the Vivaldi folders. In fact, it is undesirable because the location you chose would get erased after each browser update.

And it also looks like all the default page actions are now being used as CSS mods. So instead of only acting on the webpage, they are affecting the whole browser UI. Disabling/Enabling them in the status bar will do nothing.

Go back to Settings, I was able to access them even in the skewed state, and remove that folder as the Custom UI Modifications folder. Then restart the browser to get it back to normal.

Follow these steps and chose an easily accessible folder out of the way. I would suggest maybe a dedicated mods folder in your documents folder:

@Christoph142 said in Modding Vivaldi:

Adding Style

⁣

Vivaldi 2.6 and above

Open vivaldi://experiments

Enable "Allow for using CSS modifications"

Open Appearance section in settings

Choose the folder you want to use

Place your CSS files inside it

Restart Vivaldi to see them in effect

Saved2Serve

@nomadic Well, I did try closing Vivaldi and deleting the whole custom.css file and restarting Vivaldi but the problem persisted. So I removed and reinstalled Vivaldi using the single install this time so everything is in C:\Vivaldi. Now before I try modding again can you tell me where the settings are stored so that I can make a back up? Thanks.

nomadic

@Saved2Serve said in Multiple Row Tabs:

deleting the whole custom.css file and restarting Vivaldi

Unfortunately, that would not have worked as you found out. It was all the default page actions in the same folder that were causing the issue.

What I said to do was use a different folder. Next time try creating a folder called something like Vivaldi Mods and placing that folder inside your Windows documents folder.

Then you can select that folder in settings and not have the page action CSS files interfere with the browser interface and your personal CSS modifications will persist updates to the browser.

Now before I try modding again can you tell me where the settings are stored so that I can make a back up?

Settings aren't all stored in a single place, so the best option would be to backup the entire profile folder that you can find the path to on the vivaldi://about/ page.

Saved2Serve

@nomadic I did remove the folder first to another location, but forgot to change it as the Custom UI Modifications folder. Yet if the folder no longer existed in that location (or any location since I later deleted that file) then V. must be storing its values someplace else.

Sorry to see there is no one file for Settings, so I will back up the whole of it and then try to get multiple tab rows. Thanks agaon.

nomadic

@Saved2Serve said in Multiple Row Tabs:

I did remove the folder first to another location, but forgot to change it as the Custom UI Modifications folder. Yet if the folder no longer existed in that location (or any location since I later deleted that file) then V. must be storing its values someplace else.

Happy to help!

I think you might be getting files and folders mixed up.

The custom.css file wasn't the issue. Changing the folder in the Custom UI Modifications setting was all that mattered.

You could have deleted all the other CSS files in that folder that are responsible for page actions and left your custom.css file in there and it would have worked. The issue with that is that you would no longer have those page actions and the custom.css file would need to be added back after each browser update.

Saved2Serve

@jane-n Good to see you'all are on task! Much appreciate enhanced customization.

alexander.gorbovets

Reminding everyone who didn't vote for this feature request to vote, because the more votes request gets the bigger chance that it will be implemented soon

Saved2Serve

@nomadic Success! I placed the Custom UI Modifications (Open vivaldi://experiments
Enable "Allow for using CSS modifications"
and open Appearance section in settings then
select the CSS folder you put the mod, and restart Vivaldi ) in a separate folder outside the Vivaldi one, and added the code in https://forum.vivaldi.net/post/393809 and the mods in https://forum.vivaldi.net/post/440481 and shutdown Vivaldi and restarted and so far it looks like it is supposed to, although I do not have enough tabs loaded yet to spill over to another row.

The tabs are rather narrow and although I set my minimum tab width to 90 that did not change them. Be nice if each tab was a different color, but that might be asking too much.
alt text

Thanks for the hacking help. May God bless all who make this possible. .

nomadic

@Saved2Serve said in Multiple Row Tabs:

The tabs are rather narrow

These lines are what is responsible for the narrow tabs:

/* Equal width tabs without shrinking */
.tab-strip > span > .tab-position > .tab:not(.pinned) {
  width: 100px !important;
}
.tab-strip > span > .tab-position > .tab.pinned {
  width: 100px !important;
}

You can delete them to let Vivaldi handle the widths of the tabs, but you will not have as nice of a grid look to the tabs.

The other option is to increase the width values to something you like. Here is an example of setting them to 300px (300 pixels) wide:

/* Equal width tabs without shrinking */
.tab-strip > span > .tab-position > .tab:not(.pinned) {
  width: 300px !important;
}
.tab-strip > span > .tab-position > .tab.pinned {
  width: 300px !important;
}

Just change the value to a number that looks good to you.

Saved2Serve

@nomadic Hey that is better. I changed it to 200px which is good for now. Besides this can i ask what are the color codes I see like like border-color: lime? I see nothing visible in color no matter what theme is used. I am not using Compact in Tabs.

Thanks and be happy hacking.

barbudo2005

@Saved2Serve

If you add this code :

#tabs-subcontainer.top.visible

{flex-basis: auto !important;}

You can have multiline second level:

nomadic

@Saved2Serve The line with the color lime is commented out, meaning it won't have any effect. You can remove the /* and the */ to uncomment it.

There are also a few things that are broken in this mod. The new tab button is misplaced.

I am busy now, but I will take a look at it later. If someone else doesn't help before then.

Saved2Serve

@nomadic Again, thanks for the help and may God bless. I have passed on the instructions to an external forum.

infinitywarden

@barbudo2005 thank you, this worked!

Saved2Serve

@alexander-gorbovets Vote where again? Can we email it in:)

Ayespy

@Saved2Serve Click the thumbs up icon at the beginning of the topic - top of Page 1 of the topic you are posting in right now.

nomadic

@Saved2Serve I made a modified version of this mod .

There were lots of things I removed because I didn't see them having any effect. I am still a CSS novice that doesn't have a full grasp of flex and different display options. It seems to work in my testing, but I don't know if I overlooked something.

@fpdragon, @potmeklecbohdan, @alexander.gorbovets, and @barbudo2005 can look over it to see if there is something I missed.

The mod uses variables at the top under the :root selector to allow some easy customization. I tried to make them descriptive, but if you need help changing them, let me know.

/* Multiline Tabs - Modified by @nomadic. Original work by @fpdragon, @potmeklecbohdan, @alexander.gorbovets, and @barbudo2005 */

/* Configuration */
:root {
  --tab-width: 200px;
  --pinned-tab-width: 200px;
  /* unset (to disable), format: style color thickness (ex.) solid var(--colorFgFadedMost) 1px*/
  --tab-border: unset;
  /* To ENABLE fillets on tab corners, use static. To DISABLE, use relative*/
  --fillets: static;
  /* Other options: "📌", "🔒", "*", and unset (to disable) */
  --pinned-indicator: "🔒";
}

/* Changes to allow multiline tab bar */
#tabs-tabbar-container {
  height: auto !important;
}
.tab-strip > span,
.tab-strip > .tab-position {
  display: inline-block;
}
.tab-strip > span > .tab-position {
  --PositionX: 0px !important;
  height: 30px !important;
  width: auto !important;
}
.tab-strip > span > .tab-position,
.toolbar-tabbar > .newtab {
  position: static;
}

/* Sets styles for all tabs based on configuration */
.tab-strip > span > .tab-position > .tab {
  width: var(--tab-width) !important;
  position: var(--fillets);
  border: var(--tab-border);
}

/* Allow pinned tabs to have seperate width */
.tab-strip > span > .tab-position > .tab.pinned {
  width: var(--pinned-tab-width) !important;
}

/* Indicator for pinned tabs */
.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title::before {
  content: var(--pinned-indicator);
  color: gray;
  filter: grayscale(100%); /* make emoji indicators grayscale */
  font-size: 12px;
  width: 23px;
}

/* Keep title visible on tabs */
#tabs-container .tab.tab-small.tab-mini .tab-header .title,
#tabs-container .tab.pinned.tab-mini .tab-header .title {
  display: flex !important;
}

/* Fix overflow issue on secondary bar */
#tabs-subcontainer {
  flex-basis: unset !important;
}

fpdragon

@nomadic

I currently switched to the latest snapshot builds of Vivaldi.
There is a feature called "Tab-Groups" which does a similar job quite elegant for me. With job, I mean managing a huge number of tabs. I recommend everybody to take a look at this feature.
In basic you will get two tab bar lines.
The upper one can be seen as a tab bar for groups of website tabs.
The lower one will just contain the website tabs of the currently selected tab group on the upper bar.

I typically create a tab group for every toppic, I am working on. It's not much work to put tabs in groups and the big benfit is that it is much more tidy and you also can close a whole tab group at once. This makes the multi line tab bar hack obsolete for me.

See: https://vivaldi.com/blog/desktop/snapshots/
Make sure to disable all mods/hacks before activating this feature.

BTW: Yes, the Vivaldi icon turns black. That's the way it is, even if you set up your windows in dark mode.

A Former User

@fpdragon Haha…

the two-bar tabs are in the Stable already
tab stacks are old, only this way to display them is new
it’s been discussed in this thread already

A Former User

@nomadic I don’t know how many of the notes go to my code (if I actually wrote anything from it), but anyway

~~.tab-strip > .tab-position never gonna happen~~ actually, the new tab button is exactly that
you can as well use position: static (& remove the positioning) for .tab-position, same for .newtab
‘Not entirely sure what it does. Left it in because it doesn't do harm’ — I think it makes sure that the title is shown even with a great lot of tabs (when it’d be hidden w/o the mod due to the tab size)
tabs in the secondary bar will overflow — either exclude them from the mod or make sure that the bar extends with them (#tabs-tabbar-container’s display: block or #tabs-subcontainer’s flex-basis: unset)