Moving title bar buttons to the left

I always liked the Mac style of the buttons in the window title bar: LEFT.

Gnome (as well as KDE or XFCE) show them on the right of the window title by default.

Historically, Microsoft could not simply copy all of Macitoshs interface so they "invented something new". Buttons to minimize, maximize and close the window are shown on the right of the title bar.

OK, it's different, but on second thought, it is stupid as well. On a Mac (as on my Linux box) everything having to do with commands is in the top left corner (general menus, window menues, etc.). So why move the mouse to the far left of a page to manpulate window controls?

Cut a long monologue short: How to get the buttons from right to left?

gconf-editor

Search for the key:

/apps/metacity/general/button_layout

Replace the colon right to menu with a comma and place the colon at the end of the line. You can place the colon any place you want to separate left from right buttons.

I have done this on my machines and the theme now looks perfect.

Ubuntu Theme on Launchpad

I created a Launchpad project:

Austrian Ubuntu Theme (aut)

You'll find a tar.gz file there which you can install using the System / Preferences / Appearance control panel.

Feel free to experiment, comment and criticise.

Ubuntu Theme takes shape

As I struggle my way through the configuration files, GTK+ documentation and some source code, the Ubuntu Theme takes on shape.

I still have not found out how to distinguish between windows in the front (focused for Metacity) and the ones in the background (normal). Having a way to differentiate would allow for different coloring of widgets. This in turn would make for nice visual feedback.

Another issue I have to tackle with is figuring out the names of widgets in different applications. Not all of them are documented in the GTK documentation.

Finally my icons in the top panel grew all of a sudden from nice 28 px to 32px filling the whole panel. I have no clue what I did (acutally I think I did nothing, but that certainly is not the case). I would like to think this is due to errors in all the other themes.

Ideas anybody?

Trouble with gtkrc

Creating a Metacity window decoration was pretty straightforward. I have what I want. A smooth gray window title that dims when the window looses focus. When focused, it has a gradient look imitating a round vertical curve.

Here comes the catch.

Items in the window are controled by a file ~/.themes/mytheme/gtk-2.0/gtkrc. This file controls everything drawn inside the window -- buttons, menus, scrollbars - you name it.

Here is a basic gtkrc file:

###############################################################################
# default color scheme
###############################################################################
gtk_color_scheme = "fg_color:#202020\nbg_color:#D7D7D7\nbase_color:#FFFFFF\ntext_color:#202020\nselected_bg_color:#696986\nselected_fg_color:#FFFFFF\ntooltip_bg_color:#FCF6DE\ntooltip_fg_color:#202020\n"

###############################################################################
# default style
###############################################################################
style "default"
{
##################
# Color assignment
##################

fg[NORMAL] = @fg_color # Metacity and mouseover, Most text
fg[PRELIGHT] = @fg_color # Text when mouseover
fg[ACTIVE] = @fg_color # Text when mouseclicking button, Tabs, Active window list
fg[SELECTED] = @selected_fg_color # Metacity X when window selected
fg[INSENSITIVE] = darker(@bg_color) # Insensitive Text (in menus)

bg[NORMAL] = @bg_color # Normal Background, inactive Metacity bar, buttons
bg[PRELIGHT] = @bg_color # Mouseover buttons
bg[ACTIVE] = @bg_color # Mouseclicking, Tabs, active window list
bg[SELECTED] = @selected_bg_color # Metacity Bar
bg[INSENSITIVE] = @bg_color # Insensitive buttons

base[NORMAL] = @base_color # Background, most
base[PRELIGHT] = @base_color # Mouseover menu
base[ACTIVE] = @selected_bg_color # Menu active item in inactive window
base[SELECTED] = @selected_bg_color # Menu active item in active window
base[INSENSITIVE] = @bg_color # Background, insensitive

text[NORMAL] = @text_color # Text in window
text[PRELIGHT] = @text_color # Text on Mouseover
text[ACTIVE] = @selected_fg_color # Active text in inactive window
text[SELECTED] = @selected_fg_color # Active text in active window
text[INSENSITIVE] = @bg_color # Insensitive text

xthickness = 3
ythickness = 3

}
class "GtkWidget" style "default"

style "window" = "default"
{
bg[NORMAL] = shade(0.87,@bg_color)
}
class "GtkWindow" style "window"

style "menubar" = "default"
{
GtkMenuBar :: shadow-type = GTK_SHADOW_NONE
GtkToolbar :: shadow-type = GTK_SHADOW_NONE
bg[NORMAL] = shade(0.87,@bg_color)
}
class "GtkMenuBar" style "menubar"
class "GtkToolbar" style "menubar"

style "tooltip"
{
fg[NORMAL] = @tooltip_fg_color # required in order to set the gnome default colors right
bg[NORMAL] = @tooltip_bg_color
}
widget "gtk-tooltip*" style "tooltip"

Two problems with it:

1. It does not load when selected by the Appearance System panel.
2. (and this currently worries me more) I cannot lighten the window background when the window looses its focus.

I would like to change the color of the window interior when the window is in the background. This would allow for the window to visually vanish in the background.

Any hints?

Ubuntu Theme

I have done some research on the subject. And I have received lots of "good advice" Here are some results:

6 myths to go by

1. Theming Gnome is hard to do: Well, actually it is pretty easy, once you understand how Gnome displays its windows and widgets
2. There is no documentation around: It's true that the Gnome technical library is somewhat sparse, incomplete and sometimes error prone. However, there are some links to good documentation. And there is the source code of course.
3. Better modify an existing theme: This is a definitive NO NO as far as I am concerned. You most likely add more junk to the underlying theme, making it even more unusable.
4. There are no debugging tools around: While it is true that most tools advertised to be helpful are ancient and most likely not working properly, there are few tools that help you develop and test your theme (I will cover them later).
5. One can download everything from the web: There is art.gnome.org. And - yes - there are window themes, icon themes, wallpaper, logon themes and bootsplash screens. But this does not make for great design. What's missing is a thorough and complete design. That cannot be downloaded.
6. A good theme has to be better than Windows or Mac OSX: I'm afraid, the only thing a good theme can do is put Ubuntu / Linux on par with both former mentioned. Everything important was built into those GUIs and Linux mimics most of the style guides.

Some introductory material

This is a list of links that I found helpful:

Designing Metacity Themes - HOWTO
Understanding Metacity Themes
Metacity - Wikipedia, the free encyclopedia
GnomeArt/Tutorials
IconThemes
GtkThemes
GdmThemes
MetacityThemes
GtkEngines
Welcome | Murrine
Individuelle Metacity-Themen für GNOME
Understanding Metacity themes
Themes Blog
UsefulLinks

Useful tools

After experimenting with some tools that claim to help develop themes, I found these the most helpful:

• metacity-theme-viewer: this shows the window frames for all 6 window types
• metacity-window-demo: a tool to investigate gtkrc settings. It helps to optimize GTK layout
• gconftool-2 (actually gconftool-2 --type=string --set /apps/metacity/general/theme themename): sets and resets themes
• GTK_RC_FILES=~/.themes/mytheme/gtk-2.0/gtkrc Gnomeapp: this starts the gnome application with the corresponding gtkrc file. Helps to optimize GTK settings for applications and widgets.
• gtk-chtheme: a small utility to select themes and preview the GTK widgets. Currently I have not found a better tool.
  

These tools were useless:

• gtk-demo: even though it documents some of the widgets, it is outdated
• The Widget factory: acclaimed to be the tool of choice to present themes on art.gnome.org, this is nothing more than a showcase. Outdated
• gtk-theme-switch2: while not completely useless, it seems outdated. Some of the widgets are not shown (like scroll bars and handles). Use gtk-chtheme instead.
  

My first attempt in creating a theme was by (OK, I did it as well) copying a theme and modifying it to my needs. Unfortunately some of the code fragments did not make sense, so I developed a theme from scratch. It's not finished yet, but it is a starting point.

I will publish it on SourceForge when I have tested it more thoroughly.

I also plan to write a compendium in how to write your own theme and publish it under Creative Commons. This will take some time, but I keep up to it.

Comments are welcome, hints appreciated.

Theme Considerations

Here are my preferences:

I like my desktop to be bright and stimulating. I love a certain kind of blueish gray (or grayish blue as you like). The RGBs are #6B73A9.

I also like the aluminium decoration of the mac. It's clear, its clean and it does not distract from the task at hand. So probably brushed metal look will be nice.

I am not one to have a wild wallpaper desktop image. I prefer calm and quite abstract patterns. I get a kick out of mathematically motivated images.

Lets translate this into requirements:

• Windows are white or very light gray
• Borders are medium gray
• Menus and tool bars are same medium gray
  
• No separation lines between window title, menu bar and tool bars
• Windows in the background are darker than windows in the front
• Selections are my favorite gray-blue
• Information windows, tool tips and hints are a faint yellow
• Text is dark gray, not black (black is to hard on the eye)
• Window corners are rounded
• Tabs and panels should look like they are extruded a bit
• Firefox and Thunderbird have corresponding themes
• Icons are more photo realistic (however, harddrives do not have to look like the naked bare metal)
• Prefer XML definition to images (slower loading)
  

I know that not everyone shares my taste. I think that there should be two themes, one bright and one dark.

I also consider positioning the window buttons (max, min, close) on the top left side. This minimizes the way, you have to move the mouse.

Creating a theme for Ubuntu

Let's face it: Linux themes are pretty ugly. Ubuntu's default theme beats most of them. The brown and orange might remind Mark Shuttleworth of his origins. I will spare you the details of what it reminds ME of.

Tangerine, ClearLooks and all the other prepacked themes are no better.

Ubuntu 8.10 comes with a new theme: DarkRoom. It makes one increasingly sucidal.

I've tried some stock themes from art.gnome.org and gnome-looks.org. The results are sobering (On the right is the most appealing window decoration I found so far. It's called Almond and was last updated in 2006).

I envy Mac users for their simple, visually appealing and intuitive interface. It seems that neither Microsoft nor the whole Linux community can come up with something that can compare to Apples GUI.

Is it really so hard? To find out will create my own theme.

... the Austrian Ubuntu Theme (AUT) ...

Here is my plan:

1. Read into the subject: I have to understand how Gnome uses Metacity and rendering engines to draw the GUI.
   
2. Define how the theme should look like
   
3. Modify an existing theme to learn how things interact
4. Create raw minimal theme: I have to figure out what is minimally required
5. Resolve extras (Panels, awn)
6. Learn how icons work
7. Create a customized set of icons
8. Make a .deb installer to install the theme on any machine
9. Test on several machines runing Ubuntu (8.04.1 LTS and 8.10) and possibly Debian
10. Write a HOW-TO that covers more than the bare Gnome tutorial
    
11. Start a SourceForge project

I will post here regularly. Your recommendations are welcome.