tabs below address bar and overlay menus
-
@nomadic
Hehe, I still learning after years of Vivaldi usage.Mib
-
@nomadic Thanks so much. And sorry, I will keep to this thread.
-
@nomadic said in tabs below address bar and overlay menus:
"CUSTOM UI MODIFICATIONS"
Okay, I am missing something. When I set this up on my machine a week ago, "CUSTOM UI MODIFICATIONS" was available. Today, when I decided to install the identical version, 3.0.1874.32, on another machine at home, that option is missing! It is gone! Then, I went back to my machine and there it still is! Now, I am nervous about this and have tuned off updates. No telling if it will be there if I ever have to reinstall. Not a good thought because without that one cannot make modifications, and it's back to Firefox.
-
@musicollector Custom UI Modification is an experimental feature. On any new or alternative installation of Vivaldi you will need to enable it. Go to: vivaldi://experiments
-
@musicollector Yeah, just as @Pesala said. If you want to do the same mod to another install of Vivaldi, follow the initial steps I gave earlier in the thread.
-
@nomadic Gee, you guys are so helpful, as opposed to, say, the Lastpass forum! If they were any more helpful, they'd be in the cemetery! Thanks to all. I am going to sit down and go through all these great ideas, and return to Vivaldi, possibly. I say that because there has been two new developments.
-
I could not reposition the bookmark items on the Bookmark Bar, as I can in Firefox. I want to be able drag the most important bookmarks out on to the visible portion of the bar.
-
I have over 150 entries in Lastpass, all ofwhich I am able to see in the Firefox extension of LP. However, in Vivaldi, where I use the Chrome version, I see only 6, I reinstalled the add-on twice as well as Vivaldi twice, as well, to no avail.
As a result, I had uninstalled Vivaldi until such time I could get the Lastpass and bookmark issues resolved. But, seeing you have put in some effort to help me in this thread, I am going to reinstall it and try the tweaks, as well, hoping that these two issues can be resolved.
Thanks.
Thanks again.
-
-
@musicollector No problem. Hope you do come back to Vivaldi. It is the first browser that has really made me excited for each new update!
-
Bookmark Repositioning:
-
To drag items on the bookmark bar, you need to hold down
Shift
while you drag. -
There is a slight bug using this method in that if you drag a bookmark from the hidden portion to the visible portion, the bookmark loses its title and the title is replaced with the URL.
- This also applies to folders on the bookmark bar
Ā
- This also applies to folders on the bookmark bar
-
The Better Way:
- Go to the bookmarks page: vivaldi://bookmarks/ and reorder the bookmarks in the bookmark bar folder
- This will avoid the title loss bug
Ā
-
-
Lastpass:
-
I don't actually use Lastpass, so I can't really help you there, but I do use Bitwarden as a password manager. I prefer Bitwarden because it is Open Source, has gone through third-party audits, and I like their approach of giving you the option to self host if you want to. The openness and the fact that it is free make it an easy recommendation.
-
You can import your Lastpass passwords from your complete database (not the broken version with only 6) into Bitwarden:
https://bitwarden.com/help/article/import-from-lastpass/
-
Hope you can make Vivaldi work for you!
-
-
@nomadic Thank you for the advice on reordering bookmarks. Who would have thought using the SHIFT key?
I am SO used to Lastpass, which works like a charm for me that I will stick with it. But, I am going to make a mental note of Bitwarden. I may even try it because there are some things about Lastpass that anoy me. And, nobody there listens to users.
Thanks again to you, Pesala, and anybody else who have been kind enough to assist.
-
@Pesala said in tabs below address bar and overlay menus:
@musicollector Custom UI Modification is an experimental feature. On any new or alternative installation of Vivaldi you will need to enable it. Go to: vivaldi://experiments
DAH...I missed that part that it is hidden unless I invoke it. Thanks.
-
@musicollector
@nomadic, @pesala, Lastpass DOES work! The missing items were just in a different folder. -
@nomadic Okay. I am not sure what is going on here, but nothing has changed even after I invoked the .CSS file. Actually, I removed the file from its location and restored it to see if it was having any effect - there was none.
This is what I currently see:
When I click on Select Folder next CUSTOM UI MODIFICATIONS and drill down to the folder where the .CSS file is, am I supposed to see the .CSS file in the folder? All I see is "No items match your search". I guess that is normal...
Now, from the screenshot, as you can see, the tabs are at the top, followed by the address bar and finally the bookmarks. What I want is the address bar at the top, followed by the bookmarks bar, then the tabs.
Here is the code I have placed in the .CSS file:
**
#tabs-container.bottom {
order: -1;
border-top: none;
padding-top: 5px;
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;
}
/ Fix Fillets */
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):before {
top: unset;
bottom: 0;
-webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
}
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
top: unset;
bottom: 0;
-webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%);
}/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
bottom: 28px !important;
}
/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
content: unset;
}/* Remove line between bookmark bar and tabs */
.bookmark-bar {
border-bottom-width: 0px !important;
}.bookmark-bar {
background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
background-color: var(--colorAccentBg);
}.color-behind-tabs-on .bookmark-bar {
background-color: var(--colorBg)
}
.color-behind-tabs-on .bookmark-bar button {
background-color: var(--colorBg);
}0
#tabs-container.bottom {
order: -1;
border-top: none;
padding-top: 5px;
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;
}
/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
content: unset;
}/* Remove line between bookmark bar and tabs */
.bookmark-bar {
border-bottom-width: 0px !important;
}.bookmark-bar {
background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
background-color: var(--colorAccentBg);
}.color-behind-tabs-on .bookmark-bar {
background-color: var(--colorBg)
}
.color-behind-tabs-on .bookmark-bar button {
background-color: var(--colorBg);
}
**
Please advise. TIA. -
@musicollector No, you aren't supposed to see the
.css
file when you select the folder. You are just selecting the folder, not a file.Here is what mine looks like:
And for pasting
CSS
in a message, please use the </> button or surround theCSS
with 3 backticks, like this:```
CSS Here
```
Other than a stray
0
in theCSS
you included, it all looks good. I also tried it on a clean install and it worked even with the extra0
.My best guess is that you didn't enable
Tabs Bottom
. I believe you mentioned uninstalling and reinstalling Vivaldi, so my guess is that in setting up this mod again, you skipped that step (the 6th step from above).If you go to:
Settings
āTabs
āTab Bar Position
You can enable:
BottomThen the mod should be working for you again.
I also cleaned up your
CSS
to remove the0
and changed how a comment was structured. Although, I am wondering why you commented out the corner rounding section, as you can adjust corner rounding in your theme settings.#tabs-container.bottom { order: -1; border-top: none; padding-top: 5px; 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; } */ /* Fix Fillets */ .tabs-bottom .tab.active:not(.marked):not(.tab-mini):before { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%); } .tabs-bottom .tab.active:not(.marked):not(.tab-mini):after { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%); } /* tab group indicators*/ .tabs-bottom .tab-strip .tab-group-indicator { bottom: 28px !important; } /* Remove line between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } /* Remove line between bookmark bar and tabs */ .bookmark-bar { border-bottom-width: 0px !important; } .bookmark-bar { background-color: var(--colorAccentBg); } .color-behind-tabs-off .bookmark-bar button { background-color: var(--colorAccentBg); } .color-behind-tabs-on .bookmark-bar { background-color: var(--colorBg); } .color-behind-tabs-on .bookmark-bar button { background-color: var(--colorBg); } #tabs-container.bottom { order: -1; border-top: none; padding-top: 5px; 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; } /* Remove line between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } /* Remove line between bookmark bar and tabs */ .bookmark-bar { border-bottom-width: 0px !important; } .bookmark-bar { background-color: var(--colorAccentBg); } .color-behind-tabs-off .bookmark-bar button { background-color: var(--colorAccentBg); } .color-behind-tabs-on .bookmark-bar { background-color: var(--colorBg); } .color-behind-tabs-on .bookmark-bar button { background-color: var(--colorBg); }
-
@nomadic Okay, thanks. it is working perfectly now after I did step 6. The reason I missed that was because the last time ticked that, it put the tabs way at the bottom of the browser, not just below the bookmarks bar.
Hmmm...I never knowingly comment out the corner rounding section. Actually, I want the corners to be rounded, which it is not, still.
This is what I currently have:
/* 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; }
Also, I want to open searches in a new tab.
-
@musicollector Oh, I didn't even notice, but you seem to have duplicates in the
CSS
. Looks like the new version with fixed fillet was pasted in with the version without it.To enable rounded corners on the tabs and other parts of the UI, you need to edit your theme.
Go to:
Settings
āThemes
āEdit Theme
and move theCorner Rounding
Slider to a higher number.
This should be all you need in the
CSS
file:*** EDIT: Changes to selectors in Vivaldi version 3.6 broke this mod. Here is the new code to make it work again. The older CSS for versions before 3.6 can be found by expanding the section below "Old CSS"
#tabs-tabbar-container.bottom { order: -1; border-top: none; padding-bottom: 0px !important; } /* bookmarks bar above tabs */ .bookmark-bar { order: -2; } .toolbar.UrlBar { 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; } /* Fix Fillets */ .tabs-bottom .tab.active:not(.marked):not(.tab-mini):before { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%); } .tabs-bottom .tab.active:not(.marked):not(.tab-mini):after { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%); transform: unset; } /* tab group indicators*/ .tabs-bottom .tab-strip .tab-group-indicator { bottom: 28px !important; } /* Remove line between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } /* Remove line between bookmark bar and tabs */ .bookmark-bar { border-bottom-width: 0px !important; } .bookmark-bar { background-color: var(--colorAccentBg); } .color-behind-tabs-off .bookmark-bar button { background-color: var(--colorAccentBg); } .color-behind-tabs-on .bookmark-bar { background-color: var(--colorBg); } .color-behind-tabs-on .bookmark-bar button { background-color: var(--colorBg); }
Old CSS:
Expand to see CSS for versions 3.5 and below
#tabs-container.bottom { order: -1; border-top: none; padding-bottom: 0px !important; } /* bookmarks bar above tabs */ .bookmark-bar { order: -2; } .toolbar.UrlBar { 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; } /* Fix Fillets */ .tabs-bottom .tab.active:not(.marked):not(.tab-mini):before { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%); } .tabs-bottom .tab.active:not(.marked):not(.tab-mini):after { top: unset; bottom: 0; -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%); } /* tab group indicators*/ .tabs-bottom .tab-strip .tab-group-indicator { bottom: 28px !important; } /* Remove line between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } /* Remove line between bookmark bar and tabs */ .bookmark-bar { border-bottom-width: 0px !important; } .bookmark-bar { background-color: var(--colorAccentBg); } .color-behind-tabs-off .bookmark-bar button { background-color: var(--colorAccentBg); } .color-behind-tabs-on .bookmark-bar { background-color: var(--colorBg); } .color-behind-tabs-on .bookmark-bar button { background-color: var(--colorBg); }
-
@nomadic Thank you! It worked spledidly! I set the rounding to 14 px. which is exactly to my liking.
Now, I had a curious question in my mind. I see that all I had to do for rounded corners was to increase the number in Theme settings. Now, I wanted to see if could I have accomplished this earlier or if it was working in conjunction with the CSS code? So, I experimented by modifying the CSS file by removing the Rounded and Fix Fillet code. I did observe that the code was working together with the built-in Theme setting but removing the fillet, you mentioned. Until now, I had no idea what the "fillet" was until I did this. Now, I know what you meant.
I have resolved all the issues and now have a perfect browser, thanks to the two of you. What a marked contrast between your forum and some others like Firefox and Lastpass where you simply cannot get any timely help, if at all. My kudos to the two of you for sticking with me and your kind assistance.
A Happy Vivaldi User
Harry
http://harry.cckerala.com -
This post is deleted! -
Dear luetage and nomadic,
thank you so much for your fantastic scripts.
I was searching for this features for a very long time.
My tabs are now where they should be: below the address bar.
Hurrah. You made me happy.Maxim Waldow
-
Never understood why this crucial feature of Firefox was ignored by Egde, Brave, Opera e.a.
It makes absolutely no sense to put the tabs bar on another place like bottom, above, left or right.
It's so weird that the developers offered all options circling around except the only feasable one.
This should be genuinely integrated in Vivaldi. -
-
@maximwaldow said in tabs below address bar and overlay menus:
It makes absolutely no sense
to you maybe, many prefer it this way, but I agree on making it an option would be preferable.