Tabs On Bottom For 1.8

luetage

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.

SallyK

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.

luetage

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.

luetage

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

luetage

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;
}

SallyK

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

luetage

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

luetage

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;
}

michaa7

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.

luetage

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

michaa7

@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)?

luetage

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

Barreto

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.

mib2berlin

@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

EHM

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

luetage

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!

EHM

@luetage Ok, will look into that, thanks!

luetage

Seems like code still works after all, you just have to watch out if you have thumbs enabled, or not:
.tabs-container.view-thumbs.bottom vs .tabs-container.no-thumbs.bottom

Updated a little for Vivaldi version 1.13

/* 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;
}
.stacks-on.tabs-bottom .tab-strip .tab-group-indicator .tab-indicator.active {
	padding-top: 2px;
}

Motionshot

@luetage Would you mind updating the code for 1.16? 'Cause I've added it to custom.css but the tabs are showing above the bookmarks bar. i.e. address bar --> tab bar --> bookmarks bar instead of address bar --> bookmarks bar --> tab bar

luetage

@motionshot Just checked, code still works on 1.16. Be aware that you need to set tabs to bottom in settings for this to work. You also need to adjust the first line of the code (.no-tHumbs or .view-thumbs), depending wether you have Show Tab Thumbnails in vivaldi://settings/tabs/ ticked or not.