Tabs On Bottom For 1.8



  • On the very first versions, some folks came up with some custom.css tweaks to make the the tab bar appear under the addressbar.
    Is there anything I can do to get this functionality in the latest version of Vivaldi?



  • People are requesting this more and more. I think it should get an extra setting in official Vivaldi. I don't know about the first versions, I would be interested to see other solutions. Anyway, I put some code together for this some time ago, really not sure if it's the best way to go about it, but it's working.

    body {
    	display: flex;
    	flex-flow: column;
    }
    
    #tabs-container.view-thumbs.bottom {
    	order: -1;
    }
    
    .toolbar.toolbar-addressbar.search {
    	order: -2;
    }
    

    Be aware that you need to set the tab bar position to bottom in vivaldi://settings/tabs/ for this to work, because it makes the tab bar a part of the body.

    image



  • Thank you for your effort in helping get the tabs back where they belong. I'm probably doing something wrong, but I can't get this to work in 1.9.

    I get the active tab descending from the top of the tab bar, but it's still above the address bar, rather than below it.

    0_1493850075077_2fb8c8c6-8778-4a8f-a076-44bf00f9be46.png

    I haven't made any other customisations, other than things you can do through the settings panel.

    I'd love to know whether it's possible to fix it.



  • I mean I get what your problem is, it doesn't work. But I'm not sure what went wrong. What means "I haven't made under other customisations"? It sure is possible to fix, the code still works for me on 1.10 (I just tested it), and it used to work on 1.8 and 1.9 too.

    You clearly have the code enabled, or the upside down tabs wouldn't be on top of the browser. Maybe try and play around with the order by inputting different numbers? Tell me how it goes, we should be able to work this out.

    edit: One thing I just noticed is that popup thumbnails should be disabled in tab settings. They can cause problems with this mod unfortunately. If you have them enabled, disable them and then restart browser without any modifications, then enable modifications again. Unlikely that this is your issue though, I just stumbled upon it while messing around.



  • Since people are interested in this I made an improvement by removing the space from the bottom of tabs, which isn't needed when they are on top. Looks cleaner now. Adjust as needed, you can also add spacing to the top. It also turned out that the initial code was overcomplicated, since Vivaldi is already in flex. Please use the new code.

    #tabs-container.view-thumbs.bottom {
    	order: -1;
    	padding-bottom: 0px;
    }
    
    .toolbar.toolbar-addressbar.search {
    	order: -2;
    }
    

    alt text



  • Ok, final version. I noticed the tab group indicators for stacked tabs are at the bottom and overlap with the panel/site content, so I brought them up top and gave them just enough space.

    /* tabs below address bar */
    
    #tabs-container.view-thumbs.bottom {
    	order: -1;
    	padding-top: 4px;
    	padding-bottom: 0px;
    }
    
    .toolbar.toolbar-addressbar {
    	order: -2;
    }
    
    .stacks-on.tabs-bottom .tab-strip .tab-group-indicator {
    	bottom: 28px;
    }
    


  • Thank you so much for trying to help out, your changes definitely tidied up the look of the bar.

    I kept tweaking everything, and suddenly I had an inspiration - I don't use the separate search box. So I removed the reference to it, and suddenly my tabs are where they should be. :grinning: If you are not using the search bar, the line needs to be:

    .toolbar.toolbar-addressbar {
    order: -2;
    }

    Thank you very much for getting back to me.



  • Good find. I always have search enabled so I didn't notice. Glad that it worked out for you!



  • Bookmarks bar on top as requested by @michaa7 in the wrong thread.

    .bookmark-bar {
    	order: -2;
    }
    
    #tabs-container.view-thumbs.bottom {
    	order: -1;
    	padding-top: 4px;
    	padding-bottom: 0px;
    }
    
    .stacks-on.tabs-bottom .tab-strip .tab-group-indicator {
    	bottom: 28px;
    }
    


  • First: Thank you.
    Second: I put the whole above code at the end of my (huge) custom.css file. It didn't give me the desired order (bookmark-bar, tabs-bar, address-bar) but a slightly different one: tabs-bar, bookmark-bar, adress-bar.

    I'll fiddle around a bit, maybe I find it myself, but I still would appreciate help.



  • @michaa7 The answer is in the thread. You have to visit settings://tabs and select tab position "bottom".



  • @luetage
    Thanks again, this works.
    I now have the right order, but one bar too much: I now have a title bar, which I don't want. Is there a way to get rid of it (and moving the Vivaldi icon and the mini-/maximise and close buttons somewhere else)?



  • I can't help you, on osx there isn't even a vivaldi icon.


Log in to reply
 

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