Category: How-to

This is in answer to Stuart Langridge’s question about how the XFCE theme Prelude can be ported to Metacity.  Here is a quick attempt at porting it; I’ll be referring to that in what follows.  In order to install this theme for yourself, do:

• mkdir -p ~/.themes/Prelude/metacity-1
• wget -O ~/.themes/Prelude/metacity-1/metacity-theme-1.xml http://www.gnome.org/~tthurman/pics/metacity/Prelude.xml

I’m not talking about SVG here, because that’s still an experimental technology within Metacity, and I’m not talking much about version 2 of the theme format for simplicity.

We begin with the metadata, which isn’t unusual enough to explain.  Next comes the geometry, which is the key to the whole business: we only have the one, and it has rounded corners and no title.  We have to mark that there’s no title or Metacity will make space for one even though there’s no instruction to draw it.  If we were making a v2 theme, we could specify the degree of rounding, but v1 only allows you to say whether or not rounding is happening on each corner.

After the geometry we declare some draw_ops.  These are lists of instructions about how to draw each item.  All the draw_ops here are simply coloured rectangles.  One of them, “white”, is to draw the whole background of the window, but the entries for buttons stop slightly short in order to give the impression of gaps between the buttons but to leave the gaps clickable.  We declare the button colours twice in order to have a slightly lit-up version for the prelight.

I added a blue button for the menu button, but if you wanted you could use “white” there and have the menu button present but invisible.  In v2 you would need to declare three other button colours, which could get confusing.

Next, we only have one frame_style and it only draws one piece.  The differences between all the possible pieces can get confusing, but here we only wish to draw an enormous white rectangle over the whole window surface, and so we can use the “entire_background” piece and be done with it.

Then we have a frame_style_set which points in all cases to the one frame_style, and after that we simply declare that each window uses this one frame_style_set.  And there we have it.

There are many possible improvements, including dimming the button colours when a window isn’t focussed, and perhaps using the colours from the desktop theme instead of white all the time.

Edit: Stuart has tweaked the theme a little and uploaded it to gnome-look here.

It was said that Metacity doesn’t let you decide whether titles of windows are left-justified (as in modern versions of MS Windows) or centre-justified (as on the Mac). But actually, it’s a theme issue to decide how a title is drawn. Here’s how to change your theme from centre-justified to left-justified.

First, find out what theme you’re using. We’ll use gconftool to do this, because it’s the easiest to demonstrate.

$ gconftool -g /apps/metacity/general/theme
Human

Okay, so we’re using Ubuntu’s Human theme here (you may well be using something else, of course; substitute its name for Human in what follows). Presumably you don’t want to work on the main system version of the theme, so take a personal copy and tell Metacity to use it:

$ cp -R /usr/share/themes/Human ~/.themes/LeftHuman
$ gconftool --type=string -s /apps/metacity/general/theme LeftHuman

It will switch to the new theme, but obviously it will look identical at present.

Unfortunately, as I mentioned the other day, there’s no fancy editor for Metacity theme files: you’ll have to edit the file by hand. But it only needs to be done once. So, open ~/.themes/LeftHuman/metacity-1/metacity-theme-1.xml in your favourite editor and search for <title (“title” preceded by a less-than sign, i.e. the opening of a “title” tag in XML). You will see that any of these you find have a formula for their x attribute that involves taking widths and halving them, which screams about centring. All you have to do is change this formula to zero for all the title tags in the file.

However, in the Ubuntu Human theme they obtain a shadow effect on the letters by printing the title multiple times at different tiny offsets. For cases like these, you need to keep the offsets in order to keep the shadow effect. So you’d change
<title color="shade/gtk:bg[SELECTED]/0.75"
x="(3 `max` (width-title_width)) / 2 + 1"
y="(((height - title_height) / 2) `max` 0) + 2"/>
<title color="shade/gtk:bg[SELECTED]/0.7"
x="(3 `max` (width-title_width)) / 2 + 2"
y="(((height - title_height) / 2) `max` 0) + 2"/>
<title color="shade/gtk:bg[SELECTED]/0.4"
x="(3 `max` (width-title_width)) / 2 + 1"
y="(((height - title_height) / 2) `max` 0) + 1"/>
<title color="#ffffff"
x="(3 `max` (width-title_width)) / 2"
y="(((height - title_height) / 2) `max` 0)"/>

to:

<title color="shade/gtk:bg[SELECTED]/0.75"
x="1"
y="(((height - title_height) / 2) `max` 0) + 2"/>
<title color="shade/gtk:bg[SELECTED]/0.7"
x="2"
y="(((height - title_height) / 2) `max` 0) + 2"/>
<title color="shade/gtk:bg[SELECTED]/0.4"
x="1"
y="(((height - title_height) / 2) `max` 0) + 1"/>
<title color="#ffffff"
x="0"
y="(((height - title_height) / 2) `max` 0)"/>

and so on throughout the file.

When you’re done:

$ metacity-message reload-theme

and presto!

You might say that this is a lot of work compared to just selecting a “left justify” button somewhere, and it is, but assuming your original theme file was free software, you can distribute derivatives of it. So you should feel free to give your new left-justified version to your friends or stick it up on the web somewhere. Don’t forget to add your name and copyright in the <info> section first.