How to move hidden extension buttons into another row?
-
@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).
-