Tabs Below Address Bar and Bookmark Bar

[nomadic]

@eilegz From your screenshot, it looks like you have Native Window enabled. That should separate the menu bar from the title bar. Don't think the mod should influence it; it is mostly just the standard Vivaldi behavior.

[eilegz]

@nomadic Great, btw even on my old code and yours theres a line a the top of tab bar or below address bar its there's a way to eliminate that line?

[nomadic]

@eilegz Thanks for pointing that out. They way they draw that border did change recently. The --unified variable was also a bit broken.

Update CSS with those 2 issues fixed is in the first post: https://forum.vivaldi.net/post/446311

[eilegz]

@nomadic Works perfectly, thanks for everything...

[pato]

I have a bug with Vivaldi 6.2.3105.45 (and a few versions prior):

That pink-and-blue image is part of Vivaldi's background image, which I have set to my desktop background. This happens whenever I select the last tab in a tab stack, if that tab "spills over" the right edge of the window. This also makes the leftmost part of the whole UI to be hidden "before" the left edge of the window (there should be a Vivaldi button and a Calendar tab at the far left). This kinda fixes itself if I click on the leftmost tab.
This issue seems to be specific to two-level tab stacks, which I guess this mod was not designed for, as they are a recent feature. Something, either the mod or something else, seems to think that the second level of tabs should be wider than the entire width of the window.

You can also see that Close, Maximize, and Minimize get hidden behind the browser controls, and I can't click them. This happens if the window gets too small.

I'm using another css snippet to change the default font of Vivaldi, but removing it doesn't fix the bug.

[nomadic]

@pato Thanks for pointing it out. They changed how the padding/margin for the window controls was handled. Should be fixed now.

Updated CSS is in the first post: here

And sorry for the delay.

[pato]

@nomadic Works like a charm! Thank you!

[ruulrskybound]

Sometimes opening a new tab triggers tab popup thumbnail even though the cursor is nowhere near the tab bar. https://youtu.be/-MJGsg5rbfs

What I noticed so far:

• Only happens with two-level stack
• Only happens to the second tab of a tab stack

V6.2.3105.54 (Stable channel) (64-bit)

[barefootcoder]

The latest version doesn't seem to work for me on Linux. The last time I downloaded it was back in July of 2022 for version 5.3. That version worked for me up through 6.1. Here's a screenshot showing how it used to look.

In 6.2, this stopped working, so I downloaded the latest version, but it still doesn't seem to work:

I did verify that "Allow CSS modifications" was checked in vivaldi://experiments/ and that sort of thing, but perhaps making the CSS work in 6.2 is different from how it used to be? I'm copying it over using this script (Linux version, natch) that, again, I've been using forever with no issues, but maybe it's changed now.

Does anyone have any advice that might help point me in the right direction?

[nomadic]

@barefootcoder There was a change for JavaScript mods where they need to be added to window.html instead of browser.html, but for CSS mods you shouldn't need a script to add them. Once you define the folder where they are located, it should be all set.

@Christoph142 said in Modding Vivaldi:

Adding Style (CSS)

• Open vivaldi://experiments
• Enable "Allow for using CSS modifications"
• Open Appearance section in settings
• Under "Custom UI Modifications" choose the folder you want to use
• Place your CSS files inside this folder
• Restart Vivaldi to see them in effect

[barefootcoder]

@nomadic: Yep, I read that. Funny thing is, while I had checked that box in "experiments" ages ago, and it had remained checked through every upgrade, I had never set that directory in Appearance, but everything still worked.

In the 6.2 upgrade, the box unchecked itself and I had to go back and recheck it. And I finally noticed that thing about the Appearance directory, so I set that too. But it still doesn't work.

[nomadic]

@barefootcoder I just gave it a try, and it still worked.

Hopefully it is just something wrong with how it is set up on your computer. Are you creating a CSS file, with no spaces in the name, in some folder outside the Vivaldi directory, like in a folder under documents?

I made this step by step guide for another mod to explain the process for Windows: https://forum.vivaldi.net/post/360915

[ruulrskybound]

In fullscreen there is a 36px thick bar on where the toolbar used to be.

[barefootcoder]

@nomadic said in Tabs Below Address Bar and Bookmark Bar:

Are you creating a CSS file, with no spaces in the name, in some folder outside the Vivaldi directory, like in a folder under documents?

That is definitely not how I was doing it—I was still running
GwenDragon's script from ... well, the original thread appears not to exist still, but the script is the original version of the one that appears here. Preliminary attempts to switch to the new way of doing things didn't seem to make a difference, so I was going to try to just blow everything away and start from scratch with a fresh profile and do things the Right Way as soon as I had a free block of time, but in the meantime Vivaldi has been crashing on me so hard that today I'm giving up and downgrading back to 6.1. But along with that downgrade I'm going to set up things the new way and also completely throw out my old CSS and replace it with the one in the top post. So at least I should be able to be starting clean for my next upgrade attempt (whenever that may be).

Anyway, I just wanted to let you know my progress and apologize for the extended radio silence. Your work on this continues to be what keeps me able to use Vivaldi and not rage-quitting to find Yet Another Browser. Thx again.

[CuriousD]

Using the updated code in the post, on 6.2 I have managed to get the tab-bar into the correct position. HOWEVER the horizontal menu has disappeared

If I enable the vivaldi menu button (a preference i dislike but could maybe live with) it moves the top bar below the address bar

Burnt out trying to find a solution. If anyone knows how to fix it let me know

(In the meantime I've switched back to Firefox115, as they've fixed their video efficiency issues and new add-ons have restored the missing features that made me switch to Vivaldi in the first place. Mind boggling the Vivaldi devs are still ignoring the 2nd most requested feature after ~3 years of people requesting it, leaving it up to individual users to fix and breaking it with every second update)

[nomadic]

@ruulrskybound Thanks!

There was an overly generic selector that applied padding even when the Address and Tab bars weren't visible. The fix is now in the first post.

Also saw that some other selectors should probably be more specific to account for incompatible toolbar position settings, but that will come in a future update.

---

@barefootcoder Hope the new way works out for you. I got too annoyed with needing to patch in JS mods after each update to continue using them, so the set it and forget it style of CSS mods with the vivaldi://experiments methods (unless the CSS breaks of course) makes the whole process smoother.

And no worries about radio silence. I have been a bit absent myself. Other projects left me somewhat burnt out, so I have neglected some of my maintenance of mods here on the forum. But luckily had a nice bit of a break, so feeling some more motivation again. Nice comments like yours also help; thanks

---

@CuriousD You are using the CSS from the first post in this thread? What OS are you using? And are you using other CSS mods as well?

I am using Windows 10 with Vivaldi 6.2.3105.58 and see no such issue.

It would probably be best to test it in new profile. It could be caused by some Vivaldi setting, but I wasn't able to replicate what you are seeing with a quick look.

[CuriousD]

@nomadic

Thanks for the reply. I'm using all the same code/windows&vivaldi version. A new profile creates slightly different issues but still doesn't work as you've pictured.

All I really need to fix it is a way to swap the bookmarks bar and the tabs bar. If i have tabs set to the bottom, the top works fine and the bookmarks bar (which I normally switch off) sits exactly where the tabs bar should.

As someone who codes it is infuriating dealing with the way this has been implemented. It should be a simple swap of 2 position variables, but going through 700kb of code to find it is not a reasonable proposition.

If anyone knows how to do that I'd be grateful if they'd let me know

[BloodyElf]

@nomadic said in Tabs Below Address Bar and Bookmark Bar:

--unified: transparent; can be commented out (like so /* --unified: transparent; */) if you don't want the colors of all the top UI elements to be the same color.

Hello. Thank you for your work!
Unfortunately it doesn't work on the latest version 6.4, the color stays the same on all panels at the top.

[nomadic]

@BloodyElf It seems to still work here. Although there is something going on with the extension buttons when that line is commented out. Edit: Fixed now in the original post's CSS.

How does it look for you?

---

With the unified line uncommented:

With the unified line commented out:

[BloodyElf]

@nomadic said in Tabs Below Address Bar and Bookmark Bar:

How does it look for you?

The commented unified line and uncommented versions look the same. Maybe I'm missing something.

This is how it looks without css: