[SOLVED] How can I change windows buttons?



  • Is there a way to replace those with other icon
    0_1540640111968_Screenshot_2.png


  • Moderator

    If you go to vivaldi://inspect, under apps you can inspect the UI. From here you can find the svg and selectors for the window buttons.

    To change them, you need to set a css rule as defined in this thread https://forum.vivaldi.net/topic/20227/changing-icons-with-css-part-ii?page=1



  • I have this one:

    #browser.win .window-buttongroup button.window-close {
    	width: 26px !important;
    }
    

    0_1540654699030_39622c4e-ffe6-4d24-9fd5-74aa2e40a037-image.png

    it makes it smaller - 26px

    Any idea how should look the close button like? I dont have any better.



  • I have these default paths and icons:
    Vivaldi window control buttons


  • Moderator

    @potmeklecbohdan No one can copy from a picture or type this code.
    Please copy the SVG code and set in in code fences here.



  • @gwen-dragon He does not need the default buttons either, right? He wants to change them. detective



  • @gwen-dragon They're default for Win7 so I can't test it but this code should work

    .window-buttongroup .window-minimize svg path {
      d: path("M1 7h8v2H1z");
    }
    .window-buttongroup .window-maximize svg .window-maximize-glyph path {
      d: path("M1 2h8v1H1V2zM0 1h10v1H0V1zm0 7h10v1H0V8zm0-6h1v6H0V2zm9 0h1v6H9V2z");
    }
    .window-buttongroup .window-maximize svg .window-restore-glyph path {
      d: path("M1 3h6v1H1V3zM0 2h8v1H0V2zm1 7h6v1H1V9zM0 3h1v7H0V3zm7 0h1v7H7V3zM2 0h8v1H2V0zm7 1h1v7H9V1z");
    }
    .window-buttongroup .window-close svg path {
      d: path("M1 1h2v1H1V1zm1 1h2v1H2V2zm4 0h2v1H6V2zm1-1h2v1H7V1zM3 3h4v1H3V3zm1 1h2v1H4V4zM3 5h4v1H3V5zM2 6h2v1H2V6zm4 0h2v1H6V6zm1 1h2v1H7V7zM1 7h2v1H1V7z");
    }
    

    Edit: for comparison:
    @mehrad's icons: win10 vivaldi window icons
    my icons: win7 vivaldi window icons



  • @potmeklecbohdan

    <svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 1h2v1H1V1zm1 1h2v1H2V2zm4 0h2v1H6V2zm1-1h2v1H7V1zM3 3h4v1H3V3zm1 1h2v1H4V4zM3 5h4v1H3V5zM2 6h2v1H2V6zm4 0h2v1H6V6zm1 1h2v1H7V7zM1 7h2v1H1V7z"></path>
    </svg>
    


  • Thanks for your replies this is exactly what I wanted.
    0_1540672175951_q.png



  • Is it possible to make the caption buttons (the close, restore down and maximise buttons) have an Aero style but without CSS or JavaScript editing? If you don't know what Aero is, it's the style for Windows 7 and Vista. I'm asking because I use Windows 7, and they look a bit off.
    Thanks.


  • Ambassador

    @nikolamar I moved your thread and merged it with this one as it seems to be the same question.



  • @nikolamar You can use default window, but you'd have tabbar, menu etc. one line lower. Or you can use CSS but you don't want it.



  • This is very interesting and tempting, but is this something users can do or are you talking about modifying the source code here?
    @LonM , as a (just above average-level) user who can manage some non-GUI customization, unfortunately I cannot understand exactly where and how to insert the code shown here by potmeklecbohdan to change the default window control buttons.
    For instance, when I go to vivaldi://inspect/#apps (disregarding the other ones for any open browser tabs) I see a check box followed by Vivaldi
    chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html and an Inspect link below it which opens a DevTools window with menu items: Elements, Console, etc.
    But I have no idea what to do here.
    Would be so grateful if I could have some guidance about this.
    And I hope Vivaldi will eventually offer an easier way of choosing window control buttons which will be compatible with the system-wide theme without choosing "Use Native Window" in Settings/Appearance that adds an extra titlebar on top of the browser window.



  • @Sadi58 It’s just a css modification. Please read the pinned topic https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1 carefully and follow instructions.

    What operating system are you using?



  • @luetage Thanks. I've finally understood modding Vivaldi better, but unfortunately I haven't made any progress regarding this specific goal (OS: Kubuntu 20.04).

    1. I opened vivaldi://experiments and enabled "Allow for using CSS modifications"
    2. I opened Appearance section in Settings and chose the folder I want to use, i.e. "$HOME/.config/vivaldi/Customization"
    3. I placed a file named "custom.css" which contains only the css code written by potmeklecbohdan above (for minimize, maximize, restore and close buttons)
    4. I restarted Vivaldi but didn't see any change.

    It seems I need to learn a couple of more tricks. 😉



  • @Sadi58
    Hi, just want to mention, you should use a different location for the .css files.
    I guess the file will be deleted after next Vivaldi update.
    Check with simple example if all work correctly.

    /**********Startpage transparent*******/
    
     .startpage-navigation {
        background-color: #111;
        opacity: 0.4;
        min-height: 30px !important;
    }
    
     .startpage .dial .thumbnail-image {
        background-color: transparent;
        opacity: 0.8;
    }
    

    Cheers, mib



  • @Sadi58 Let’s see if you got it installed. Enable ‘Debug packed apps’ in vivaldi://flags and restart browser. Right click on a button in the UI and click Inspect. The debugging tool will open, hit the Sources tab at top and on the left hand side expand vivaldi-data. In the css-mods folder the css file you created earlier should appear. If it isn’t there, something went wrong. Retrace your steps and redo the operation. Could be the experiment doesn’t work for you, then you should try to modify Vivaldi the old school way by copying the file into the application and modifying browser.html, as explained in the guide.

    Screenshot from 2020-08-06 16-31-38.png



  • @Sadi58 If you're using the exact path you wrote, this won't work. Vivaldi doesn't do any variable substitution or shell expansion and needs an absolute path, so it should look more like /home/anc/.config/vivaldi/Customization.

    Just to repeat the suggestions by @mib2berlin — first, try a simple mod that is known to work, and don't use this folder location. Although it shouldn't disappear after an update, it's a rather dangerous place.



  • @mib2berlin @potmeklecbohdan
    Thanks a lot ! I've changed the location, and have made the start page more beautiful with some transparency now! 🙂
    Actually, I've begun experimenting with this code pattern:

    .window-buttongroup .window-maximize {
    background-image: url("data:image/svg+xml, ........... );
    }
    

    I does seem to work, but it seems to be confined within the default rectangual area I've got. As I'm trying to use breeze theme icons here, the close button doesn't fit. I mean, if I make make it smaller, then it's repeated on the right, displaying part of a second one.



  • @Sadi58 You can

    • change background-repeat and similar properties
    • change the button's size

    (Also I don't know what's the point of using background-image and a data: SVG URL, but I guess it's easier for you.)


Log in to reply
 

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