Edges to the browser window

bdot

@Pesala said in Edges to the browser window:

@bdot The edge is still there, you can see it by the drop shadow. Whether there's a border or not makes no difference, you have can still see the double-arrow cursor that is necessary to resize the window.

Ssee the Modding Forum if you really must waste some space.

uh.... there is no drop shadow showing. It's just white space and looks exactly like the white space on the browser window behind it. There is literally no distinction between one window and the next window.

bdot

@Tiamarth said in Edges to the browser window:

@bdot Hi there, this feature is not currently built in to Vivaldi unless you set it to use native window borders, which also adds the system's title bar. I posted a request in the feature requests thread about this issue: https://forum.vivaldi.net/post/136901

Add an option to show a border around Vivaldi even when Native Window is disabled, see this thread. Some users may like to have the clear distinction between Vivaldi and other running apps on their system, but not like the titlebar.

I also posted some custom css that adds a border to Vivaldi to use as a workaround in the meantime:
#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

Where do you stick that CSS code? Is there an INI file or somthing that it goes in?

pafflick

@bdot You should probably read this if you haven't done that before.

Pesala

@bdot said in Edges to the browser window:

uh.... there is no drop shadow showing.

I don't recall changing any settings. I assumed that everyone would see the drop shadow. Probably it depends on your OS. I am using Windows 10 64-bit Creator's Edition.

enc0re

@pafflick I'm using Win 7 x64, three computers and draging from border nowhere works :(.

Tiamarth

@enc0re To clarify, are you trying to make it so you can drag the window from the border, or are you having issues being able to resize the window from the border?

Because I think Pafflick was explaining he had no issues moving the window by dragging from the tab bar, and I don't have any issues with that either. But you wouldn't be able to make the border drag the window with just css: you'd need to create a new element (e.g. .border) behind .app, while also giving .app a margin of however wide you want your border to be, and then you'd need to make .border draggable. You can make an element draggable with just css, but you can't make only an element's border draggable with just css, and since you'd have used Javascript to do everything else it would just be easier to use it for that as well. You can make an element draggable in css in Chromium-based browsers like Vivaldi with -webkit-app-region: drag;

If you're having issues using the border to resize the window, I can't reproduce that here.

enc0re

@Tiamarth First sentence is right. I would like to drag window from the border.

I don't have issues with resizing window, or draging from tab bar. When there is no border enabled, I can just blindly move mouse up and then drag window. But with border enabled, there is 1px dead zone, and I have to carefuly move cursor 1px down, below that border. I hope its clear now.

Tiamarth

@enc0re Oh, I see now. You must be using some css different from the css I provided here, as you wouldn't have that issue with the css I wrote.

#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

See, this defines the border for each side of the browser independently from each other so that it's possible to remove the border from the top of the window, allowing for the possibility to drag it.

enc0re

@Tiamarth Yea, I didn't miswatched your code, I just used one line command to set whole border. It seems that now only solution to me is your code, by not enabling top border. Anyway, thanks for helping.

bdot

Tiamarth

I've started taking care of this with padding instead, that way I don't have to define colours because it just automatically inherits the window's colour.

#browser {
    padding-top: 0;
    padding-right: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
}

And this will remove the padding in maximized and fullscreen windows:

#browser.maximized,#browser.fullscreen {padding: 0;}

bdot

Thanks guys. I was able to get it to work with the CSS file.... that was until an Vivaldi Update came down the pipe today and erased it so I am having to re-write it again.

bdot

@dLeon I put them in the folder where Vivaldi is located. When it updated, it made a new version folder and deleted all the settings.
Looks like I'll have to do that every time Vivaldi updates which is quite frequently.

Tiamarth

@bdot Just for the sake of total clarity, this is how you should be using custom css:

In resources/vivaldi/style/ create custom.css

Open custom.css with a text editor and write the css you plan on using. In this case, paste the following css:

 #browser {
     padding-top: 0;
     padding-right: 1px;
     padding-bottom: 1px;
     padding-left: 1px;
 }

#browser.maximized,#browser.fullscreen {padding: 0;}

Open resources/vivaldi/browser.html in a text editor and add the following to <head>
<link rel="stylesheet" href="style/custom.css" />
Restart Vivaldi.

You will need to edit browser.html whenever Vivaldi updates because it gets overwritten. You shouldn't need to rewrite your css, because custom.css should not get overwritten.

enc0re

@Tiamarth Seems, that this way of defining custom.css is not aplicable anymore. Today I updated to new snapshot, and custom.css was gone :(.

Ayespy

@enc0re Custom CSS is always wiped when you update. You have to back it up. It's a hack - not supported by Vivaldi.

Well, to be more accurate, I think the custom CSS may remain, but you have to re-state the code line that references it.

luetage

@Ayespy The custom.css file does not remain. On update the whole application is being replaced with the new version.

luetage

@enc0re https://forum.vivaldi.net/topic/10549/modding-vivaldi/
We have a thread and forum board for any issues concerning custom modifications.

Ayespy

@luetage Thanks for clearing that up.

enc0re

Does anyone knows how to enable border for Settings window? I only figured out yet border around content:
0_1511723556253_9dd85ae1-0451-4e49-abf4-c683dc62a08f-image.png