Address Bar at very top
-
@travward and it's done. I saved some time for myself so this code will only work with tabs and address bar on top. Oh and this is for Windows 10. If you're on another OS it may not work as you expected. If so, I'm sorry, but I can't help Also, this code do not include any other modifications I made for myself, so it will not looks like on screenshot above. Anyway it should looks native on Win10.
Let's get started. First, read this guides, they will help you to apply the code:
https://forum.vivaldi.net/topic/10549/modding-vivaldi/
https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/
Here the code:/* Address Bar on Top */ #browser.address-top.tabs-top #titlebar, #browser.address-top.tabs-off #titlebar { z-index: 1; } #browser.address-top.tabs-top .vivaldi, #browser.address-top.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi), #browser.address-top.tabs-off .vivaldi, #browser.address-top.tabs-off #header #titlebar .window-buttongroup button:not(.vivaldi) { height: 34px!important; } #browser.address-top.tabs-top .vivaldi, #browser.address-top.tabs-off .vivaldi { padding: 1px 0; } #browser.address-top.tabs-top #titlebar #pagetitle, #browser.address-top.tabs-off #titlebar #pagetitle { display: none; } #browser.address-top.tabs-top #tabs-container.top { top: 34px; padding-left: 0; padding-right: 0; position: relative; z-index: 1; padding-top: 0; } #browser.address-top.tabs-top #main { margin-top: -30px; } #browser.address-top.tabs-off #main { margin-top: -25px; } #browser.address-top.tabs-top .toolbar-addressbar { padding: 0 140px 30px 34px; } #browser.address-top.tabs-off .toolbar-addressbar { padding: 0 140px 0 34px; } .urlSearch, .dialog-add-bookmark, .extensionaction { z-index: 999999999999999999; }
Ask me if you need help with this again or you didn't understand my bad English
-
@retoree Wow, Thanks! I'll let you know if I have any questions. Thanks you!
-
@retoree That worked! Thank you so much! Out of curiousity, does the custom.css file get blown away on updates? Or only the browser.html?
-
@travward they both will because the entire folder deleted on update.
-
@travward Your whole application gets replaced on update, this includes all changes and all files you add to it. But we have automatic batch scripts for all operating systems. if you use these, you are up and running in no time.
-
@retoree Now... I know you said this only works for tabs on top, but if I want to have an 'F-Key' that toggle tabs visible/non-visible the address bar drops down to where it was originally. What is making this do that? What are the limitations. {BTW, I am kinda green when it comes to coding.}
-
@travward I updated the code in post above, try it.
-
excellent, now that's the solution for those wanting the tab bar below the address bar.
-
@retoree That's awesome. Thankyou!
-
@retoree BTW, the drop-down from the address bar shows up behind the tabs.
-
@travward this is really suspiciously. I don't have this problem. How about extensions pop-up's? I updated the code in post above again.
-
@retoree it's now ok like this for me, address bar drop down, search bar dropdown and extensions popups are all drawn over the tab bar. You're really good at this.
-
@retoree Awesome! That did it.
-
@retoree Thank you! I've been wondering how to put the address bar below the tab bar, and now I can do it! Here's how mine looks so far . . .
Windows 10:
Linux(Elementary OS):
Linux(Elementary OS w/Vivaldi in Native Window mode):
Would there be a way to also place tab stack indicators at the bottom of tabs? How about a way to place the V button and window control buttons on the address bar in Native Window mode? That would be perfect when I'm using Linux!
I really love the way the address bar looks like on the top like with Safari, Brave, Midori/Epiphany, and the old FF. It just seems to make sense as it gives more screen real estate for the tab bar.
Thanks for your contributions!
-
@d0j0p I can't help with Linux. And I don't think you can move address bar to top with Native Window Mode on.
About group indicators, try this:.stacks-on.tabs-top .tab-strip .tab-group-indicator, .maximized.tabs-at-edge #tabs-container.top .tab-group-indicator { top: auto; bottom: -3px; } .tab-position .tab .progress-indicator { bottom: auto; top: 2px; }
-
This looks really good, but I've still got the bookmark bar below the tabs - is there a way to put it above them?
Thank you.
-
@sallyk Just curious, when did the original mod stop working? I never used it for myself, so I'd be interested to find out.
-
Hi @retoree and all-
Newbie here, a little out of my league, trying to change the stacking order of my toolbars. @luetage, who has been very helpful to me, pointed me to this thread when I posed a question at Tabs On Bottom For 1.8. I had only partial success in my 1.12 with some code he/she'd posted there, intervening version changes having rendered it obsolete.
What I would like to see is this stack order:bookmarks bar*
tab bar
address bar
*(later edit): Bookmarks bar ideally docked in the main menu bar, but I'm guessing that might be a whole different mod
Do you think I might achieve this with some adjusted version of the code you posted yesterday? I assume it goes in my custom css. Please forgive my ignorance if the answer is obvious...
Thanks in advance for any tips.
EricVivaldi v1.12 64-bit on Windows 10 64-bit
-
@ehm of course you can. Now I'm off to bed and tomorrow going to leave for a couple of weeks. Don't know if I'll have time before leaving, but I'll see what I can help you.
-
@retoree Thanks, no rush! Bon voyage!