Pensieri a mente libera: Metacity window manager: changing the window color border

Few months ago I started to use MATE [1] as desktop. I like it because it is simple and clean. My preferred theme is ClearLooks. Another setting that I adopt everywhere in linux is the so called mouseover window focusing coupled with the raise on click disabled.
Basically I like to work with windows even partially obscured. The focus has to be independent by the window placing.
To bring up a windows I (left) click on the title bar. To put back a window I have to middle-click the title bar.
Metacity, the default window manager of Mate, allows that and I am happy.
To work well I have to quick find the title bar. Unfortunately today the designers think that a title bar of an unfocused window is not an important thing, so its color is the same of the other GUI elements (like buttons)...
To solve this I had to make a small change to the theme file.
What I am describing here is valid for the Metacity window manager, and worked for Mate; but I suppose that it should work also for other desktop environments which use Metacity.
I started from the ClearLooks theme, but I suppose that the same applies for other themes too.

As first step I copied the theme in my home:
```
$ cd
$ mkdir .themes
$ cp -rf /usr/share/themes/ClearLooks .theme/ClearLooksGray
$ mv 
```
The name ClearLooksGray is an arbitrary name. Choice what you want.
Now you have to edit the file .theme/ClearLooksGray/index.theme. You will notice that most of the lines are like Name[<country code>]=<something> or Comment[<country code>]=<something>. For simplicity I removed all these line until I got:
```
[X-GNOME-Metatheme]
Name=ClearlooksGray
Type=X-GNOME-Metatheme
Comment=Attractive Usability
Encoding=UTF-8
GtkTheme=Clearlooks
MetacityTheme=ClearlooksGray
IconTheme=gnome
```
Basically I removed all the Name/Comment pairs in the different language and I leaved only the necessary ones. Then I update the Name and the MetacityTheme values to reflect the new name (ClearlooksGray).

Then I changed the file .themes/ClearLooksGray/metacity-1/metacity-theme-1.xml: inside the tag <info>, I update the tags:

name: changed the value in ClearLooksGray
authors: added my name
description: update the value to reflect the new name

Now the complex part. Inside the file you have to find a tag called <draw_ops name="bevel_unfocused">. This tag is responsible to drawing the unfocused title bar. Inside this tag there are the following lines:


        <gradient type="vertical" x="2" y="top_height/2" width="width-4" height="top_height/2-1">
                <color value="shade/gtk:bg[NORMAL]/0.93"/>
                <color value="shade/gtk:bg[NORMAL]/0.89"/>
        </gradient>
        <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                <color value="shade/gtk:bg[UNFOCUSED]/0.99"/>
                <color value="shade/gtk:bg[UNFOCUSED]/0.95"/>
        </gradient>

These have to be changed in:


        <gradient type="vertical" x="2" y="top_height/2" width="width-4" height="top_height/2-1">
                <color value="shade/#cccccc/0.93"/>
                <color value="shade/#cccccc/0.89"/>
        </gradient>
        <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                <color value="shade/#cccccc/0.99"/>
                <color value="shade/#cccccc/0.95"/>
        </gradient>

Basically I changed "gtk:bg[NORMAL]" in "#cccccc" and "gtk:bg[UNFOCUSED]" in "#cccccc". These changes have to be re-done also inside the tag:<draw_ops name="bevel_maximized_unfocused">. This tag is responsible to drawing the unfocused title bar for the maximized window. So the original code is:


        <gradient type="vertical" x="0" y="top_height/2" width="width" height="top_height/2-1">
                <color value="shade/gtk:bg[NORMAL]/0.93"/>
                <color value="shade/gtk:bg[NORMAL]/0.89"/>
        </gradient>
        <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                <color value="shade/gtk:bg[UNFOCUSED]/0.99"/>
                <color value="shade/gtk:bg[UNFOCUSED]/0.95"/>
        </gradient>

and ahve to changed in:


        <gradient type="vertical" x="0" y="top_height/2" width="width" height="top_height/2-1">
                <color value="shade/#cccccc/0.93"/>
                <color value="shade/#cccccc/0.89"/>
        </gradient>
        <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                <color value="shade/#cccccc/0.99"/>
                <color value="shade/#cccccc/0.95"/>
        </gradient>

#cccccc is the gray HTML color. You can choice a different color of course.

Below two screen shot which highlight the differences: the ClearLooksGray have a darker border that I like more.