[SOLVED] How can I change windows buttons?

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.

Sadi58

@nomadic
Thank you so much!
I've made considerable progress in mimicing my system theme (I think I can live without hover effects etc. lost along the way).

I carefully tried following the steps for single color SVG above (which would be a better solution for minimize and maximize buttons) but somehow it didn't work. That tool didn't even display my original file. So I had to use the code for multicolor SVG.

Now I'm trying to figure out a way to add restore/unmaximize button...

A Former User

@Sadi58 From my old mod it seems like the SVG contains two gs, .window-maximize-glyph and .window-restore-glyph, which themselves contain the paths.

Just for inspiration, I’m linking the mod.

Sadi58

@potmeklecbohdan
Thanks!
So far I've made progress by following the multicolor SVG solution (e.g. .window-buttongroup .window-minimize { background-image: url("data:image/svg+xml, ... ); }), but it seems I have to use the single color SVG solution in your old mod - at least for the maximize/restore button.
However, somehow I could not manage it in spite of the clear, step-by-step guide here.
For instance, I've got this far for the minimize button:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M.748 3.817C4.89 8.645 4.91 8.645 4.91 8.645L9.273 3.78 4.891 8.645z" fill="none" stroke="#fff" stroke-width="1.428"/></svg>

However, this doesn't work:

.window-buttongroup .window-minimize svg path {
	d: path("M.748 3.817C4.89 8.645 4.91 8.645 4.91 8.645L9.273 3.78 4.891 8.645z");
}

Although this works:

.window-minimize {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M.748 3.817C4.89 8.645 4.91 8.645 4.91 8.645L9.273 3.78 4.891 8.645z' fill='none' stroke='%23fff' stroke-width='1.428'/%3E%3C/svg%3E");
}

I'm now trying to figure out what I'm missing here when copying the svg path or in the svg itself. Maybe it's about the way I used Inkscape (stroke) to draw the image...

luetage

@Sadi58 Your path has an error. Look it up in the inspector.

Screenshot from 2020-08-08 11-46-42.png

Sadi58

@luetage
Thanks, but I don't understand how come my path ("M.748 3.817C4.89 8.645 4.91 8.645 4.91 8.645L9.273 3.78 4.891 8.645z") became "M1 7h8v2H1z".

So far, I think I've managed to create a fairly good replica of KDE's default Breeze window control buttons (with only one exception: restore/unmaximize button) thanks to the wonderful guidance I've received here - as can be seen here showing the windows of Dolphin file manager and Vivaldi together.
ezgif.com-crop.gif
Code:

/******** Window control buttons KDE Breeze ********/

.window-close svg,
.window-maximize svg,
.window-minimize svg {
	display: none;
}

.window-close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 6.878 5.82'%3E%3Cellipse ry='2.218' rx='2.211' cy='2.903' cx='3.436' fill='%23fff' stroke='%23fff' stroke-width='.202'/%3E%3Cpath d='M2.236 1.592l2.337 2.45z' fill='none' stroke='%23000' stroke-width='.226'/%3E%3Cpath d='M2.248 4.023l2.336-2.416z' stroke='%23000000' stroke-width='.224'/%3E%3Cpath fill='none' d='M.235.202h6.464v5.457H.235z'/%3E%3C/svg%3E");
}
.window-buttongroup button.window-close:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 6.878 5.82'%3E%3Cellipse ry='2.218' rx='2.211' cy='2.903' cx='3.436' fill='%23f50' stroke='%23f50' stroke-width='.202'/%3E%3Cpath d='M2.236 1.592l2.337 2.45z' fill='none' stroke='%23000' stroke-width='.226'/%3E%3Cpath d='M2.248 4.023l2.336-2.416z' stroke='%23010000' stroke-width='.224'/%3E%3Cpath fill='none' d='M.235.202h6.464v5.457H.235z'/%3E%3C/svg%3E%0A");
}

.window-maximize {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 6.878 5.82'%3E%3Cpath fill='none' d='M.235.202h6.464v5.457H.235z'/%3E%3Cpath d='M4.455 3.5c-1.096-1.277-1.1-1.277-1.1-1.277L2.2 3.51l1.16-1.287z' fill='none' stroke='%23fff' stroke-width='.378'/%3E%3C/svg%3E");
}
.window-buttongroup button.window-maximize:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 6.878 5.82'%3E%3Cellipse ry='2.218' rx='2.211' cy='2.903' cx='3.436' fill='%23fff' stroke='%23fff' stroke-width='.202'/%3E%3Cpath fill='none' d='M.235.202h6.464v5.457H.235z'/%3E%3Cpath d='M4.502 3.446c-1.096-1.277-1.1-1.277-1.1-1.277L2.247 3.456l1.16-1.287z' fill='none' stroke='%23000' stroke-width='.378'/%3E%3C/svg%3E");
}

.window-minimize {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 6.878 5.82'%3E%3Cpath fill='none' d='M.235.202h6.464v5.457H.235z'/%3E%3Cpath d='M2.263 2.295C3.36 3.572 3.364 3.572 3.364 3.572L4.52 2.285l-1.16 1.287z' fill='none' stroke='%23fff' stroke-width='.378'/%3E%3C/svg%3E");
}
.window-buttongroup button.window-minimize:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 6.878 5.82'%3E%3Cellipse ry='2.218' rx='2.211' cy='2.903' cx='3.436' fill='%23fff' stroke='%23fff' stroke-width='.202'/%3E%3Cpath fill='none' d='M.235.202h6.464v5.457H.235z'/%3E%3Cpath d='M2.266 2.265c1.097 1.277 1.101 1.277 1.101 1.277l1.156-1.287-1.16 1.287z' fill='none' stroke='%23000' stroke-width='.378'/%3E%3C/svg%3E");
}

nomadic

@Sadi58 Sorry, I forgot to include something in my step by step guide...Guess it has been awhile since I changed out an SVG.

You are correct, the stroke is the issue. You need to go to Path → Stroke to Path to convert strokes, Object to Path only works on shapes/text/objects(fill).

The final resulting SVG should not have a stroke-width property.

Here is what I got after using Stroke to Path:

<svg xmlns="http://www.w3.org/2000/svg" height="10" width="10"><path d="M8.74 3.3L4.91 7.56l-3.62-4.2-1.08.92 4.67 5.45.34-.38 4.58-5.1-1.06-.95z"/></svg>

I will edit the post to include the change. Sorry again.

[SOLVED] How can I change windows buttons?

**Steps are for single color SVGs**

Steps are for single color SVGs