Address Bar at very top



  • @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:
    0_1510988611668_d9649339-42d9-4555-adba-557c30583ccc.png

    Linux(Elementary OS):
    0_1510989345863_Screenshot from 2017-11-18 02.14.21.png

    Linux(Elementary OS w/Vivaldi in Native Window mode):
    0_1510989388915_Screenshot from 2017-11-18 02.14.48.png

    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.
    Eric

    Vivaldi 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!



  • @luetage said in Address Bar at very top:

    @sallyk Just curious, when did the original mod stop working? I never used it for myself, so I'd be interested to find out.

    The original mod, if you mean the one from this thread https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8, doesn't put the address bar on the same line as the Vivaldi and window controls, at least not on Linux, which is what I use. What it does is put the tabs where they belong, at the top of the page they relate to, with the address bar and bookmark bar above them. It still works for me on 1.12.955.48 (Stable channel) (64-bit) - I was a bit surprised to see someone suggest that it doesn't.

    It looks like this:

    0_1511099885005_Screenshot from 2017-11-19 13-56-25.png



  • @ehm this code is a mess, but it should work.

    #browser.address-top.tabs-top #titlebar,
    #browser.address-top.tabs-off #titlebar,
    #tabs-container .newtab,
    #tabs-container .sync-and-trash-container,
    .topmenu button.vivaldi-horizontal-icon,
    #header {
        z-index: 1;
    }
    #browser.address-top.tabs-top .horizontal-menu-pagetitle,
    #browser.address-top.tabs-off .horizontal-menu-pagetitle  {
        display: none;
    }
    #browser #main {
        margin-top: -97px;
    }
    .toolbar-addressbar {
        margin-top: 97px;
        margin-bottom: -27px;
    }
    .bookmark-bar-top .bookmark-bar {
        z-index: 1;
        position: relative;
        top: -68px;
        padding: 3px 0;
        margin: 0 143px 0 300px;
        border-bottom-width: 0;
        background: transparent;
    }
    .bookmark-bar button,
    #browser.color-behind-tabs-on.theme-light .bookmark-bar button {
        display: block;
        background-color: transparent !important;
        border: 1px solid rgba(0, 110, 215, 0);
        color: var(--colorAccentFg);
    }
    .bookmark-bar button:hover {
        border-color: var(--colorHighlightBgDark);
        background-color: var(--colorHighlightBg) !important;
        color: var(--colorAccentFg);
    }
    .win .menu.horizontal > ul > li > a {
        padding: 3px 9px 0;
    }
    #browser.color-behind-tabs-on #main {
        background: transparent;
    }
    #browser.color-behind-tabs-on .toolbar-addressbar {
        background: var(--colorBg);
    }
    #browser.color-behind-tabs-on .bookmark-bar button,
    #browser.theme-light .bookmark-bar button {
        background-color: transparent !important;
        color: var(--colorFg);
    }
    #browser.color-behind-tabs-on .bookmark-bar button:hover,
    #browser.theme-light .bookmark-bar button:hover {
        background-color: var(--colorHighlightBg) !important;
        color: var(--colorHighlightFg);
    }
    


  • @sallyk On 1.13 the old one doesn't work, that's why this thread is so precious :D



  • @retoree said in Address Bar at very top:

    @ehm this code is a mess, but it should work.

    It doesn't for me, address bar is hidden



  • @ian-coog I assume the address bar, bookmarks bar and tabs are on top or this will not work. And you do not have any other modifications. I told you that this code is a mess. Also I'm on 1.13.

    p.s.: and you use horizontal main menu.



  • @retoree said in Address Bar at very top:

    @ian-coog I assume the address bar, bookmarks bar and tabs are on top or

    Yes, they are, infact I just tried to replace your css posted 2 days ago in this thread with the new one you posted now. The former works nicely, this one doesn't. Not that I need them anyway, I just try all css mods to see if they may fit my liking.

    this will not work. And you do not have any other modifications.

    Ah well, I have some more active mods of course. I can try disabling them all. I've made a script to easily apply mods - well at least easier than editing manually custom.css everytime - see my signature for it.

    Also I'm on 1.13.

    same here, 1.13.1008.21

    p.s.: and you use horizontal main menu.

    no, I leave the V button menu only

    Here some screenshots, first 2 are using your original mod, 3rd is the last one result for me
    https://imgur.com/a/TA5gD



  • @retoree Woohoo, works great! Thanks a million! Here's the entirety of my custom css, in case it sheds light on @iAN-CooG's results:

    .iconmenu-container.addressfield {
    	order: 1;
    	}
    .toolalt {
    	order: 2;
    	display: flex;
    	position: relative;
    }
    .searchfield {
    	order: 3;
    	flex-basis: 300px !important;/* you took this code from a Vivaldi forum post and adjusted the pixel width; don't know what "important" refers to */
    }
    .extensions-wrapper {
    	order: 4;
    }
    
    /*BEGIN CODE FROM RETOREE (https://forum.vivaldi.net/topic/22304/address-bar-at-very-top/29?page=2 */
    #browser.address-top.tabs-top #titlebar,
    #browser.address-top.tabs-off #titlebar,
    #tabs-container .newtab,
    #tabs-container .sync-and-trash-container,
    .topmenu button.vivaldi-horizontal-icon,
    #header {
        z-index: 1;
    }
    #browser.address-top.tabs-top .horizontal-menu-pagetitle,
    #browser.address-top.tabs-off .horizontal-menu-pagetitle  {
        display: none;
    }
    #browser #main {
        margin-top: -97px;
    }
    .toolbar-addressbar {
        margin-top: 97px;
        margin-bottom: -27px;
    }
    .bookmark-bar-top .bookmark-bar {
        z-index: 1;
        position: relative;
        top: -68px;
        padding: 3px 0;
        margin: 0 143px 0 300px;
        border-bottom-width: 0;
        background: transparent;
    }
    .bookmark-bar button,
    #browser.color-behind-tabs-on.theme-light .bookmark-bar button {
        display: block;
        background-color: transparent !important;
        border: 1px solid rgba(0, 110, 215, 0);
        color: var(--colorAccentFg);
    }
    .bookmark-bar button:hover {
        border-color: var(--colorHighlightBgDark);
        background-color: var(--colorHighlightBg) !important;
        color: var(--colorAccentFg);
    }
    .win .menu.horizontal > ul > li > a {
        padding: 3px 9px 0;
    }
    #browser.color-behind-tabs-on #main {
        background: transparent;
    }
    #browser.color-behind-tabs-on .toolbar-addressbar {
        background: var(--colorBg);
    }
    #browser.color-behind-tabs-on .bookmark-bar button,
    #browser.theme-light .bookmark-bar button {
        background-color: transparent !important;
        color: var(--colorFg);
    }
    #browser.color-behind-tabs-on .bookmark-bar button:hover,
    #browser.theme-light .bookmark-bar button:hover {
        background-color: var(--colorHighlightBg) !important;
        color: var(--colorHighlightFg);
    }
    /* END CODE FROM RETOREE */
    

    yields this layout:
    0_1511115041623_Vivaldi_toolbars_mod_Retoree.png
    Eric Vivaldi v1.12 64-bit on Windows 10 64-bit



  • Here's another way to achieve the desired results that wont break other tab views and doesn't neglect the horizontal menu.

    First, @luetage's method found here is a much cleaner way to move the top tab bar down.

    So all that's left to do then is to merge the Vmenu, horizontal menu, toolbar and window control buttons with the address bar

    /* Remove header */
    #header {
        min-height: 0;
        z-index: auto;
    }
    
    /* Keep Vivaldi menu button + Window buttons */
    .vivaldi,
    .window-buttongroup {
        z-index: 999;
    }
    
    /* Vivaldi menu button position */
    .vivaldi {
        position: relative !important;
        top: 7px !important;
    }
    
    /* Keep horizontal menu */
    .topmenu {
        position: absolute;
    }
    
    /* Horizontal menu position */
    .topmenu>nav {
        left: -28px;
        top: 4px;
    }
    
    /* Positioning and sizing of Address and Bookmarks bars */
    .horizontal-menu .toolbar.toolbar-addressbar {
        padding: 0 150px 0 269px !important;
    }
    
    .toolbar.toolbar-addressbar {
        padding: 0 150px 0 50px !important;
        height: 36px;
    }
    
    .bookmark-bar {
        margin-bottom: 0;
    }
    

    0_1511301419255_2017-11-21_528.png

    Keep in mind that I'm using some custom buttons so the sizing might not match yours (they also differ with the os) so you can fool around with some of the padding and positioning to get it the way you want (the horizontal menu padding however should be the same).

    This method should keep everything else working as expected. For now....



  • @sjudenim said in Address Bar at very top:

    @luetage's method found here is a much cleaner way to move the top tab bar down.

    It might have been cleaner, but it doesn't work on 1.13. Haven't really looked into it though. Beats me what has changed. To make matters worse simulating browser restarts/reloading the app is pretty much broken on 1.13, that's why I got annoyed by it quickly.



  • @luetage

    Your method is still working fine for me in the snapshot as well as the current stable

    @sallyK 's problem, as I was understanding it, wasn't that the tab bar was no longer below the address bar but that the header was top most. Your code alone doesn't address that but the code I gave merges the tool, address and title bars.



  • @sjudenim Oh damn, I'm irresponsibly lame :/
    Yeah, it still works, I just hadn't realised that I turned thumbs off since then. Only had to change the code to #tabs-container.no-thumbs.bottom.... sigh -- thanks!



  • @sjudenim said in Address Bar at very top:

    @sallyK 's problem, as I was understanding it, wasn't that the tab bar was no longer below the address bar but that the header was top most. Your code alone doesn't address that but the code I gave merges the tool, address and title bars.

    @EHM told me in other thread that it didn't work for them, that's why I tested it again, and when it failed I thought it just stopped working for some reason. But I couldn't figure it out until now.

    And regarding your code, now I could test it ^^
    On osx an additional !important is needed it seems.
    #header { min-height: 0 !important; z-index: auto; }
    And probably a few other height and padding adjustments. The address-bar should also be made draggable probably. If anyone is interested in a mac version just tell me.



  • @sjudenim said in Address Bar at very top:

    I don't think the solution offered in this thread is a clean way to achieve the desired results as it breaks other tab views and neglects the horizontal menu.

    @luetage's method found here is a much cleaner way to move the top tab bar down.

    So all that's left to do then is to merge the Vmenu, horizontal menu, toolbar and window control buttons with the address bar

    /* Remove header */
    #header {
        min-height: 0;
        z-index: auto;
    }
    
    /* Keep Vivaldi menu button + Window control buttons */
    .vivaldi,
    .window-buttongroup {
        z-index: 1;
    }
    
    /* Vivaldi menu button size and position */
    .vivaldi {
        position: relative !important;
        top: 8px !important;
    }
    
    /* Keep horizontal menu */
    .topmenu {
        position: absolute;
    }
    
    /* Horizontal menu position */
    .topmenu > nav {
        left: -28px;
        top: 4px;
    }
    
    /* Positioning and sizing of the Address bar and fields */
    .horizontal-menu .toolbar.toolbar-addressbar {
        padding: 0 150px 0 269px !important;
    }
    
    .toolbar.toolbar-addressbar {
        padding: 0 150px 0 60px !important;
        height: 36px;
    }
    
    .addressfield {
        margin-left: 5px !important;
    }
    

    0_1511301419255_2017-11-21_528.png

    Keep in mind that I'm using some custom buttons so the sizing might not match yours (they also differ with the os) so you can fool around with some of the padding and positioning to get it the way you want (the horizontal menu padding however should be the same).

    This method should keep everything else working as expected. For now....

    could you give me the easiest simplest guide on how to apply this and can you get rid of the background entirely just make it 100% transparent? so that the text is floating by floating i mean ontop of the solid color of the browser just like the title bar, i want to make the titlebar the adressbar.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.