Can I change the Minimise, Maximise and Close Window button size

I'm sorry for asking. I read the UM Guide, and searched here in the forum for answers. So bear with me if I have overlooked an entry that dealt already with this topic. Maybe I missed a keyword, as I'm one of these bloody Windows users that have changed the system.

I have only two issues left with my UM 18.04 B2 fully updated, and they are all about the same topic:
If I'm not happy with the Desktop theme, how do I change it.

I'm on a 1920x1080 px monitor. I have tried Auto in HiDPI however, it didn't make any difference. Maybe this is more a development question for the theme maker.

In screenshot below, you can see what I mean:

Issue one: The window icons on the top right side are quite small and narrow.
I read Can I hack the Window Control Button Size?
Issue I found is that the icons are made as PNG and have a fixed size. Even if I managed it to change the *.xml as mentioned in that entry, the icons would look blurry.

Issue 2: In Caja, the icons and the location names on the left are quite narrow and the icons and can't also be changed in size as far as I tried.

All together, I would prefer to use a theme that doesn't rely on bitmaps but vector icons.

If there is no solution, it's fine, I only wanted to ask if I missed something.

Many thanks in advance.

Hi Simone, there’s no need for you to apoligise. In fact, it is I who should say sorry, I’m unable to answer your question.

It looks like they have a wiki section in the forums so it shouldn’t be a problem for anybody if a particular problem is dealt with more than once, especially as time and technology “progress”.

So if someone replies with a good write up for tweaking a GTK theme, this may well deserve a place in that wiki and I thank you for your question.

Many thanks, Alif. In fact, I’m trying to figure out how to get another theme installed. I found a video on You Tube and an article here, but none of the ways worked.
I suppose I have to use a gtk3 theme or icon set, but I’m fully aware that the entire issue is related to a 1920 px monitor. When that laptop had Windows8 runing, the icons and fonts were also tiny. It’s by no means UM that I blame :slightly_smiling_face:

To get the benefits of the HiDPI setting in MATE Tweak, you have to set it to HiDPI. Since your issue is not that you have a HiDPI display, but that you have a smaller screen on your laptop with a high resolution, the Auto-detect setting appropriately leaves your display alone. If you were to manually select the HiDPI setting, it would double the size of everything, which is great on a HiDPI display, but makes things too large for a 1920 x 1080 laptop screen.

I’ve been dealing with the same issue on my laptop, which has a 15.6" display, but a 1920 x 1080 resolution, so my window controls are too small, too. I have managed to get most things re-sized by increasing the font sizes by three pixels and raising the DPI, but that doesn’t help with the window controls. It seems like what we need is something that provides incremental scaling instead of just regular or HiDPI, though I don’t know how difficult that would be to implement.

The other thing I’m wondering is if there are larger icons for the window controls for the HiDPI display that you could use instead of the ones for the regular display. Those could be scaled down without the blurriness you get when you scale an image up.

Thanks, linux4me, for the tip. It will be the thing I will try tomorrow morning. 1920 is a real stupid resolution, works good on telly, but on a laptop?

These resolution issues are the reason why the flat icons where introduced. They are not made of bitmaps but scalable.

I just tried HiDPI and understand what you mean. It’s not practicable.

It would be nice if it was simply a matter of creating some scalable images (SVGs) and plugging them into the theme somewhere. I tried converting the close.png to an SVG with Imagemagick, and then installed Inkscape and converted close.png to an SVG according to the instructions here, but the results aren’t very impressive once you scale the image up a bit. They’re still blurry.

I took a look at Ubuntu 18.04 and Kubuntu 18.04 to see how they handle the scaling issue on high-resolution/non-HiDPI laptops, and Ubuntu just has a 100% or 200% option for HiDPI, but nothing for us in-betweeners. KDE in Kubuntu has a progressive scaling feature in the Displays section of its settings that does scale the window control buttons, but it only seems to work for some apps. I think it’s working for the Qt apps, and not Gtk3 apps.

Maybe we need to build our own theme. :grinning:

I used to use the Opera, now Vivaldi, for these icon tests. The icons were 16x16px. The second trick is to get a certain line into a template to get it responsive. It works with websites like this if they are responsive. That’s why I took that text with the icon test out, realising that it makes not really sense. I have had a look into a theme to see the structure.
In other words, the current system can’t deliver this. Because that line is missing, that’s why your icon test and the HiDPI are blurry. Even if we did our own theme, it wouldn’t work in tge current stage.

I will get used to it.

1920x1080 isn’t usually considered to be “HiDPI”.
I see two things to try that don’t require hacking the theme.

  • If you don’t care about the resolution, try reducing it in the display settings
  • If your issue is with accessibility, there are three keyboard shortcuts corresponding to those three buttons: ALT+F9 to minimize, ALT+F10 to toggle maximized mode, ALT+F4 to close.

I haven't given up yet. :slight_smile:

It would take less tweaking of the theme if you just had larger versions of the current PNG images that are used for the buttons. It wouldn't be as nice as having vector graphics, but it would take less tweaking of the theme.

I used Imagemagick with adaptive-resize, which is supposed to reduce the blurriness of scaling up images, to scale the close.png image up to 39 x 39 pixels. (Its original size is 19 x 19.)

To my eyes, it doesn't look that blurry, and 39 x 39 is probably larger--and more blurry--than you will need. With larger images, you could do the hack described here, and perhaps have buttons to your liking.

I wrote the following bash script to make it easy to resize all the images in a folder, but before using it, note that it uses "mogrify" instead of "convert," so it's scaling the images and saving them to the same file names. You might want to create a backup before you run it:

#!/bin/sh
# How many pixels do you want to scale the PNGs?
echo "How many pixels should each PNG be scaled up?"
read scale
# Scale the PNGs.
for fname in `pwd`/*.png; do
  # Get the current dimensions of the image.
  width=$(convert $fname -ping -format "%w" info:)
  height=$(convert $fname -ping -format "%h" info:)
  newwidth=$(($width + $scale))
  newheight=$(($height + $scale))
  mogrify -adaptive-resize "${newwidth}x${newheight}" $fname
done

I will give a try in Virtualbox.

Crap! I just noticed that there are SVGs of the images in the /Unity folder for the Ambient Mate theme! :laughing:

I just copied the Ambiant-MATE theme to ~/.themes, renamed the folder to “Ambiant-MATE-Laptop,” then edited the file ~/.themes/Ambiant-MATE-Laptop/index.theme to this:

[Desktop Entry]
Type=X-GNOME-Metatheme
Name=Ambiant-MATE-Laptop
Comment=Ambiant MATE theme
Encoding=UTF-8

[X-GNOME-Metatheme]
GtkTheme=Ambiant-MATE-Laptop
MetacityTheme=Ambiant-MATE-Laptop
IconTheme=Ambiant-MATE
CursorTheme=mate
ButtonLayout=menu:minimize,maximize,close

I then ran the script to increase the size of the PNGs in the ~/.themes/Ambiant-MATE-Laptop/metacity-1 folder, and changed the button sizes in the ~/.themes/Ambiant-MATE-Laptop/metacity-1/metacity-theme-1.xml file. Once I used Appearance -> Themes to select my new Ambiant-MATE-Laptop theme, I had larger icons for the minimize, maximize, and close window buttons, and haven’t messed up the original theme.

1 Like

I’m late to this post, but I want to add a few things. First, GTK doesn’t do fractional scaling, unfortunately, so we’re stuck with 1x and 2x (technically we can do 3x, 4x, etc, but that seems pointless).

Also, if you’re using marco as your window manager, it still needs some fixes for window controls to render nicely on HiDPI, currently it just loads the png and converts it to a scaled pixbuf, which means that it will always be a bit blurry, regardless of the size (when compared with a straight up SVG). We would need to have larger resolution images and load them as vectors before scaling them. Not sure how Compiz deals with this, but I suspect that it has the same issue, as the images are still 19px, as you pointed out.

I think your approach of building a custom theme with larger images is the right thing to do at the moment. That’s really cool and I’m wondering if you’d be willing to share this theme as a tarball while Marco gets a proper fix in place.

Lastly, have your tried using regular resolution, instead of HiDPI, but then increasing the font DPI in the appearance font settings? Another possibility would be to change to a lower resolution, but your display might and up looking blurry that way… or some combination of lower resolution with tweaks to the font DPI…

2 Likes

Thumbs up :+1: @linux4me and @vkareh
I’m new and haven’t had time to see how the theme pick up generally works, is there a chance to get a theme to use the SVGs?
Additionally, @linux4me, if you use this now as your own theme in .themes, then you could create new, your own PNG buttons which are bigger like 48x48.

@Newhere - currently I think marco only supports pngs. But even if it did (or if it got fixed to do so), loading SVGs is slower and more resource-intensive than pngs. Typically you want to create pngs at various sizes and load only the size you need at the time. I think a single theme can contain multiple png sizes, but not entirely sure how to use those yet.

@vkareh, I’d be happy to share the theme I created as a tarball, but it looks like this Forum only allows jpg, jpeg, png, gif, ico, svg, xcfbz2, xcfgz. I put it on Google Drive if anyone wants to give it a try.

To use the theme, just download it from Google Drive, extract it to ~/.themes, then use Control Center -> Appearance -> Theme to select it (Ambient-MATE-Laptop) and it should increase the size of the buttons. It is built with the icons scaled up by 15 pixels. That may actually be too big. In that case, the script can be used to create the buttons for the theme exactly the size someone wants.

I have HiDPI set to “Auto-detect”, which doesn’t use HiDPI for the 1920 x 1080 native resolution on my 15.6" screen, have increased all the font sizes by 3 pixels, and set the DPI to 104. It works great.

@Newhere, I found that I only needed to increase the size of the images by 15 pixels so that the close.png, for example, is now 34 x 34 pixels, and that may be a bit large for me. I’m still getting used to it.

3 Likes

HI. Could you describe how to modify the 'metacity-theme-1.xml' file?

Hi, I applied diff command to get (view) differences between two files.
I Executed this (first file is the original, second file is the modified file by @linux4me user):

diff /usr/share/themes/Ambiant-MATE/metacity-1/metacity-theme-1.xml ~/.themes/Ambiant-MATE-Laptop/metacity-1/metacity-theme-1.xml

And I get this output:

19,20c19,20
<   <distance name="button_width" value="18"/>
<   <distance name="button_height" value="20"/>
---
>   <distance name="button_width" value="33"/>
>   <distance name="button_height" value="45"/>
32,33c32,33
<   <distance name="button_width" value="18"/>
<   <distance name="button_height" value="20"/>
---
>   <distance name="button_width" value="33"/>
>   <distance name="button_height" value="45"/>
271c271
<    <image filename="menu.png" x="0" y="1" width="19" height="19"/>
---
>    <image filename="menu.png" x="0" y="1" width="object_width" height="object_height"/>
274c274
<   <image filename="menu_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="menu_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
277c277
<   <image filename="menu.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="menu.png" x="0" y="1" width="object_width" height="object_height"/>
280c280
<   <image filename="menu_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="menu_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
283c283
<   <image filename="minimize_focused_normal.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="minimize_focused_normal.png" x="0" y="1" width="object_width" height="object_height"/>
286c286
<   <image filename="minimize_focused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="minimize_focused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
289c289
<   <image filename="minimize_focused_pressed.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="minimize_focused_pressed.png" x="0" y="1" width="object_width" height="object_height"/>
292c292
<   <image filename="minimize_unfocused.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="minimize_unfocused.png" x="0" y="1" width="object_width" height="object_height"/>
295c295
<   <image filename="minimize_unfocused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="minimize_unfocused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
298c298
<   <image filename="minimize.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="minimize.png" x="0" y="1" width="object_width" height="object_height"/>
301c301
<   <image filename="maximize_focused_normal.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="maximize_focused_normal.png" x="0" y="1" width="object_width" height="object_height"/>
304c304
<   <image filename="maximize_focused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="maximize_focused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
307c307
<   <image filename="maximize_focused_pressed.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="maximize_focused_pressed.png" x="0" y="1" width="object_width" height="object_height"/>
310c310
<   <image filename="maximize_unfocused.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="maximize_unfocused.png" x="0" y="1" width="object_width" height="object_height"/>
313c313
<   <image filename="maximize_unfocused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="maximize_unfocused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
316c316
<   <image filename="maximize.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="maximize.png" x="0" y="1" width="object_width" height="object_height"/>
319c319
<   <image filename="unmaximize_focused_normal.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="unmaximize_focused_normal.png" x="0" y="1" width="object_width" height="object_height"/>
322c322
<   <image filename="unmaximize_focused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="unmaximize_focused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
325c325
<   <image filename="unmaximize_focused_pressed.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="unmaximize_focused_pressed.png" x="0" y="1" width="object_width" height="object_height"/>
328c328
<   <image filename="unmaximize_unfocused.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="unmaximize_unfocused.png" x="0" y="1" width="object_width" height="object_height"/>
331c331
<   <image filename="unmaximize_unfocused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="unmaximize_unfocused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
334c334
<   <image filename="unmaximize.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="unmaximize.png" x="0" y="1" width="object_width" height="object_height"/>
337c337
<   <image filename="close_focused_normal.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="close_focused_normal.png" x="0" y="1" width="object_width" height="object_height"/>
340c340
<   <image filename="close_focused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="close_focused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
343c343
<   <image filename="close_focused_pressed.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="close_focused_pressed.png" x="0" y="1" width="object_width" height="object_height"/>
346c346
<   <image filename="close_unfocused.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="close_unfocused.png" x="0" y="1" width="object_width" height="object_height"/>
349c349
<   <image filename="close_unfocused_prelight.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="close_unfocused_prelight.png" x="0" y="1" width="object_width" height="object_height"/>
352c352
<   <image filename="close.png" x="0" y="1" width="19" height="19"/>
---
>   <image filename="close.png" x="0" y="1" width="object_width" height="object_height"/>

Note that second line is the text/values you need edit/set in your metacity-theme-1.xml file.
I hope this was useful for you!

Hi, buddies. I get the theme with buttons clear (not blurred) buttons.

You can download :arrow_down: here: https://drive.google.com/file/d/1MjiVNCM5vJyDmaevdkQC42Wr_d0v4DBp/view?usp=sharing.

Explanation, in case you want to replicate.

In Ubuntu MATE 20.04.4 the buttons (min, max close) come in 39x39px size.
So I've modified the theme following the steps written by @linux4me.

The easy way to replicate is just download and execute this bash script:arrow_down:. (I tested it in Ubuntu MATE 20.04)

The bash script code is:

#!/bin/bash
#author: Rogelio Prieto Alvarado
#20/august/2022

mytheme_name=Ambiant-MATE-Laptopv02
mkdir -p ~/.themes
cp -r /usr/share/themes/Ambiant-MATE ~/.themes/${mytheme_name}

#file: index.theme
#modify Name, Comment, GtkTheme and MetacityTheme in index.theme file.
sed -i "s/Name=.*/Name=${mytheme_name}/;s/Comment=.*/Comment=${mytheme_name}/;s/GtkTheme=.*/GtkTheme=${mytheme_name}/;s/MetacityTheme=.*/MetacityTheme=${mytheme_name}/;" ~/.themes/${mytheme_name}/index.theme

#file: metacity-theme-1.xml
#modify size in prelightlays: lines 271 to 352
sed -i '271,352 s/width=\"19\" height=\"19\"/width=\"object_width\" height=\"object_height\"/' ~/.themes/${mytheme_name}/metacity-1/metacity-theme-1.xml

#modify width distance between icons in general window layout (frame_geometry_normal and geometry_maximized)
sed -i 's/distance name=\"button_width\" value=\"18\"/distance name="button_width" value="34"/' ~/.themes/${mytheme_name}/metacity-1/metacity-theme-1.xml

#modify height distance between icons in general window layout (frame_geometry_normal and geometry_maximized)
sed -i 's/distance name="button_height" value="20"/distance name="button_height" value="45"/' ~/.themes/${mytheme_name}/metacity-1/metacity-theme-1.xml

The detailed explanation is here:
Steps:

  1. Set a new theme name
  2. Copy Ambiant theme to ~/.theme/ folder and rename it
  3. Modify index.theme file.
  4. Modify metacity.xml file.

Detailed steps:

  1. Define a variable with the new theme name:
mytheme_name=Ambiant-MATE-Laptopv02
  1. Copy Ambiant theme
mkdir -p ~/.themes
cp -r /usr/share/themes/Ambiant-MATE ~/.themes/${mytheme_name}```
  1. Modify index.theme file in lines 2,3,4 and 8,9 to specify theme's name.
    Use this command to -automatically- replace Name, Comment, GtkTheme, MetacityName:
sed -i "s/Name=.*/Name=${mytheme_name}/;s/Comment=.*/Comment=${mytheme_name}/;s/GtkTheme=.*/GtkTheme=${mytheme_name}/;s/MetacityTheme=.*/MetacityTheme=${mytheme_name}/;" ~/.themes/${mytheme_name}/index.theme

The file index.theme should be in this way:

[Desktop Entry]
Type=X-GNOME-Metatheme-Laptopv02
Name=Ambiant-MATE-BIG
Comment=Ambiant MATE BIG theme
Encoding=UTF-8

[X-GNOME-Metatheme]
GtkTheme=Ambiant-MATE-Laptopv02
MetacityTheme=Ambiant-Laptopv02
IconTheme=Ambiant-MATE
CursorTheme=mate
CursorSize=24
ButtonLayout=menu:minimize,maximize,close
  1. Modify metacity.xml file.
    First, modify button sizes in button prelightlays section modified.
    Search width="19" height="19"
    and replace by width="object_width" height="object_height"
    Execute this:
sed 170,252 s/width=\"19\" height=\"19\"/width=\"object_width\" height=\"object_height\"/g

Second, distance between buttons in frame_geometry_normal and geometry_maximized.
Search distance name="button_width" value="18"
and replace by distance name="button_width" value="35"\

Also, search distance name="button_height" value="20"
and replace by distance name="button_height" value="45"
Execute these commands:

sed 's/distance name=\"button_width\" value=\"18\"/distance name="button_width" value="35"/'
sed 's/distance name="button_height" value="20"/distance name="button_height" value="45"/'
  1. Finally use the new theme in System Settings -> Appearance.

Thanks :clap: to @linux4me for your effort to explain initial modifications!
That's all :nerd_face:.