The Athena Widget set

Almost every distribution of the X Window system comes with a wiget set called Xaw, aka Athena. This is just a "sample" widget set developed at MIT to illustrate the use of X, but it is still used in countless X11 clients. It's simple and lightweight, but doesn't look all that great without customization. This page documents the X resources I've used to hack the appearance of Athena.

Loading X Resources

To make writing X resources easier, you can use C preprocessor #define statements. This has the advantage of letting you generalize things, but the drawback of requiring you to load the resources with xrdb(1). For example, we will #define a constant called FONT at the top of the file, and give it the value of the font we want to use. Then we refer to FONT later on, so that if we change it, this will be updated everywhere in the file.

Starting our Customization

Most clients that use Athena start off with a white background and use the first font availible from the X server.

[screenshot of ugly clients]

To bring some order to this picture, we would like to define:

A font to use for basic widgets.
A color for the background area of the client.
A lighter text color for "informational" widgets.
A different color for buttons.
A nicer 3-D look for buttons.

We can use the C preprocessor to define these things once and then apply these values as necessary. First, let's create some colors:

#define TEXTBG                  gray90
#define PANELBG                 gray83
#define BUTTONBG                gray80
#define DARKBG                  gray50

These can be anything, really; my values are pretty boring. But since it's flexible, my little brother can just change these to neon orange and blue. :-) Now we need a list of widgets that's sorted into the right categories: one for TEXTBG, one for PANELBG, and one for BUTTONBG. Here it is:

*Box.background:                PANELBG
*Dialog.background:             PANELBG
*Form.background:               PANELBG
*Label.background:              PANELBG
*Paned.background:              PANELBG
*Panner.background:             PANELBG
*SimpleMenu.background:         PANELBG

*Command.background:            BUTTONBG
*MenuButton.background:         BUTTONBG
*Repeater.background:           BUTTONBG
*Toggle.background:             BUTTONBG
*Scrollbar.background:          BUTTONBG

*AsciiSink.background:          TEXTBG
*FontGrid.background:           TEXTBG
*Ghostview.background:          TEXTBG
*List.background:               TEXTBG
*Panner.foreground:             TEXTBG
*Porthole.background:           TEXTBG
*RgbSink.background:            TEXTBG
*RgbText.background:            TEXTBG
*ScrollByLine.background:       TEXTBG
*Text.background:               TEXTBG
*Tree.background:               TEXTBG
*Viewport.background:           TEXTBG

This accomplishes some of our goals; here's another look at xclipboard.

[xclipboard with colors]

Fonts

We've still got whatever our default font is, though, which isn't good. On my machine, it's been modified by the gsfonts-x11 package to look even worse than usual. :-) My personal favorite font is "lucidasans-10", which is also easy to remember. To pick other fonts, use the xfontsel program. First, let's see how to apply the font.

#define FONT                    lucidasans-10
#define BOLDFONT                lucidasans-bold-10
#define IFONT                   lucidasans-italic-10
#define MONOFONT                lucidasanstypewriter-12
#define MBFONT                  lucidasanstypewriter-bold-12

*AsciiSink.font:                FONT
*Command.font:                  FONT
*Label.font:                    FONT
*List.font:                     FONT
*MenuButton.font:               FONT
*RgbSink.font:                  MONOFONT
*SmeBSB.font:                   FONT
*Toggle.font:                   FONT

the last two are monospaced versions; you might want to use a Courier-like font. Here's xfontsel with our font set.

[xfontsel with fonts/colors]

Buttons and Widgets

Now, to improve buttons and such, we can make them 3-D. This is accomplished with Xaw3d, a replacement for the standard Xaw shared libraries. Check your distribution for information on how to install it (On Debian, you run the command "apt-get install xaw3dg"). It also uses a few resources.

If you don't do anything, Xaw3d's default behaviour is not to allocate any colors, but use a black or white stipple pattern to make the 3-D effect. Unless you are living in the Dark Ages with an 8-bit display, this is not very useful. The following resources are what I use to tweak Xaw3d:

*shapeStyle:                    Rectangle
*beNiceToColormap:              False
*topShadowContrast:             10
*bottomShadowContrast:          10

*shadowWidth:                   2
*borderWidth:                   1
*highlightThickness:            1
*Label.shadowWidth:             0
*Label.borderWidth:             0

However, this is the part of this page you will probably most want to tweak. A short explanation: "shapeStyle" gets rid of oval-shaped buttons. "beNiceToColormap" will get Xaw3d to use smooth color shading, and the two shadowContrast resources tweak just how those colors appear.

[client with all the tweakings]

The default button look is somewhat like Motif, which I don't really like. So I decided to tone down the shadow-contrast and use a border around all the buttons, something like what you see below. This is what you see below. The only problem with this is that it messes up Motif apps, but I hope to fix this.

To see more of what this should do, check out the aewm screenshot.

Adding it All Up

More details will hopefully be added later! For now, grab my X resources file and hack with it as you see fit. Please mail me with suggestions.