[SOLVED] How can I change windows buttons?



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



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



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


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

    file.png


    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 EditXML Editor

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

    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 PathObject to Path and any strokes (outlines) to paths with PathStroke to Path.

    3.c. Then you need to go through and do PathCombine 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:
    single-path.png


    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:

    precision.gif

    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.

    markup.png


    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:

    too-small.png

    Even with removing the padding, it was still small:

    still-smallish.png

    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:
    just-right.png

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


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



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



  • @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).
    Screenshot_2020-08-07-16-33-07.png
    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...



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



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



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

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



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


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


Log in to reply
 

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