[SOLVED] How can I change windows buttons?

burbuja

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

A Former User

@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

burbuja

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

mehrad

Thanks for your replies this is exactly what I wanted.

nikolamar

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.

Pesala

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

A Former User

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

Sadi58

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.

luetage

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

Sadi58

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

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

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

mib2berlin

@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

luetage

@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

A Former User

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

Sadi58

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

A Former User

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

Sadi58

@potmeklecbohdan
Thanks!
I have no CSS skills, apart from reading a little on the internet to make some minor tweaks here and there.
I'm finally getting these window control buttons right thanks to your help here - much appreciated.
As I don't have the breeze theme icons in svg format, I draw it in Inkscape, and get converted here: https://yoksel.github.io/url-encoder/
I see that this looks quite dirty but I don't know an easier way...

Sadi58

I have this code block working, but I've just noticed that this only places my custom icons on top of the default ones.

.window-buttongroup .window-maximize {
background-image: url("data:image/svg+xml, ........... );
	background-repeat: no-repeat;
	width: 18px !important;
	height: 18px !important;
}

It seems I need to somehow get rid of those default ones in order to have the customs ones displayed properly.

nomadic

@Sadi58 Here is the process I go through when replacing an SVG component of the UI:

Steps are for single color SVGs

A suggestion for multiple color SVGs is at the bottom.

1. Inspect to find the SVG and then copy the element by right clicking on it

2. Create a new text file, paste the SVG element inside it, and then change the file extension to .svg

3. Open the file in Inkscape and make the changes I want, but make sure to combine everything into a single path. You can check this in Inkscape by going to Edit → XML Editor

Here is what it shouldn't look like (multiple paths = bad):

3.a. To fix this, you need to first ungroup everything.

3.b. Then you need to convert any objects (shapes/text/fill) to paths with Path → Object to Path and any strokes (outlines) to paths with Path → Stroke to Path.

3.c. Then you need to go through and do Path → Combine to each path until you are left with a single path left. Be careful, sometimes the order you combine things can alter how the SVG looks.

It should look something like this:

4. Then after saving it, I go to https://jakearchibald.github.io/svgomg/ to help condense and clean up the svg path value. This step only really helps to make a cleaner CSS file and isn't strictly necessary.

4.a. You just need to click Open SVG and select the SVG you just created to load it in. You can zoom with the scroll wheel to get a better look at the SVG.

4.b. Then the only thing you really need to mess with is the precision slider on the right. You just need to go as low as possible without the end result getting mangled by simplification:

4.c. Then you can go to the Markup Tab at the top and select only the contents of the d attribute in the path tag and copy it. If you see more than one path or groups at this stage, you didn't combine everything properly in step 3.

5. You can then make the actual CSS style that will replace the SVG. Going back to the Dev Tools Window we used in step 1, we can make a CSS selector to modify the correct part of the interface.

5.a. The HTML for the Close button looks like this:

<button tabindex="-1" class="window-close">
   <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
      <path d="M10.2.5l-.7-.7L5 4.3.5-.2l-.7.7L4.3 5-.2 9.5l.7.7L5 5.7l4.5 4.5.7-.7L5.7 5"></path>
   </svg>
</button>

We can use the class from the button because it is very specific to the Close button, and then get the part of the button we want to change, the path of the SVG, so we get something like this:

.window-close svg path {}

5.b. Then we can change the d attribute of the path by adding this:

.window-close svg path {
   d: path("");
}

5.c. Finally, we just need to paste the d attribute from the path we copied in step 4.c.

.window-close svg path {
   d: path("M5.31 3.674a.322.322 0 01-.322.321.322.322 0 01-.322-.321.322.322 0 01.322-.322.322.322 0 01.323.322M4.204 2.093c.219-.317.454-.643.79-.846.33.198.563.519.779.83.509.768.82 1.692.757 2.62.164.137.334.27.496.41a.947.947 0 01.285.855c-.078.39-.153.782-.236 1.171-.046.2-.318.292-.477.164-.266-.22-.524-.45-.79-.67a1.19 1.19 0 01-.746.336 1.184 1.184 0 01-.875-.329c-.19.146-.367.32-.553.476-.09.072-.164.166-.27.215-.165.071-.378-.034-.415-.211-.085-.38-.173-.76-.256-1.142a.945.945 0 01.301-.89c.144-.121.29-.24.438-.357.04-.022.02-.071.022-.108-.043-.895.263-1.78.75-2.524zm.26 1.18a.66.66 0 101.058.786.66.66 0 00-1.058-.787zm-.352 4.16c-.004-.112.137-.189.231-.13.401.206.9.206 1.3 0 .092-.056.228.012.232.121v.716c.002.116-.152.19-.243.118-.069-.061-.131-.13-.197-.193-.105.204-.204.411-.31.615-.051.097-.21.097-.262.001-.106-.204-.204-.412-.311-.616-.066.064-.128.132-.197.193-.09.073-.244-.003-.243-.118-.002-.236 0-.471 0-.706z");
}

After saving the custom.css file and restarting the browser, we should see the icon replaced. I left too much padding in my original SVG file, so it came out pretty small:

Even with removing the padding, it was still small:

So I just added some additional CSS to make it slightly bigger and shift it down slightly:

.window-close svg {
  height: 16px;
  width: 16px;
  margin-top: 3px;
}

Then it was perfect:

The final code:

.window-close svg path {
  d: path(
    "M5.4 3.29a.416.415 0 01-.415.414.416.415 0 01-.416-.415.416.415 0 01.416-.415.416.415 0 01.416.415M3.973 1.25C4.255.843 4.559.42 4.99.16c.426.255.727.669 1.006 1.07.656.991 1.058 2.183.977 3.38.212.177.43.348.64.529.3.275.44.704.367 1.102-.1.504-.197 1.01-.304 1.512-.06.258-.41.377-.616.211-.342-.284-.676-.58-1.018-.865a1.535 1.535 0 01-.964.434c-.415.03-.827-.143-1.128-.424-.245.188-.473.413-.713.614-.116.092-.212.215-.35.278-.212.091-.486-.045-.534-.273-.11-.491-.224-.981-.33-1.473-.086-.417.067-.87.388-1.149.186-.156.375-.308.565-.46.053-.028.026-.092.029-.139-.057-1.155.34-2.297.967-3.256zm.335 1.522A.85.85 0 005.58 3.894a.85.85 0 00-.5-1.46.854.854 0 00-.77.337zM3.854 8.14c-.004-.144.177-.244.299-.167.517.265 1.16.265 1.677 0 .118-.073.294.014.298.155.002.308.003.616 0 .923.003.15-.196.246-.312.152-.09-.078-.17-.166-.255-.248-.136.263-.263.53-.4.793-.066.125-.27.126-.337.002-.138-.263-.264-.532-.402-.795-.085.083-.165.17-.254.249-.117.094-.315-.003-.313-.153-.003-.303-.001-.607 0-.91z"
  );
}

.window-close svg {
  height: 16px;
  width: 16px;
  margin-top: 3px;
}

Multi-Color SVGs

If you want an SVG with multiple colors, then you could do the method you currently have with a background image and set the original SVG to display: none;.

.window-close svg {
   display: none;
}

.window-close {
   background-image: url("data:image/svg+xml, ........... ");
   background-repeat: no-repeat;
   width: 18px !important;
   height: 18px !important;
}

luetage

@potmeklecbohdan The image won’t automatically change colors depending on theme used. That’s the only downside, but a considerable one.

A Former User

@luetage In case of window buttons single-coloured images may be desirable to fit the theme perfectly. Of course you can adjust Vivaldi’s theme, and a fixed-colour effect can also be achieved by setting fill or stroke.

[SOLVED] How can I change windows buttons?

**Steps are for single color SVGs**

Steps are for single color SVGs