Border around browser window?

areacode514

Hello, How can I make a border display around Vivaldi browser windows? (I am using Windows 10.) I don't want to activate "Use Native Window" under Window Appearance settings, but I am hoping there is a way to simply have a small border display around Vivaldi. Hopefully the screenshots will help to better understand what I would like to try to achieve. Thanks!

MODEDIT: Fixed the syntax for attached images.

areacode514

Thank you! I'll go check out that link.

Lucius

Despite I can't look at your images, I think it is just the feature I too would like to have.
Just a black (or colored as the theme) line of 1 pixel width around Vivaldi-window.

enc0re

I hate borderless window as well. You can enable border by editing Vivaldi\Application\1.10.845.3\resources\vivaldi\style\common.css

At the end of file add:

#browser {
	border: 1px solid #999 !important;
}

This will make border. But you can't drag window from that border. I do not know what code to add to be dragable. But after every update of Vivaldi, you have to edit that file again.

alexantr

With enabled "Native Window" native titlebar shows too. And it reduces useful height.
I want to see only native border like in last Opera 45.

LonM

@enc0re to make it draggable, it may be because its not applied to the outermost element, so:

body { border: 1px solid var(--colorAccentBg)}

works for me.

Post edited to allow for custom colour vars: you can use any of the colours set as variables by vivaldi.

LonM

@raed Here's the code which was introduced in one of the snapshots that does this (it got removed from final because reasons ).

I've modified it slightly to always show a border regardless of focus state and windows version, and have it follow the UI accent.

If you don't like that colour, just change var(--whatever) to:

a different variable (var(--colorHighlightBg) was the default)
a colour name like violet
the #abc123 hex value of your choice.

Note that

The first section is when the browser is focused and not maximised
The second section is when the browser is not focused and not maximised

#browser.win.normal:not(.native):after {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--colorAccentBg);
}
#browser.win.normal:not(.native).isblurred:after {
  border-color:var(--colorAccentFgFaded);
}

LonM

@raed What OS do you use?

LonM

@raed I can't imagine why it wouldn't be working - unless on windows 8 the browser has different classes set. (I'm using windows 10)

iAN CooG

@lonm this works for me in win7 32bit, Vivaldi 1.15.1111.3

slausage

This post is a bit old, but hopefully this helps someone. Add the following CSS to the beginning of your common.css file (located at Vivaldi\Application[version]\resources\vivaldi\style\common.css):

#browser.win:not(.fullscreen){
  border: 1px solid var(--colorAccentBg);
}

This tells Vivaldi to apply a 1 pixel border based on your current accent color whenever the window is not fullscreen (i.e. maximized).

Vivipop

@slausage

Thanks for the info. I shut down Vivaldi and used Notepad to add the line of code you showed to the very top of the common.css file (above the "focus debug" comment line). It gives me the outline I wanted in Win 10 64-bit.

I only wonder if I'll have to redo this with each new version of Vivaldi...? Will find out soon enough.

slausage

@Vivipop From experience, yes, you will need to do this for every version, unfortunately. Not sure if there's a way to make it persistent, but I don't think there is. womp womp

mib2berlin

@Vivipop
Hi, you can activate "Allow for using CSS modifications" in:
vivaldi://experiments/
Create a file "custom.css" with the CSS code in a folder of your choice outside Vivaldi and place it there.
Vivaldi does/can not overwrite it during update.

Cheers, mib

slausage

@mib2berlin Thanks! Very helpful

Vivipop

@mib2berlin

Thanks here too; will try the alternate css location.

Incidentally I found that using the Accent color for a border doesn't stand out where two Tab panels overlap (two Vivaldi windows open). So I now use the following line in css which gives a standard Windows border:

#browser.win:not(.fullscreen){ border: 2px solid var(--colorBorder);}

This really ought to be the default IMHO. Then no workarounds needed and I can't think why anyone wouldn't want a border...

Vivipop

In vivaldi://experiments I enabled CSS Modifications.

Then I created a file "custom.css" which contains the single line:

#browser.win:not(.fullscreen){ border: 2px solid var(--colorBorder);}

I placed this file in C:\Users\(my name)\AppData\Local\Vivaldi\Application

Then in vivaldi://settings/appearance under Custom UI Modifications I entered the above path to where I had put the custom.css file.

That works - now I get the desired border, which I expect will survive Vivaldi updates.

Vivaldi should default to having a border.

mib2berlin

@Vivipop
Hi and fine, I would not place the file in a Vivaldi directory, it will possible deleted when you update Vivaldi. (Not tested)
I put all my custom files to a save place.

Cheers, mib

Vivipop

Yeah, I didn't understand your original directions. So I created this folder and put the custom.css file in it, where it will be safe:

C:\Users\(my name)\AppData\Local\Vivaldi Custom CSS

Then in vivaldi://settings/appearance under Custom UI Modifications I entered the above path.

Thanks for the help.

slausage

FYI, after a version update a while back, the border was showing up around both maximized and floating windows. Personally, I only want a border around floating windows (not maximized), and I found that in the custom CSS file, an explicit statement was needed telling the browser to remove the border when maximized/fullscreen. This is my custom CSS for the latest version of Vivaldi, which is giving me the intended behavior as described above:

#browser.win:not(.fullscreen){
    border: 1px solid var(--colorAccentBg);
}

#browser.win.maximized,
#browser.win.fullscreen {
  padding: 0;
  border-width: 0;
}