Tabs On Bottom For 1.8
-
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.
-
Looks like @luetage is a CSS-Guru
I dont need this, but a nice work, @Motionshot or @qwaq add please a screenshot.
-
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.
-
@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; } /*
-
@luetage Is it possible to keep the rounding and keep it on the top corners?
-
@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; }
-
@luetage It works! But only with the code you posted first, not with the 2nd one.
My Vivaldi now looks like this:
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?
-
Or merge the title bar and the address bar (even better).
-
And ... how about rounding the corners of ALL the tabs on the tab bar, whether active or not?
-
@drkh said in Tabs On Bottom For 1.8:
And ... how about rounding the corners of ALL the tabs on the tab bar, whether active or not?
If I see good you have rounded all tabs.
-
@potmeklecbohdan After I took a closer look with a magnifier, I see you are right.
-
No, but you can merge title and address bar.
-
-
Merging of the title bar and the address bar is accomplished with sjudenim's CSS codes which you pointed to.
Now my Valvadi looks like this:
Thank you very much.
-
well my objective its to have a classic opera and firefox design on vivaldi with menu bar on top, address bar in the middle and the tab bar below it. everything was working fine on 1.1x here its the code that i have been using
.button-toolbar.next{ display: none; } .button-toolbar.home{ display: none; } /*file menu*/ #header { min-height: 0 !important; z-index: auto !important; height: 24px !important; } /*tabs*/ .topmenu+#tabs-container.top { border-bottom: 0px; position: relative; top: 30px; width: 100%; z-index: 1 !important; } /*address bar background*/ .address-top .toolbar.toolbar-addressbar { padding-bottom: 30px !important; border-bottom: 0px; } #tabs-container.bottom .tab, #tabs-container.top .tab, #tabs-container .newtab, #tabs-container .toggle-trash { height: 30px !important; border-bottom: 0px; }
With new version 2.0 i have an issue with the address bar
-
-
Tabs Below Address Bar for 2.0
#tabs-container.bottom { order: -1; border-top: none; padding-top: var(--padding); padding-bottom: 0px !important; } /* bookmarks bar above tabs */ /* .bookmark-bar { order: -2; } */ .toolbar.toolbar-addressbar { order: -3; } /* corner rounding */ .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; } /* tab group indicators*/ .tabs-bottom .tab-strip .tab-group-indicator { bottom: 28px !important; };
CSS only. Please remember that you still need to set tab position to bottom in Vivaldi settings for this mod to work at all.
-
@luetage said in Tabs On Bottom For 1.8:
#tabs-container.bottom {
order: -1;
border-top: none;
padding-top: var(--padding);
padding-bottom: 0px !important;
}/* bookmarks bar above tabs /
/
.bookmark-bar {
order: -2;
}
*/.toolbar.toolbar-addressbar {
order: -3;
}/* corner rounding */
.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;
}/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
bottom: 28px !important;
};Thanks a lot it worked perfectly
edit: wondering if theres a way to hide the line between the address bar and the tab bar
-
@eilegz said in Tabs On Bottom For 1.8:
edit: wondering if theres a way to hide the line between the address bar and the tab bar !
Try this:
.address-top .toolbar-addressbar:after { background-color: transparent !important; }
I haven't checked if it works with this mod, I just took it from here. If it doesn't work, let me know.
-
@pafflick said in Tabs On Bottom For 1.8:
@eilegz said in Tabs On Bottom For 1.8:
edit: wondering if theres a way to hide the line between the address bar and the tab bar !
Try this:
.address-top .toolbar-addressbar:after { background-color: transparent !important; }
I haven't checked if it works with this mod, I just took it from here. If it doesn't work, let me know.
based on the one you put didnt work but im added the border bottom and now it works, THANKS
.bookmark-bar-top .bookmark-bar { border-bottom-width: 0 !important; } .address-top .toolbar-addressbar:after { background-color: transparent !important; border-bottom-width: 0 !important; }