tabs below address bar and overlay menus
-
This post is deleted! -
Dear luetage and nomadic,
thank you so much for your fantastic scripts.
I was searching for this features for a very long time.
My tabs are now where they should be: below the address bar.
Hurrah. You made me happy.Maxim Waldow
-
Never understood why this crucial feature of Firefox was ignored by Egde, Brave, Opera e.a.
It makes absolutely no sense to put the tabs bar on another place like bottom, above, left or right.
It's so weird that the developers offered all options circling around except the only feasable one.
This should be genuinely integrated in Vivaldi. -
-
@maximwaldow said in tabs below address bar and overlay menus:
It makes absolutely no sense
to you maybe, many prefer it this way, but I agree on making it an option would be preferable.
-
Vivaldi 3.3 ignores the code, now what?
-
This post is deleted! -
@TommyTulpe Some selectors have changed, try
.UrlBar
instead of.toolbar-addressbar
. -
@luetage said in tabs below address bar and overlay menus:
@TommyTulpe Some selectors have changed, try
.UrlBar
instead of.toolbar-addressbar
.Awesome !! This IS the solution !!
I only change this selector in the custom.css I have, and all look like before.
It is now :/* Tabs Below Address Bar for 3.3 */ /* Please remember that you still need to set * tab position to bottom in Vivaldi settings * for this mod to work at all. */ #tabs-container.bottom { order: -1; border-top: none; padding-top: var(--padding); padding-bottom: 0px !important; } .address-top .UrlBar:after { background-color: transparent !important; } /* Bookmarks bar above tabs */ .bookmark-bar { order: -2; } .toolbar.UrlBar { order: -3; } /* 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; } /* NewTab button hide */ .newtab { display: none; }
Thank you
-
Made the mistake of upgrading Vivaldi to the newest version (3.3.2022.45) and it broke my tab position, which has been working fine for a year or more. Hopefully this is enough info for one of the incredibly helpful folks on this thread to figure out what I'm doing wrong.
[zadash:~/proj/VCtools] cat /opt/vivaldi/resources/vivaldi/style/custom.css /* https://forum.vivaldi.net/topic/15834 */ /* ... later ... */ /* https://forum.vivaldi.net/topic/42105 */ #tabs-container.bottom { order: -1; border-top: none; padding-top: 5px; padding-bottom: 0px !important; } /* bookmarks bar above tabs */ .bookmark-bar { order: -2; } .toolbar.toolbar-addressbar { order: -3; } /* NewTab button hide */ .newtab { display: none; } /* 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; }; /* 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; } .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); }
(Side note: for those who seem mystified as to why some of us don't just automatically upgrade Vivaldi all the time, the hours I've spent fiddling around with this is probably the biggest reason. )
-
@barefootcoder Some selectors changed, that’s the reason it stopped working. Looking up selectors is relatively easy: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools. Just read the latest posts in this very topic for an example…
-
@barefootcoder Read the discussion above your post.
Edit: uh, oh, I’m too slowwww
Just read the latest posts in this very topic for an example…
-
@luetage said in tabs below address bar and overlay menus:
@barefootcoder Some selectors changed, that’s the reason it stopped working. Looking up selectors is relatively easy: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools. Just read the latest posts in this very topic for an example…
@potmeklecbohdan said in tabs below address bar and overlay menus:
@barefootcoder Read the discussion above your post.
Honestly, guys, I did read the thread before posting. I applied all the changes that I found in @nomadic's various posts, and also enabled the experimental thing (which I've never had to do before to make it work, but I figured I should follow the directions here anyway). I was hoping the stuff I posted would have made that clear. I still can't see any differences in what I currently have (which is up above) vs what nomadic (and even GruntZ) has in their posts. If anyone here can see any diffs, please let me know.
AFA the thread on inspecting Vivaldi's UI, I confess I'm not smart enough to see how to apply that knowledge to this problem. But I'm happy to learn more if anyone wants to show me how.
-
@barefootcoder As @luetage and @potmeklecbohdan said, there was a change in the CSS selectors. The 2 posts above yours in this thread talk about the solution.
From the CSS I posted earlier in the thread, there is only one change that needs to be made (unless I missed something)
Old New .toolbar.toolbar-addressbar { order: -3; }
.toolbar.UrlBar { order: -3; }
Doing a find for
.toolbar-addressbar
and then replace each with.UrlBar
should work.
I also got rid of some padding that seems no longer necessary.
Here is the new CSS:
Expand to see
#tabs-container.bottom { order: -1; border-top: none; padding-bottom: 0px !important; } /* bookmarks bar above tabs */ .bookmark-bar { order: -2; } .toolbar.UrlBar { order: -3; } /* 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; } /* Fix Fillets */ .tabs-bottom .tab.active:not(.marked):not(.tab-mini):before { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%); } .tabs-bottom .tab.active:not(.marked):not(.tab-mini):after { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%); } /* tab group indicators*/ .tabs-bottom .tab-strip .tab-group-indicator { bottom: 28px !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; } .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); }
-
@nomadic said in tabs below address bar and overlay menus:
@barefootcoder As @luetage and @potmeklecbohdan said, there was a change in the CSS selectors. The 2 posts above yours in this thread talk about the solution.
From the CSS I posted earlier in the thread, there is only one change that needs to be made (unless I missed something)
Old New .toolbar.toolbar-addressbar { order: -3; }
.toolbar.UrlBar { order: -3; }
Ah, good eye ... I swear I had changed that, but I guess I missed it, or copy-pasted something on top of it or something. Thx for helping me find it! That totally fixes the problem.
-
@nomadic thanks working perfectly, i havent use vivaldi in a while and the latest version 3.3 broke with previous code, its a pain that both firefox and vivaldi the need to edit the css to have tab below the address bar
-
Vivaldi 3.6 ignores the code again, now what? Thanks!
-
@TommyTulpe It looks like
#tabs-container
has changed to#tabs-tabbar-container
.There also is a new bit of CSS for the fillet that needs to be overridden:
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after { transform: unset; }
-
I don't understand what to do with the 2nd part of your post ?
Trying to get tabs below address bar.
Thanks for your reply, -