Tabs Below Address Bar and Bookmark Bar

[GruntZ]

@nomadic - Thanks for your work.

In Vivaldi v3.8, I used the CSS modification shown in this thread:
https://forum.vivaldi.net/topic/56002/the-two-level-tab-stacks-break-the-tabs-below-address-bar-hack/3
And the result was in line with my expectations:

From top to bottom, I have:

• the menu bar,
• the address bar,
• the favorites bar,
• the tab bar,
• and finally the navigation window.

On a fresh installation of Vivaldi V4.0, I placed two files named "custom.css" and "custom.js" in the /opt/vivaldi/resources/vivaldi/style/custom directory, created for it like in V3.8, and I have enabled the configuration to be supported.
The result is the following:

The tab bar is just below the menu, not just above the navigation zone.

• Is this how to place and name these two files (.js and .css)?
• The content of the two files is below, is it correct?
• What must be changed to find the order I had in V3.8?

Thank you in advance for your help

Content of /opt/vivaldi/resources/vivaldi/style/custom/custom.js :

// ============================================================================================================
// Tabs Below Address Bar and Bookmark Bar (JS Version)
// URL:         https://forum.vivaldi.net/topic/56809/tabs-below-address-bar-and-bookmark-bar
// Description: Moves the tab bar under the other UI elements at the top of the screen
// Author(s):   @nomadic
// CopyRight:   No Copyright Reserved
// Tested on:   Snapshot 3.9.2289.3
// ============================================================================================================
(function () {
  function moveTabBarBelowTopUI() {
    function moveTabBar() {
      const tabBar = document.getElementById("tabs-tabbar-container");
      const urlBar = document.querySelector(".UrlBar");
      const bookmarkBar = document.querySelector(".bookmark-bar");

      const insertAfter = bookmarkBar ? bookmarkBar : urlBar;

      if (tabBar && insertAfter) {
        tabBar.remove();
        insertAfter.insertAdjacentElement("afterend", tabBar);
      }
    }

    moveTabBar();
  }

  let intervalID = setInterval(() => {
    const browser = document.getElementById("browser");
    if (browser) {
      clearInterval(intervalID);
      moveTabBarBelowTopUI();
    }
  }, 300);
})();

Content of /opt/vivaldi/resources/vivaldi/style/custom/custom.css :

/* Tabs Below Address Bar for 4.0 */

/* Remove unnecessary gap at top of tabs */
#tabs-tabbar-container {
  padding-top: unset !important;
}

/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
  content: unset;
}

/* Remove line between bookmark bar and tabs */
.bookmark-bar {
  border-bottom-width: 0px !important;
}

/* Make bookmark bar blend in */
.bookmark-bar {
  background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
  background-color: var(--colorAccentBg);
}
.color-behind-tabs-on .bookmark-bar {
  background-color: var(--colorBg);
}
.color-behind-tabs-on .bookmark-bar button {
  background-color: var(--colorBg);
}

/* Fix opaque tabbar */
#browser:not(.transparent-tabbar) #tabs-tabbar-container {
  background-color: var(--colorBgDark);
}

/* Fix header content positioning */
.vivaldi,
#header #titlebar .window-buttongroup button:not(.vivaldi) {
  height: 25px !important;
}



/* Tabs corner rounding */
.tabs-bottom .tab-position .tab {
	border-top-left-radius: var(--radiusHalf);
	border-top-right-radius: var(--radiusHalf);
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
	bottom: 28px !important;
}

/* Personal hacks */
/* NewTab button hide */
.newtab {
	display: none;
}

[nomadic]

@gruntz I just saw this CSS only mod by @dude99 earlier today. Haven't tried it, but it might do what you want.

As for JavaScript(js) mods, they take a little more work to get running. I recommend checking out this pinned post from the modding forum to see how to install different types of mods.

[Rayzon]

@nomadic
Thank you for this Mod.
Unfortunately, I now miss the new tab button?

[GruntZ]

@nomadic - Thank you for being so responsive
I am going to test the other hack you pointed to me, and try to progress on these aspects of visual adaptation of Vivaldi's interface.
Have a nice day

[GruntZ]

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

@gruntz I just saw this CSS only mod by @dude99 earlier today. Haven't tried it, but it might do what you want.

Thanks for the suggestion, but despite several tries, I couldn't find a way to get the expected result, too bad.

As for JavaScript(js) mods, they take a little more work to get running. I recommend checking out this pinned post from the modding forum to see how to install different types of mods.

I found the error I was making, which prevented the use of my "custom.js".
So I modified the "browser.html" by explaining the call to this file; and everything now works exactly as in V3.8.
The problem will be, as before the experimental "custom.css" support function, that each update of Vivaldi will overwrite my modification.
My /opt/vivaldi/resources/vivaldi/browser.html file looks like this:

<!DOCTYPE html>
<html>
  <head>
    <!-- Keep the styling in sync with ./window.html -->
    <meta charset="UTF-8" />
    <title>Vivaldi</title>
    <link rel="stylesheet" href="style/common.css" />
    <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
    <style>
      body {
        background-color: #d2d2d2;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;
      }
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #2d2d2d;
        }
      }
    </style>
  </head>
  <body>
    <div id="app" />
    <script src="background-common-bundle.js"></script>
    <script src="vendor-bundle.js"></script>
    <script src="settings-bundle.js"></script>
    <script src="urlbar-bundle.js"></script>
    <script src="components-bundle.js"></script>
    <script src="bundle.js"></script>
    <!-- Add custom scripts -->
    <script src="style/custom/custom.js"></script>
    <!-- end -->
  </body>
</html>

Many thanks again for your help

[TreaKu]

I have the same issue.

[dude99]

My pure CSS mod have been updated,

• add support for menu bar & bookmark bar (on top position).

• plus slightly improved instructions,

hope this will be useful to u guys.

[nomadic]

@dude99 said in Top Addressbar above Top Tabbar CSS mod:

Don't worry, my code are quite clean & easy to understand by CSS guru. They can fork it in the future if needed. I have wasted too much time on this useless mod (to me anyway), better invest in something I actually will use in the future... LOL

If you don't feel like supporting your new CSS version, I could fork it here and maintain it.

I don't use this mod either, but I do at least use horizontal tabs (at least until I get an ultrawide monitor), so it is slightly more relevant to me. Up to you.

• add support for bookmark bar, I won't do unify color for this toolbar cuz it look kinda weird to me. but feel free to fix it if you insist...

I would probably add this, since I think it looks better.

[dude99]

@nomadic Great! Thanks for adopting my CSS mod. Now I can rest in peace... LOL

[SallyK]

@nomadic Thank you very much for adopting this mod - it really has made using Vivaldi so much easier again. It would be nice if you could match the colours across the bookmark bar as well, but it's minor thing.

There's one other problem I have, and I don't know if it's just me, or if there's some setting I can change, but my Show Closed Tabs and Synced Tabs are stuck a couple of cms in from the right, because it's still leaving room for the window controls. Is there anything that can be done to put them over to the edge of the window?

If not, please don't worry, as it is, it's so much more usable than it was before.

[FergyA]

@nomadic dude99 sent me here with this issue I'm having with his CSS mod since you've taken it over. Any ideas how to go about fixing this?

I'm having an issue that pop downs from extensions kept in the address bar aren't clickable in the region of the toolbars with this mod. I have a couple of extensions which have buttons in this area which aren't clickable, which makes the extension unusable. (For example adding an account to bitwarden, the add account button is completely inaccessible).

[Bob1933]

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

@nomadic dude99 sent me here with this issue I'm having with his CSS mod since you've taken it over. Any ideas how to go about fixing this?

I'm having an issue that pop downs from extensions kept in the address bar aren't clickable in the region of the toolbars with this mod. I have a couple of extensions which have buttons in this area which aren't clickable, which makes the extension unusable. (For example adding an account to bitwarden, the add account button is completely inaccessible).

I have the same problem as well.
In the feedbro reader and also other addons.
The first two lines from the menu can not be selected.

[eLeSands]

Managed to get the tabs on top using pure css!

/* Top Tabs with Horizontal Menu */
/* Header */
#browser.tabs-top #header {
    height: 0 !important;
    /* Unset Contain so the tabbar is visible */
    contain: unset !important;
}

/* Main */
#browser.tabs-top #main {
    /* Unset z-index so the tabbar is below dropdowns */
    z-index: unset !important;
}


/* Inner Container */
#browser.tabs-top .inner {
    /* [margintop] = [height(tabs-tabbar-container)] */
    /* default height tabs-tabbar-container: 30px */
    margin-top: 30px !important;
    border-top: 1px solid var(--colorBorder) !important;
}

#browser.tabs-top .fullscreen .inner {
    margin-top: unset !important;
}

#browser.tabs-top .minimal-ui .inner {
    margin-top: unset !important;
}

/* Tabbar Container */
#tabs-tabbar-container.top {
    /* [top] = ([height(UrlBar)] + [height(bookmark-bar)]) -1 */
    /* default height UrlBar: 34px */
    /* default height bookmark-bar: 28px */
    top: 61px !important;
    /* Sets tabs to fill entire bar */
    margin-right: -62px !important;
    /* Necessary for everything on the tabbar to be visible/accessable */
    z-index: 1 !important;
}

/* No Sync/Trash */
.top .sync-and-trash-container {
    display: none !important;
}

/* No New Tab */
.top .newtab {
    display: none !important;
}

Tabs go all the way to the edge of the screen (i just kept changing the margin until it worked, same with the height)

This is on the latest stable, so I have no idea if a different version will bork it :?

[xenobi354]

Hello, Vivaldi 5.0 has added a new download button. After clicking on it, the window is not displayed, can it be fixed somehow? I'm using "Top Addressbar above Top Tabbar CSS mod" by Dude99

[drkh]

@elesands

Thank you very much for your mod. I'm uing it on Vivaldi v5.0.2497.35 and v4.3.2439.65. It's quite enjoyable to be able to see the drop-downs from the tab bar. That remedies dude99's mod.

But there is a problem with your code... When (1) "Vivaldi button" is selected instead of horizontal menu and (2) bookmark bar is used, the menu bar still exists and the tab bar is moved up, covering the bookmark bar.

Would you please fix this?

BTW, I notice that if your mod is used, in the settings of the activated theme, "Blur" has to be disabled for the tab bar to be responsive at mouse clicking (showing right click menu, switching tab, etc).

Thank you again.

[CuriousD]

Okay, after a bunch of messing around I managed to get the tabs working on the latest snapshot 2553.3
(January 18, 2022) ala traditional firefox, based on elesands' code. Here's a complete step by step guide:

1. Go to “vivaldi://experiments/”. Enable “Allow for using CSS modifications”

2. Open your Vivaldi folder and create a new folder called 'CustomUI' or whatever you prefer. This is where the css file goes.

3. Open settings, go to “Appearance” and scroll down until you reach “Custom UI Modifications”
   Click on “Select Folder” and select the folder you created at step 2

4. Copy the text posted by elesands' (6 Aug 2021, 07:29 post) and save it as a file in the folder from step 2. It does not matter what you call the file as long as the extension is .css

*Note: On my setup I am using Settings>Apperance>Menu>MenuPosition->Horizontal, so to get the correct tab bar position I changed Line37 from "top: 61px !important;" to "top: 30px !important;"

5. Restart Vivaldi

[drkh]

Hi,

I use the Bookmark bar and I want the Tab bar to be placed below the Bookmark bar. The CSS codes provided above by eLeSands can do that. So I use those codes.

(Dude99's codes are not used because the drop-downs from the tab bar can not show.)

When eLeSands' codes are in use, the Menu bar will be there. (That is probably intended as the title of the codes indicates.) Also, there is a delimiting line between the Address bar and the Bookmark bar. See this:

However, there are issues with those two things.

(1)

When the "Vivaldi button" is selectd in Appearance of Settings, instead of the horizontal menu, the Menu bar still exists, containing the V button and all the window controls. And, the Tab bar moves up, covering the bookmark bar. See this picture:

Can that problem be solved?

(2)

Can the demiliting line between the Address bar and the Bookmark bar be removed?

Thank you in advance.

[eLeSands]

Update to (hopefully) make the code compatible with various styles, themes, and settings.

/* Top Tabs Under Address/Bookmarks Bar */
:root{
    /* Default Height of Bookmark Bar and Tab Bar */
    --heightB: 30px;
    /* Default Height of Address Bar */
    --heightU: 34px;
    /* Sum is 64px */
    --heightC: calc(var(--heightU) + var(--heightB));
}

/* Header */
/* The default height of the Header is ~22px */
/* This is dependent on the Top Menu height */
/* The Header consists of the Titlebar, Menu Bar/Button, And Tab Bar */
#browser.tabs-top #header {
    /* Unset Contain so that the Tab Bar can be moved */
    contain: unset !important;
}

/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu #header {
    /* Setting height to 0 removes the space that the Tab Bar would normally occupy */
    height: 0 !important;
}

/* Vivaldi Menu Only */
#browser.tabs-top:not(.horizontal-menu) #header {
    /* Removes the space that the Tab Bar would normally occupy */
    margin-top: calc(0px - var(--heightB)) !important;
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Titlebar */
/* The Titlebar consists of the Vivaldi Menu and the Windows Buttons */
#browser.tabs-top:not(.horizontal-menu) #header #titlebar {
    /* Sets top to 64px */
    top: var(--heightC) !important;
    /* z-index needs to be at least 2 for the menu to display */
    z-index: 2 !important;
}

/* Without Address Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.address-top) #header #titlebar,
/* Without Bookmarks Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.bookmark-bar-top) #header #titlebar {
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Without Address Bar or Bookmarks Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.bookmark-bar-top):not(.address-top) #header #titlebar {
    /* Unsets top */
    top: unset !important;
}

/* Vivaldi Button */
#browser.tabs-top.bookmark-bar-top:not(.horizontal-menu) #header #titlebar button.vivaldi {
    /* Sets height to 30px */
    height: var(--heightB) !important;
}

/* Top Menu */
/* The default height of the Top Menu is ~21.59px */
/* This is dependent on Font Family, Size, and Line Height */
/* The Top Manu Contains the Menu Bar/Button */
#browser.tabs-top #header .topmenu {
    /* Sets height to the nearest whole number; 22px */
    height: 22px !important;
    /* Removes the 1px Margin Bottom to simplify Tab Bar Top Calculation */
    margin-bottom: unset !important;
}

/* Main */
/* Main consists of the Address Bar, Bookmarks Bar, and Inner Container */
#browser.tabs-top #main {
    /* Unset z-index so that the tabbar is below dropdowns */
    z-index: unset !important;
}

/* Address Bar */
/* The Address Bar Default Height is 34px */
#browser.tabs-top .toolbar-mainbar {
    /* Sets height to 34px */
    height: var(--heightU) !important;
}

/* Bookmarks Bar */
/* The Bookmarks Bar Default Height is 29px with a 1px bottom border */
#browser.tabs-top .bookmark-bar {
    /* Sets height to 30px */
    height: var(--heightB) !important;
}

/* Tab Bar */
/* The Tab Bar's default height is 30px */
/* Tabbar Container */
/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu #tabs-tabbar-container,
/* Vivaldi Menu Only */
#browser.tabs-top.bookmark-bar-top:not(.horizontal-menu) #tabs-tabbar-container,
/* Vivaldi Menu Only */
#browser.tabs-top.address-top:not(.horizontal-menu) #tabs-tabbar-container {
    /* Sets height to 30px */
    height: var(--heightB) !important;
    /* Makes sure that the padding remains consistant */
    padding-top: unset !important;
    /* Necessary for everything on the tabbar to be visible/accessable */
    z-index: 1 !important;
}

/* Address Bar and Bookmarks Bar Top */
#browser.tabs-top.address-top.bookmark-bar-top #tabs-tabbar-container {
    /* Sets top to 64px */
    top: var(--heightC) !important;
}

/* Only Address Bar Top */
#browser.tabs-top.address-top:not(.bookmark-bar-top) #tabs-tabbar-container {
    /* Sets top to 34px */
    top: var(--heightU) !important;
}

/* Only Bookmarks Bar Top */
#browser.tabs-top.bookmark-bar-top:not(.address-top) #tabs-tabbar-container {
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Inner Container */
/* The Inner Container consists of the Panels and the Web-View Continer */
#browser.tabs-top .inner {
    /* [margintop] = [height(tabs-tabbar-container)] */
    /* default height tabs-tabbar-container: 30px */
    margin-top: var(--heightB) !important;
}

/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu .inner {
    /* Places 1px border below tabs */
    border-top: 1px solid transparent !important;
}

Here's a screenshot of menu-button tabs with my usual mods:

And here it is with only toptabs.css:

[xenobi354]

Thanks!! now everything works with the latest version

[drkh]

@elesands

This is marvelous! At long last, now we can only use CSS to put the Tab bar below the Bookmark bar for new Vivaldi versions. Worth millions of thumb-ups. Thank you so much.

My UI modified with your new codes looks like this:

One thing, though. What if we want the menu button and those window control buttons to appear on the two ends of the Address bar? Is that achievable?

By the way, is there any difference in terms of UI between the two pictures you post?