Tabs On Bottom For 1.8
-
@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; }
-
@eilegz Are you sure about that? I've just checked and the
.toolbar-addressbar:after
pseudo-element doesn't have any border and thus addingborder-bottom-width
attribute shouldn't actually change anything. Or perhaps the border was coming from the.bookmark-bar
?
That is strange to me, nevertheless, I'm glad that you achieved what you wanted. -
tried few variants but all have some flaws.. so did anybody succeed in putting address bar above tabs with drop-down menus appearing above everything?(not covered by tabs/appearing below them)
now i have this:
i'd wish it to become this:
or at least this: -
@luetage I couldn't make the code work in latest snapshot. is it possible to achieve something like this in vivaldi?
-
@baris-sehri As mentioned, the code works for me. Please check 2 things:
- test the CSS without any other modifications running
- make sure you have selected Bottom in
vivaldi://settings/tabs/
-
make sure you have selected Bottom in vivaldi://settings/tabs/
thank you. yes, it is working now. but, it's not working properly with the auto-hide bookmarks bar css. which is this, I don't know if this one is also yours or not...
/* Auto hide bookmark bar */ #browser:not(.color-behind-tabs-off) .toolbar-addressbar { background: inherit; } #browser.tabs-top.address-top.bookmark-bar-top .toolbar-addressbar, #browser.tabs-top.address-bottom.bookmark-bar-bottom .toolbar-addressbar, #browser.tabs-top.address-bottom.bookmark-bar-top .toolbar-addressbar, #browser.tabs-bottom.address-top.bookmark-bar-top .toolbar-addressbar, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .toolbar-addressbar { z-index: 2; } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar, #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar, #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar { position: absolute !important; width: 100%; transition: transform 0.2s ease-in-out !important; z-index: 1; } /* tabs-top address-top bookmark-bar-top */ #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-top.address-top.bookmark-bar-top .toolbar-addressbar:hover ~ .bookmark-bar, #browser.tabs-top.address-top.bookmark-bar-top #header:hover ~ #main .bookmark-bar { transform: translateY(0); } /* tabs-top address-bottom bookmark-bar-bottom */ #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 34px; transform: translateY(100%); } #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-top.address-bottom.bookmark-bar-bottom .toolbar-addressbar:hover ~ .bookmark-bar { transform: translateY(0); } /* tabs-top address-bottom bookmark-bar-top */ #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar { top: 0; transform: translateY(-100%); } #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-top.address-bottom.bookmark-bar-top #header:hover ~ #main .bookmark-bar { transform: translateY(0); } /* tabs-bottom address-top bookmark-bar-top */ #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-bottom.address-top.bookmark-bar-top .toolbar-addressbar:hover ~ .bookmark-bar { transform: translateY(0); } /* tabs-bottom address-bottom bookmark-bar-bottom */ #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 64px; transform: translateY(100%); } #browser.tabs-bottom.address-bottom.bookmark-bar-bottom.stacks-on:not(.tabs-at-edge) .bookmark-bar { bottom: calc(64px + var(--padding)); transform: translateY(100%); } #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .toolbar-addressbar:hover ~ .bookmark-bar { transform: translateY(0); } .webpanel-header { z-index: 0; }
-
@baris-sehri I haven't written this.
-
@baris-sehri You could try and take all the selectors out that contain
.tabs-bottom
, because this should be the reason the mods conflict. You pick tabs bottom in settings, but the tabs are truly on top. -
take all the selectors out that contain .tabs-bottom
I tried this in both css separately, but couldn't make it work. either I'm doing something wrong or it's not happening
-
@baris-sehri You only remove it from the other css, the one I wrote needs the tabs-bottom parts obviously.
-
You only remove it from the other css, the one I wrote needs the tabs-bottom parts obviously.
yes I know, but I couldn't make it. thanks.