Tabs On Bottom For 1.8

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.

Motionshot

@luetage Yes, I've did all of that and it works now but the tab bar is showing above the bookmarks bar while it should be showing underneath it... i.e. address bar --> bookmarks bar --> tab bar

luetage

@motionshot That's beecause the bookmarks bar isn't part of this mod – currently…
Try this:

/* tabs below address bar */

#tabs-container.no-thumbs.bottom, #tabs-container.view-thumbs.bottom {
	order: -1;
	padding-top: 4px;
	padding-bottom: 0px;
}
.bookmark-bar {
	order: -2;
}
.toolbar.toolbar-addressbar {
	order: -3;
}
.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 YEAHHH thank you so much!

qwaq

Just registered to say a big thank you to all here. Cant believe never heard of Vivaldi until today. Got the tabs below the bookmarks and this is almost the most perfect browser I've been on. Hope it ends up as an option on future builds rather than editing css file. Again, much thanks to you all.

burbuja

Looks like @luetage is a CSS-Guru

I dont need this, but a nice work, @Motionshot or @qwaq add please a screenshot.