Border around browser window?



  • 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.



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



  • @areacode514
    Any luck fixing this? I cant use Native mode as it stuffs up the MoveGrid functions on my splitscreen
    Same issue on W7



  • 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.



  • 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.



  • 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.


  • Moderator

    @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.


  • Moderator

    @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);
    }
    

  • Moderator

    @raed What OS do you use?


  • Moderator

    @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)



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



  • 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).



  • @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.



  • @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 😕



  • @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



  • @mib2berlin Thanks! Very helpful 🙂



  • @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...



  • 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.



  • @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



  • 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.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.