How to move hidden extension buttons into another row?
-
Previously, there is a popup container to display all hidden extension buttons, but now it's replaced with all buttons crammed into the Address bar. I have a lot of hidden extensions & this new layout is very bad solution to display a lot of hidden buttons.
I would like to recreate the previous method with horizontal layout, spawn at the bottom of the toggle button. Is that possible with just CSS? Or we need to do it with JavaScript? The best i can muster with my limited CSS knowledge is this:
.toolbar-addressbar .extensions-wrapper.expanded button.actionVisibility-hidden { position:absolute; top:35px right:0; }
But then all buttons end up stacking on top of each other at the corner... I'm out of idea, so anyone have any idea?
Thanks for all the help.
-
@dude99 They have to stack on top of each other, because you are setting the same absolute positioning on each of them. You probably have to collect them with javascript and move them to another container activated by extension toggle.
-
obsolete codes
-
Finally, got the entire extensions wrapper move into second row!
It's so simple that I don't know why I didn't think of it earlier:
Latest code here: https://forum.vivaldi.net/post/297168
If overcrowded, a bottom scrollbar will allow u to scroll through all extension buttons.Happy New Year!
EDIT:
More stuff at below:
https://forum.vivaldi.net/post/263947
https://forum.vivaldi.net/post/265042 -
@QuantumCthulhu Open a new window, or restart the browser. Your changes will only affect a new window.
-
@QuantumCthulhu If you are unsure about the code, just test something else, e.g:
#tabs-container {background-color: pink !important}
Then you'll know if your setup is alright.
-
@QuantumCthulhu said in How to move hidden extension buttons into another row?:
I added a "cusrom css", inside i copy pasted the code above, and it doesn't work....
Maybe recheck for typo?
How I did it:
- Shutdown Vivaldi before edit the file, & saved:
C:\Users\User\AppData\Local\Vivaldi\Application\2.2.1388.37\resources\vivaldi\browser.html
After edit, above file should look like this, the 7th line is the mod:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vivaldi</title> <link rel="stylesheet" href="style/common.css" /> <link rel="stylesheet" href="style/custom.css" /> </head> <body style=" background-color: #d4d4d4; background-image: url('resources/vivaldi-splash-icon.svg'); background-size: 16%; background-position: center; background-repeat: no-repeat;"> <div id="app" /> <script src="localeSettings-bundle.js"></script> <script src="background-common-bundle.js"></script> <script src="vendor-bundle.js"></script> <script src="settings-bundle.js"></script> <script src="urlbar-bundle.js"></script> <script src="components-bundle.js"></script> <script src="bundle.js"></script> </body> </html>
-
Then, create a plain text document (new_document.txt) in this folder:
C:\Users\User\AppData\Local\Vivaldi\Application\2.2.1388.37\resources\vivaldi\style\
-
Rename the file into
custom.css
, then add the CSS mod code inside & save the changes.
4, Startup Vivaldi to check.
Sorry, I can't teach u much about modding other than that, cuz I'm a newbie myself :smiling_face_with_open_mouth_cold_sweat:
Hope this is helpful.
- Shutdown Vivaldi before edit the file, & saved:
-
@QuantumCthulhu Oh Im so sorry, it seems other mod i have is affecting this mod. I have updated the previous CSS code.
Thanks for the helpful advice.
-
@QuantumCthulhu Did you unchecked Settings > Address bar > Extensions > Extension Toggle? It needed to be off to work with this mod.
-
@QuantumCthulhu Good, good. Glad it work out for u at the end.
-
Code updated to optimize for window with small width, now extension buttons won't float out of window when overcrowded, instead it will show a scrollbar for scrolling through 'em!
-
If u r using my Automate Overlay Address bar CSS mod from https://forum.vivaldi.net/post/263170 , then u can add below code to hide the extensions bar together with address bar:
#header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) .extensions-wrapper.expanded:not(:focus-within):not(:hover) {visibility:hidden; transition-delay:1.15s !important;} /* rotate toggle icon on 2nd row*/ .extensions-wrapper.expanded .toggle-extensions-group svg {rotate: 90deg;}
-
obsolete codes
-
Well, all css mod in this thread are super dead, & there are no workaround to restore 'em!
So, here is my 2nd best solution, which permanently move all extension buttons to 2nd row, they will be hidden when not needed:
.address-top .toolbar-extensions {position:absolute; top:34px; left: unset !important; right:0 !important; z-index:0; border-radius:0 0 0 var(--radius); max-width:100%; overflow-x:overlay;} .address-top #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {visibility:hidden; transition-delay:.5s !important;} .toolbar-extensions::after {display:none;} .HiddenToggleExtensionIcon {background: #ffffff20;}
Mouseover or focus (F8) on the Address bar to reveal the extensions buttons, else it will be hidden after half a second. This mod mainly useful for those who have too many extension & too lazy to fuss with the ext. toggle to keep the address bar tidy, basically this mod will render the ext. toggle pointless.Enjoy! (for now, until V team decided to break this mod in the future)
EDIT: updated for v2.10, DO NOT compatible with drop-down menu. So, disabled it if you prefer my mod behavior. -
@dude99 I just put this mod into my browser. I'll test it out for a while and see how I feel. Thank you for sharing.
-
@dude99 just saw this, tried it, does nothing, but I was thinking why not move the extension toolbar into the quick command bar?
-
@ch3f By quick command bar you mean status bar? We used to have a mod for this, but Vivaldi started removing and adding elements instead of hiding them. Itβs doable but quite complicated and not worth it anymore in my opinion.
-
@ch3f FWIW this is the latest version I'm currently using:
.address-top .toolbar-extensions {position: absolute; top: 34px; left: unset !important; right: 3px !important; box-shadow: 4px 0 var(--colorAccentBg); display: flex; flex-flow: row wrap; max-width: 100%; border-radius: 0 0 0 var(--radius); z-index: 0;} .address-top #header:not(:hover) ~ #main .UrlBar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {visibility: hidden; transition: all 0.5s ease 0s !important;} .toolbar-extensions:not(:focus-within):not(:hover) {box-shadow: none; opacity: 0.4; background: transparent;} .toolbar-extensions .ExtensionIcon--Hidden {order:1; background-color: transparent;} .toolbar-extensions .ExtensionIcon--Hidden:hover {border-radius: 50%; background-color: var(--colorAccentBgDark); transition: border-radius .2s !important;} .toolbar-extensions > .button-toolbar:not(.ExtensionIcon) {order:99;} .toolbar-extensions::after {display:none;}
This is how it looks in action:
It only work on addressbar on top setup, & it's kinda consider redundant by the new feature extension drop down menu from last year. The only advantage it have over the default one is I don't have to fiddle with the toggle button to hide/show all the extension buttons to make space for addressfield. I no longer updating this mod because most people r happy with the default feature offer by V team.
As for your request on insert the entire extension wrapper into another toolbar, that unfortunately can't be done with just CSS. You will need to get help from the JavaScript gurus.
-
@luetage nope I meant "The Quick Commands Bar" as in F2 top open...
Really, Im just trying to find a way yo access the extension toolbar without the url bar (which I have disabled).
-