Automate Floating Vertical Tabbar for Mouse & Keyboard
-
I'd like to try version C, but I'm not sure where I'm supposed to copy and paste the text.
I've done step 1 of the read me shown above.
Then looked at this page https://forum.vivaldi.net/topic/10549/modding-vivaldi and located the browser.html file in Windows.
Plus, opened vivaldi://experiments and enabled "Allow for using CSS modifications". If that's is relevant to this mod.Can you help, please?
Thank you. -
@td4 First of all this is a CSS mod, so u don't need to fiddle with browser.html file, cuz Vivaldi have a built-in CSS mod support. U only need to manually doing so with Javascript mod.
From the modding tutorial:
- Open vivaldi://experiments
- Enable "Allow for using CSS modifications"
- Open Appearance section in settings
- Choose the folder you want to use
- Place your CSS files inside it
- Restart Vivaldi to see them in effect
From your description, I assumed u have done step 1 & 2...
Now, on step 3 & 4 u need to go to Settings (Ctrl+F12) > type in CSS in the searchbox, then click on the Select folder to pick/create a folder (outside of Vivaldi installation folder) to store the custom.CSS file.
Step 5, u need to create a .txt file & name it custom.CSS inside that folder. Open the file with text editor, & past my CSS code & saved.
Then proceed to step 6, restart Vivaldi. This CSS mod obviously require u to set the tabbar to left/right position to take effect.
If u want to install other CSS mod, just paste the code into the same file, I suggest u separate each mod's code with
/* title */
for future references.Now, if u r using Windows u can try using this tool to manage JS mod, but pls don't use it to install CSS mod cuz it's conflict with V internal CSS mod function: https://forum.vivaldi.net/post/241847
-
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
@td4 First of all this is a CSS mod, so u don't need to fiddle with browser.html file, cuz Vivaldi have a built-in CSS mod support. U only need to manually doing so with Javascript mod.
From the modding tutorial:
- Open vivaldi://experiments
- Enable "Allow for using CSS modifications"
- Open Appearance section in settings
- Choose the folder you want to use
- Place your CSS files inside it
- Restart Vivaldi to see them in effect
From your description, I assumed u have done step 1 & 2...
Now, on step 3 & 4 u need to go to Settings (Ctrl+F12) > type in CSS in the searchbox, then click on the Select folder to pick/create a folder (outside of Vivaldi installation folder) to store the custom.CSS file.
Step 5, u need to create a .txt file & name it custom.CSS inside that folder. Open the file with text editor, & past my CSS code & saved.
Then proceed to step 6, restart Vivaldi. This CSS mod obviously require u to set the tabbar to left/right position to take effect.
If u want to install other CSS mod, just paste the code into the same file, I suggest u separate each mod's code with
/* title */
for future references.Now, if u r using Windows u can try using this tool to manage JS mod, but pls don't use it to install CSS mod cuz it's conflict with V internal CSS mod function: https://forum.vivaldi.net/post/241847
Thank you very much for your help.
But I couldn't get it to work, I tried code versions 2 and 3.
I've double clicked everything (I think), made sure the ccs file has the .ccs file extension, instead of .txt etc.Separate question:
Is this possible at all, or is it impossible within Vivaldi?
https://forum.vivaldi.net/topic/70340/opening-the-panel-onwards**** Edit ****
I created a new profile and tried it again. But it still doesn't for me. -
@td4 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
I've double clicked everything (I think), made sure the ccs file has the .ccs file extension, instead of .txt etc.
It's .css not .ccs.
Is this possible at all, or is it impossible within Vivaldi?
https://forum.vivaldi.net/topic/70340/opening-the-panel-onwards
I think u already got your answer there, it's not possible with CSS mod. But it might be possible with js mod. However, IMHO it will be quite pointless because it will be just resizing the window width when you open/close the panel, because everything must be display inside the window frame, so all it does is create an illusion of "extending" the panel outward. But if u insist, u can made a feature request in the request forum, but don't hold your breath for it. LOL
If u r lazy to deal with constantly opening & closing the panel, u can try this CSS & JS mod: https://forum.vivaldi.net/post/378402 U can use just the JS mod if you don't like the CSS mod effects.
-
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
@td4 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
I've double clicked everything (I think), made sure the ccs file has the .ccs file extension, instead of .txt etc.
It's .css not .ccs.
Is this possible at all, or is it impossible within Vivaldi?
https://forum.vivaldi.net/topic/70340/opening-the-panel-onwards
I think u already got your answer there, it's not possible with CSS mod. But it might be possible with js mod. However, IMHO it will be quite pointless because it will be just resizing the window width when you open/close the panel, because everything must be display inside the window frame.
If u r lazy to deal with constantly opening & closing the panel, u can try this CSS & JS mod: https://forum.vivaldi.net/post/378402 U can use just the JS mod if you don't like the CSS mod effects.
Thanks for replying.
I was just a typo here. I had named the file .css (last and current profile).Are there any settings in the Panel Settings I also need to configure?
This is my current setup.
I will take a look at the link.
Thank you. -
@td4 I'm really confused here... Can u pls explain in detail WHAT is not working?
This CSS mod is for vertical tab bar, not panel. So the only settings you need to apply is set the tab bar position to Left/Right like this:
CSS mod setup, make sure the folder's name don't have any SPACE, use
_
instead:
As for the panel mod (from linked topic), your panel settings seems fine. I think you should discuss panel mod in the appropriate thread, cuz now I'm not really sure what u r talking about. LOL
-
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
@td4 I'm really confused here... Can u pls explain in detail WHAT is not working?
This CSS mod is for vertical tab bar, not panel. So the only settings you need to apply is set the tab bar position to Left/Right like this:
CSS mod setup, make sure the folder's name don't have any SPACE, use
_
instead:
As for the panel mod (from linked topic), your panel settings seems fine. I think you should discuss panel mod in the appropriate thread, cuz now I'm not really sure what u r talking about. LOL
Doh! What a dumbass I am.
I apologise for being stupid and wasting your time
For some reason, I thought this thread was about "panels" and not "tabs".
I tested it out with tabs, and it works fine.Thanks again for taking the time to help.
-
@dude99 Thanks for this great mod!
One question:
Any way to add a keyboard-shortcut so to expand the tabbar without mouse-hover?As I'm using 2-level, time-to-time, I want to confirm where I am in my big tab tree
-
You can reveal the tabbar by hover pointer at the window's left/right edges, or focus on the tabbar via keyboard shortcut.
The KB/MG shortcut is Focus Tab Bar
Also, u can try https://forum.vivaldi.net/post/446551 mod to auto adjust the 2 columns for 2 level stacking.
-
@dude99 Thanks! I got it. Yes, I'm using full set of your mods
-
For some reason, at least for me the latest Vivaldi update causes the browser to preallocate the area on the browsing area for max floating vertical tab
(check the highlighted area)
With help from Vivaldi discord, so far adding this into CSS helps, at least for me.
#main .inner div:nth-of-type(2) {width: auto !important;}
-
@onyhow Thanks for the heads up, I will fix the changes made in v5.2 later with proper code.
EDIT2: first version fix have some flaws, updated with more precise syntax.
EDIT: All 3 version of code have been updated for v5.2 latest stable update.-
Add
.tabs-left #main > .inner > div:nth-child(2) {max-width: 0px;}
.tabs-left #panels-container + div[style*='height: auto;'] {max-width: 0px;}
in last line to fix latest changes. Not really sure why they add adiv
container "hack" to fix the left tabbar (which ain't broken), but this code will cancel the effect of this weird decision. LOL -
Correct right tabbar minimized width to
30px
for version B & C (because I notice the 2px off-alignment ancient error on the right side of the window is fixed).
-
-
Hi, where can I download the latest version of this mod?
-
@rlira This ain't extension, you cant download it, you will have to diy to install this CSS mod, instructions is over here:
https://forum.vivaldi.net/post/10549 -
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
ΠΠΎΠ±Π°Π²Π»ΡΡΡ .tabs-left #main > .inner > div:nth-child(2) {max-width: 0px;} .tabs-left #panels-container + div[style*='height: auto;'] {max-width: 0px;}Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠ΅, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
It works! Thanks!
How to remove the panel disappear delay? What would she hide as soon as the mouse cursor was removed from it. -
@Zmiter25 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
.tabs-left #main > .inner > div:nth-child(2) {max-width: 0px;} .tabs-left #panels-container + div[style*='height: auto;'] {max-width: 0px;}
Those are not proper solution to hide the new div container, pls get the latest & best solution for v5.3+ from the OP:
#main > .inner > div:has(#tabs-tabbar-container.left) {max-width: 0px;}
-
Is there any recent version of this mod? I'm getting weird UI bugs when using a version from the topic head like empty space where tabs should be doesn't go away:
It's a version B.
-
@iamkarlson The OP code was last updated on June 6 2022 after V team added a
DIV
on top of the tabbar which cause the problem you mentioned, are you using latest version of the code? Can u try copy & paste it to test it again? Also, maybe you can try remove the experimental section to see if that's the problem, cuz it's a half baked solution I have "forgotten it exist" for awhile... LOLI will try fix it later if it's indeed broken, thanks for the headup.
-
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
@nish7009 raise the tabbar to made space for static Statusbar by alter
bottom:0
tobottom: 20px
. If you want tabbar to alter it's bottom based on statusbar mode, then u need to use JS for that.I can't code JS so u need to open a new topic & request someone else to do it for u.
Hi, thanks for the sharing
Unfortunately tab bar omits status bar though bottom option is set. Can you help me?
I tested and got same results with latest stable and snapshot version -
@arcsnim Thanks for the head up. The solution is very simple, just insert
height: auto !important;
in the line with#tabs-tabbar-container:is(.left, .right) {position: fixed; top: 25px; bottom:0; <INSERT HERE>
The reason it broke because they added
height: 100%
on the#tabs-tabbar-container
recently via js. I didn't noticed it cause I only checking the CSS code... LOL