Use only side panel div container in Vivaldi
-
Hello,
I have been modding Vivaldi for some time now, and have a situation where I want to use a side-panel website as the entire browser window and completely hide or remove the main browser div container in the browser.
Is that possible?
To replicate my situation, I have changed the setting to show the panel, hide the panel toggle, hide the address bar, hide the main user interface, and set only one web panel website to go to google.com
Then, I have added the following custom js code (Thanks to @luetage) to set the browser window to a specific size and force it to maintain those dimensions:
window.resizeTo(450,725); window.onresize = function() { window.resizeTo(450,725); }
Finally, I have added the following custom.css code to change the user interface and hide all the elements that are not necessary:
/* Remove Vivaldi button */ button.vivaldi { display: none !important; } /* Hide Maximize button */ button.window-maximize { display: none !important; } /* Hide Start_Page Bookmarks button */ button.button-startpage { display: none !important; } /* Hide Start_Page History button */ button.button-startpage { display: none !important; } /* Make Start Page gray header bar very small */ .startpage .startpage-drawer header { padding-top: 12px; height: 2px; } .startpage .startpage-navigation { flex: 0 0 auto; text-align: center; position: relative; padding-top: 0; padding-bottom: 0; padding-right: 12px; padding-left: 12px; display: flex; justify-content: center; min-height: 2px; max-height: 2px; } /* Reduce the Side Panel width to 2px */ #switch { display: flex; flex: 0 0 2px; flex-direction: column; position: relative; background-color: var(--colorBgDark); contain: strict; } /* Hide Start_Page Bookmarks button */ button.button-startpage { display: none !important; } /* Hide Start_Page History button */ button.button-startpage { display: none !important; } /* Make Start Page gray header bar very small */ .startpage .startpage-drawer header { padding-top: 12px; height: 2px; } .startpage .startpage-navigation { flex: 0 0 auto; text-align: center; position: relative; padding-top: 0; padding-bottom: 0; padding-right: 12px; padding-left: 12px; display: flex; justify-content: center; min-height: 2px; max-height: 2px; } /* Hide Panel Home button */ button.button-toolbar.home { display: none !important; } /* Hide Settings "Cog" button */ button.preferences { display: none !important; } /* Empty the main browser window of content */ #webview-container { display: none; position: flex; }
The last few lines of this css code achieves the removal of the content in the main browser div container, but the container is still visible. I have tried changing the max-width value for the container and setting the webview-container to an absolute size, but it doesn't produce the desired result.
Any assistance is appreciated.
Seth
-
Maybe it would be easier to help you if you stated what your goal is. What's the purpose you're after? I don't see the meaning.
-
@luetage Thank you for asking.
The purpose is to be able to transfer a portable installation of Vivaldi with all its settings (not extensions, I know those don't transfer) from one computer to another. Currently, this is partially possible, but if I set the Vivaldi preferences Startup to open a specific set of webpages upon startup, then after moving the files to another computer, that setting is set to "Previous session" and it doesn't maintain the custom list of webpages to open upon startup.
However, open web panels do transfer from one computer to another, so rather than setting up webpages in the main browser window, I would like to set them up as web panels instead that will open consistently from computer to computer regardless of whether a new tab is opened, a new incognito tab is opened, or a new window is opened.
The end goal is to setup a standalone set of vivaldi that only opens up one website regardless of how it is launched without any buttons or other distractions on the browser window other than the close button and the minimize button. These files should then be able to be moved from one computer to another and maintain the exact settings and preferences.
Make sense?
-
Yes, now all your previous requests make sense too
-
Great! Any suggestions?
-
Maybe it isn't possible with css, I tried around for a bit but had no success either -- but that doesn't say anything really
-
Well, thanks for your efforts!
Do you happen to know why the browser startup setting defaults back to "Previous Session" when the stand-alone program files are moved from one computer to another?
If that can be resolved, that would be another possible solution.
-
I have no idea, I haven't had a standalone install in while.
-
@luetage Do you know how to show the address bar in Preferences, and then remove the address bar completely, except the Home button would be the only visible button?
That would be another option to accomplish this task. I tried playing around with the CSS code to perform this task as well, but only succeeded with moving the address bar or removing the browsing window altogether.
-
Is this what you are trying to do?
#header { min-height: 0 !important; z-index: auto !important; } .toolbar.toolbar-addressbar { display: none; }
-
@sjudenim Thank you for the assistance. However, this code completely hides the bar that has the address bar, the back and forward buttons and the Home button.
I am looking to keep the home button on that bar, but hide the address box component. This is unnecessary when all I need is for the browser to display one webpage but still allow someone to click the "Home" button to go back to that one-page should they somehow navigate to a different page via opening a new vivaldi tab or opening a new Vivaldi window.
Is that possible?
I tried simply using this portion of your code, but it also hides the entire bar including the Home and the back and forward buttons.
.toolbar.toolbar-addressbar { display: none; }
-
Aha! I did it!
I added the following code to my custom.css file and it hides the address box, the back and forward buttons, and yet keeps the home button. Hurray!
Now, this should allow the same Vivaldi application files to be moved from one computer to another without having to change the "startup" setting from the default of "previous session" back to the preset homepage. With this code, anyone can simply hit the home button, and be taken back to the homepage regardless of how they navigated to a different page.
Hope this code helps someone else out too.
/* Hide Address Bar */ .addressfield { display: none !important; position: relative; flex: 1 0 auto; display: flex; margin-left: 4px; } /* Hide the reload button on the toolbar */ button.button-toolbar.reload { display: none !important; } /* Hide the back button on the toolbar */ button.button-toolbar.back{ display: none !important; } /* Hide the forward button on the toolbar */ button.button-toolbar.forward{ display: none !important; }
-
All,
After playing with this code for awhile, I found that the context menu allowed adding a webpage to the side panel and then showing the side panel, so I added the following code to prevent the side panel from opening.
/* Hide the panel bar completely */ .panel-group { display: none !important; } .panel-group .panel { display: none !important; } #panels-container { display: none !important; }
-
All,
Just as a final recap, here is my final custom.css code that accomplished a path to where I was going:
button.vivaldi { display: none !important; } /* Hide Maximize button */ button.window-maximize { display: none !important; } /* Hide Start_Page Bookmarks button */ button.button-startpage { display: none !important; } /* Hide Start_Page History button */ button.button-startpage { display: none !important; } /* Make Start Page gray header bar very small */ .startpage .startpage-drawer header { padding-top: 12px; height: 2px; } .startpage .startpage-navigation { flex: 0 0 auto; text-align: center; position: relative; padding-top: 0; padding-bottom: 0; padding-right: 12px; padding-left: 12px; display: flex; justify-content: center; min-height: 2px; max-height: 2px; } /* Hide Start_Page Bookmarks button */ button.button-startpage { display: none !important; } /* Hide Start_Page History button */ button.button-startpage { display: none !important; } /* Make Start Page gray header bar very small */ .startpage .startpage-drawer header { padding-top: 12px; height: 2px; } .startpage .startpage-navigation { flex: 0 0 auto; text-align: center; position: relative; padding-top: 0; padding-bottom: 0; padding-right: 12px; padding-left: 12px; display: flex; justify-content: center; min-height: 2px; max-height: 2px; } /* Hide Address Bar */ .addressfield { display: none !important; } /* Hide the panel bar even if the user opens it */ .panel-group { display: none !important; } .panel-group .panel { display: none !important; } #panels-container { display: none !important; } /* Hide the reload button on the toolbar */ button.button-toolbar.reload { display: none !important; } /* Hide the back button on the toolbar */ button.button-toolbar.back{ display: none !important; } /* Hide the forward button on the toolbar */ button.button-toolbar.forward{ display: none !important; }
My custom javascript code was modified slightly to increase the height of the browser window to accommodate for the extra space needed for the "Home" button.
window.resizeTo(450,759); window.onresize = function() { window.resizeTo(450,759); }
-
Although the above code works well, the next challenge will be learning how to remove context menu items by ID.
I hear that the Vivaldi team will be implementing that as a feature in the future but has anyone accomplished that feat using custom CSS or Javascript code yet?
-