Tabs On Bottom For 1.8

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.

drkh

After I use luetage's CSS code to move the tab bar below the bookmark bar, the tab corner rounding becomes upside down. See this pic:

Any way for correction?

I use the recentest x64 version of Vivaldi 1.15.1147.64.

luetage

@drkh Try this (just uncomment the last part).

#tabs-container.bottom {
    order: -1;
    padding-top: 4px;
    padding-bottom: 0px;
}
/* bookmarks bar above tabs */
/*
.bookmark-bar {
    order: -2;
}
*/
.toolbar.toolbar-addressbar {
    order: -3;
}
.tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px;
}
.tabs-bottom .tab-strip .tab-group-indicator .tab-indicator.active {
    padding-top: 2px;
}
/* turn off corner rounding */
/*
.tabs-bottom .tab-position .tab {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}
/*

drkh

@luetage Is it possible to keep the rounding and keep it on the top corners?

luetage

@drkh I guess so.

.tabs-bottom .tab-position .tab {
    border-top-left-radius: var(--radiusHalf);
    border-top-right-radius: var(--radiusHalf);
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

drkh

@luetage It works! But only with the code you posted first, not with the 2nd one.

My Vivaldi now looks like this:

0_1537829329890_Vivaldi_can_not_merge_title_bar_and_tab_bar.jpg

By the way, before doing this mod, I was able to merge the title bar and tab bar into a single bar (thus saving space) by selecting...

(1)

Settings > Appearance > Menu > Menu Position > Vivaldi Button

(2)

Settings > Tabs > Tab Display > Tab Options > Remove Tab Spacing in Maximized Windows

But now that can't be achieved any more because the tab bar has to be in the bottom now.

Any chance to merge the title bar and the tab bar again?

drkh

Or merge the title bar and the address bar (even better).

drkh

And ... how about rounding the corners of ALL the tabs on the tab bar, whether active or not?