Hiding title bars in "open as window" apps

[caseybarx]

With the following CSS code I am able to easily hide the title bar of a website in the browser by hitting Ctrl F11

/*Hide titlebar in tabless view (Ctrl F11)*/
#header:has(#titlebar.tabless) {
  display: none !important;
}

Is there a way to do this with websites saved as shortcuts that have the “open as window” feature enabled? Having shortcuts pinned to the Windows taskbar as separate windows is very useful for a few primary websites I use.

Alternatively, is there a an alternative way to create separate browser windows that I could pin to the taskbar that would use the CSS mentioned above?

--
ModEdit: </>

[caseybarx]

@dude99 any thoughts? thanks

[dude99]

Sorry, I don't think we can mod App window with CSS, especially the native window's titlebar - because it's a part of native window & thus control by the OS.

Maybe someone else know more about this can help, but I'm not sure if it can be done with CSS.

[caseybarx]

Is there any html code that is changed when a window is opened as an app? I would like to hide the header on these as well. Any way to do this?

[caseybarx]

@caseybarx said in Hiding title bars in "open as window" apps:

Is there any html code that is changed when a window is opened as an app? I would like to hide the header on these as well. Any way to do this?

@OUDSTAND any thoughts?

[dude99]

@caseybarx AFAIK App titlebar & window frame are handle by OS, not Vivaldi, just like when we activate Native mode. As for html code, you can try using the devtool on app window, or source all the html, js, css file in the installation folder with a good text editor - I'm not gonna do that because it's too much work & time consuming... LOL

[nomadic]

@caseybarx The UI is the same as on Chrome, so Vivaldi's PWA window is likely just inherited from Chromium. This means it doesn't use any HTML/CSS/JS to render the UI, so no traditional Vivaldi UI mods are going to work.

There isn't much reason for Vivaldi to rewrite that part of the Chromium UI because PWAs, as evident by your desire to remove the UI, aren't really supposed to look like a browser at all.

Try searching for methods to get what you want that work on Chrome as they will likely work on Vivaldi as well.

[oudstand]

@caseybarx said in Hiding title bars in "open as window" apps:

@caseybarx said in Hiding title bars in "open as window" apps:

Is there any html code that is changed when a window is opened as an app? I would like to hide the header on these as well. Any way to do this?

@OUDSTAND any thoughts?

Sorry, until now I couldn't get PWAs inspected. I also wanted to change there somethinge, once.

[caseybarx]

@oudstand @nomadic @dude99 thanks for replies.

Maybe it would be easier to try a different approach. I can get the frameless view I want with the vivaldi browser but Im not sure how to get them to have their own separate taskbar icon. Currently if I open them in vivaldi browser they get grouped into my vivaldi taskbar icon.

I have a few websites (calendar, tasks) that I would like open as frameless windows with their own separate windows taskbar icon, so they basically function as stand alone apps.

Is there a way to open a separate browser instance to have separate calendar and task taskbar shortcuts like image below (currently the calendar and tasks icons are currently the PWA shortcuts) Thanks for any thoughts

[oudstand]

Sorry but I don't know how to do that.