Tabs Below Address Bar and Bookmark Bar

[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:

[nomadic]

@BloodyElf Maybe the comment isn't working. Try deleting this line:

--unified: transparent;

[BloodyElf]

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

Maybe the comment isn't working. Try deleting this line:

Yes that's it. But I don't understand why.
Thank you. Sorry to bother you.

[nomadic]

@BloodyElf No worries.

A commented out line begins with a /* and ends with a */. Your keyboard could be inputting different characters or there could be some encoding issue caused by a text editor. Who knows, sometimes computers just decide they want to misbehave...

[adacom]

have had this feature for a long time using old CSS - whilst it still works in the new snapshots and the taskbar buttons [left - right - refresh] show as expected they do not work

it may well be other mods i have or it may be poor/old code i am using

does this work for other users and if so would they share their working CSS code

thanks

[55trucker]

@nomadic

I've just started using Vivaldi as a needed web browser that has a built in language translator. My mainstream browser does not have one at all.
I want to customize the browser to make it somewhat more visibly recognizable with respect to my other browser.
Part of that was making use of the stylesheet script you wrote to move the tab bar below the address bar. This works very well & thx very much for this. One thing that I want to KEEP (which is not there) are the 2 horizontal dividers that run the length of the monitor screen... 1 between the top menu bar & navigation bar..& the 2nd divider between the navigation bar & the tab bar.
If you don't object what is the script entry that would be added to your present stylesheet script to introduce those 2 horizontal dividers?

thx very much

[nomadic]

@55trucker Think it should be these 2 parts:

• The section proceeded by the comment "Remove line under address bar and extensions bar"
• The .bookmark-bar section with the border-color assignment

Can't double check for awhile, so hopefully that does it.