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.



  • Hello! Thank you for your answer, comrade luetage! Just one more question, and my apoligies if this is a dunb question, but where i have to put that code?
    Thank you.



  • @barreto
    You have to edit browser.html and add a file with name custom.css.
    More info > https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

    Cheers, mib



  • Hi again @luetage, (my personal tutor?), I found this thread while looking for a way to re-order the toolbar stack. What I would like to see is this stack order:

    bookmarks bar
    tab bar
    address bar

    I added your above "bookmarks bar on top" code to my custom css, and now I'm getting this stack order:

    tab bar
    bookmarks bar
    address bar

    Do you think something might have changed since 1.8 that is keeping this from working for me, or is there something I might be missing?
    Thanks in advance for any tips.
    Eric

    Vivaldi v1.12 64-bit on Windows 10 64-bit


  • Yeah, seems like the code doesn't work anymore. Albeit you should be getting bookmarks bar -- address bar -- tab bar (bottom). You just haven't set tab bar to bottom in settings, like I described in this thread. This was a workaround to make the tabs a part of the body, which doesn't work anymore it seems.

    But this code is old anyway, look at what @retoree has coded just yesterday: https://forum.vivaldi.net/topic/22304/address-bar-at-very-top/3?page=1
    You can probably adapt this code and put the bookmark bar on top. Good luck!



  • @luetage Ok, will look into that, thanks!


Log in to reply
 

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