Open Source

Example from Transparent theme

In this Daily Drill Down, Jack Wallen, Jr. delves into customizing the look and feel of the AfterStep window manager.


In this Daily Drill Down, I’ll examine AfterStep, my personal Linux window manager of choice. In previous Daily Drill Downs, we've looked at a basic customization (“Drilling into AfterStep, parts 1 and 2”) of the window manager, adding menu entries and using transparent terminals to create a custom look and feel. This time, however, I’ll attempt to dig a little deeper into the look and feel to further customize AfterStep to exact specifications.

You might wonder why you’d want to go through all the hassle of configuring the AfterStep window manager when most people are running popular desktop environments, such as GNOME and KDE. There’s one very simple reason: system resources. Both GNOME and KDE punish the systems resources, but not to the extent of, say, Microsoft Windows. By bypassing the desktop environment for a more resource-friendly (yet completely user-friendly and configurable) environment, you’ll find yourself with less resource-induced trauma.

In this Daily Drill Down, I’ll look at some of the more complex configurations and customizations, including handles, title bars, backgrounds, and look files. All these configurations require the hacking of specific scripts, so you'll want to make sure you back up your system (you don't want to trash your entire system now, do you?). You should also feel comfortable using one of the common text editors, like pico, vi, or Emacs.

Backing up your current AfterStep directory
The primary files I’ll discuss are housed in the /usr/share/afterstep directory and can be edited only by root. Because of the superuser requirement, you can infer that these will be global configurations and that they can, if poorly written or configured, completely break your window manager’s environment. So take heed! For these reasons, I’ll first offer you a simple backup plan that will keep you from drowning in a sea of your own sorrow (and prevent you from inadvertently reinstalling the entire OS, as well).

The first step in backing up the AfterStep configuration environment is to secure a method for storing and/or moving a 3.4-MB file. This file will be the entire /usr/share/afterstep directory tarred into one big file. This storing and/or moving can simply consist of copying the file into a separate directory, using FTP to transfer the file, or even copying it onto a Zip disk. However you wish to store the file, do so!

Once you've stored the file, it's time to create your backup. You need to su into root, cd into /usr/share, and run this command:
tar cf afterstep.tar afterstep

The above command will make an archive of your current AfterStep configuration directory. You’ll want to move this archive (called afterstep.tar) out of sight, in case your customization exploits render AfterStep useless.

Now that you have AfterStep backed up, it's time to get knee-deep in the big funky of AfterStep!

/usr/share/afterstep/database
The first configuration file we’ll play with is the /usr/share/afterstep/database file, which has nearly complete control over the aesthetic attributes of most applications running in AfterStep. The basic database file looks like this:
##########################################################################
# Windows styles:
#
# "WM_CLASS" is obtained from:
# 'Window Properties' under Windows in the (start)menu, or
# 'Ident' under Modules in the (start)menu.
# Style "WM_CLASS" [Icon name.xpm | NoIcon], NoTitle, Sticky,
# StaysOnTop, WindowListSkip, NoHandles, NoButtons #,
# StartsOnDesk #, ViewportX x, ViewportY y
# BorderWidth #, StartIconic, CirculateSkip,
# NoFocus, NoBorder (== BorderWidth 0),
# NoTitle, SuppressIcons, AvoidCover, VerticalTitle
# For all windows to have the NEW and COOL Vertical Title bar on the side:
#Style "*" VerticalTitle
Style "*" Icon interface.xpm
Style "Unknown" Icon Unknown.xpm
Style "Untitled*" Icon AfterStep3.xpm
Style "Wharf" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles, AvoidCover
Style "Zharf" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles, AvoidCover
Style "Banner" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "*Pager" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles, AvoidCover
Style "WinList" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles, AvoidCover
Style "*clock" StaysOnTop, WindowListSkip, NoHandles
Style "ghostview" Icon text.xpm
Style "gimp" Icon 3dpaint.xpm
Style "GIMP Startup" NoButton 1, NoButton 2, NoButton 3, NoButton 4
Style "*term" Icon Linux-penguin.xpm
Style "xcalc" Icon xcalc.xpm
Style "xli" Icon monalisa.xpm
Style "xman" Icon xman.xpm
Style "XMcd" Icon CDrom.xpm
Style "Popup menu*" Sticky, BorderWidth 3
Style "Alert*" Sticky, BorderWidth 4, StaysOnTop
Style "Question*" Sticky, BorderWidth 4, StaysOnTop
Style "XPlaycd*" Icon CDrom.xpm
Style "QPlayCD*" Icon CDrom2, NoTitle, Sticky, WindowListSkip, NoHandles
Style "kdeplay" Icon OldFashionedRadio.xpm
Style "kmidi" Icon OldFashionedRadio.xpm
Style "kmix" Icon OldFashionedRadio.xpm
Style "kmpg" Icon OldFashionedRadio.xpm
Style "XConsole" NoTitle, Sticky, WindowListSkip, NoHandles
Style "xconsole" NoTitle, Sticky, WindowListSkip, NoHandles
Style "wmppp" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "wmcdplay" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "Mixer.app" Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "asfsm" Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "wmmount" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "wmifs" Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "wmmail" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "wmmixer" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "wmrack" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "asload" NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles
Style "x11amp" Icon x11amp.xpm, NoTitle, NoHandles
Style "XFce*" NoTitle, Sticky, BorderWidth 4, WindowListSkip, NoHandles
Style "XFBD*" Sticky
Style "XPostit*" Icon Text.xpm
Style "xkhfm@Programs" NoTitle, Sticky, WindowListSkip
##########################################################################

Let’s see what this file does. A typical line from the database file looks like this:
Style "Wharf" NoTitle, Sticky, StaysOnTop, WindowListSkip,
NoHandles, AvoidCover


This line says that we’re going to apply the following styles to the Wharf: NoTitle, Sticky, StaysOnTop, WindowListSkip, NoHandles, and AvoidCover. So when the Wharf is on the desktop, it will not have a title; it will always be on the desktop; it will never be obstructed by another window; it won’t show up on the winlist (the horizontal bar across the top of the screen); it will have no resize handles; and it will have the highest priority as far as cover is concerned.
Here is a brief description of all the styles used in the AfterStep database:AvoidCover: Means that no other application (or decoration) will be able to cover whatever has this style.BorderWidth NUM: Specifies the width of the window border; it works only in conjunction with NoHandles. The NUM is user-defined.Focus/NoFocus: Determines whether the user will be able to interact with the window.Icon path/NoIcon: Specifies the icon shown when a window is iconified.Title/NoTitle: Specifies whether the title bar is visible.NoHandles/Handles: Determines whether a lower resize bar is used.WindowSkipList/WindowHitList: Specifies whether the window name shows up in the winlist.CirculateSkip/CirculateHit: Specifies whether the window should be skipped when the user is tabbing through windows.StaysOnTop/StaysPut/StaysOnBack: Specifies the window position relative to other windows. StayOnTop means that window will always stay above (covering) other windows. StaysOnBack means that it's always on the back (covered). StaysPut means it's neither (the default).Sticky/Slippery: Sticky means that the window will follow the desktop (when you switch between desktops, it will follow); Slippery means it will not.StartIconic/StartNormal: Specifies how the application should start (iconified or not).StartOnDesk number/StartAnyWhere: Tells an application on which desktop to start.ViewportX number: Specifies the X-coordinate where a window should be placed.ViewportY number: Specifies the Y-coordinate where a window should be placed.NoButton number/Button number: Specifically tells AfterStep to start an application without a certain button in the title bar or tells AfterStep to include the button in the title bar.SuppressIcons: Means that no icon will show up when the application is iconified.
It should be obvious that some of the above styles are either redundant or of little use. It must be noted, however, that all the styles have evolved out of necessity and serve a purpose. Yes, it is possible to work with a database that does not contain all of the above, but most of them will be covered.

One of the niftiest tricks in the database file is this line:
#Style "*" VerticalTitle

By removing the comment character (#) from the beginning of this line, you ensure that your title bars will be vertical instead of horizontal (running up and down the left side of the window as opposed to across the top).

You’ll notice that in some of the entries (like the example above) instead of naming an application, there is only an asterisk ( * ), which forces that particular style to be applied to all application windows. Use caution with this trick. If you place an * with the AvoidCover style, your AfterStep system could become confused with your toaster and start making your breakfast—not a pretty sight.

/usr/share/afterstep/looks
The next file I’ll examine is the look file. As you’d expect, the look file is responsible for the look of your window manager. You can make a great many configuration changes within this file. Many of these configurations are, in fact, subtle, and all are aesthetic. Nevertheless, they are worth exploring.

The look files are all located within /usr/share/afterstep/looks and can be edited only by root. A typical look file looks like this:
######################################################
# Look by Guylhem Aznar
#
#————————————————————————————————————
# Styles :
# If there is a style named "default" and no default style is specified,
# the "default" style will be used as the default.
# Inherited styles will override options.
# default should never be used, so let's make it obvious when it *is* used.
MyStyle "default"
 Font -*-helvetica-*-r-*-*-9-*-*-*-*-*-*-*
 ForeColor #ff2f3f
 BackColor #10ff10
 ~MyStyle
#—————Window MyStyles————-#
TitleButtonBalloons
TitleButtonBalloonBorderColor #111111
TitleButtonBalloonBorderWidth 2
TitleButtonBalloonDelay 200
MyStyle "TitleButtonBalloon"
 ForeColor #111111
 BackColor #bfbfbf
 Font -adobe-helvetica-medium-r-*-*-10-*-*-*-*-*-*-*
 ~MyStyle
MyStyle "focus_colors"
 ForeColor Grey50
 BackColor #000065
 MaxColors 128
 BackGradient 1 #000077 Sienna
 ~MyStyle
MyStyle "unfocus_colors"
 ForeColor Grey80
 BackColor Grey10
 MaxColors 128
 BackGradient 1 #0000DD #000010
 ~MyStyle

This, of course, is but a snippet of the code, which spans approximately three pages. This code is responsible for a great many items, but I’ll focus on the items most users will want to change: title bars and menus. The simplest change to make to the title bars and menus is the font color. You make this change by altering the color of the foreground or the background (or both). Let’s look at this sample snippet of code (taken from the Transparent theme, or /usr/share/afterstep/looks/look.Transparent.rev):
MyStyle "focus_colors"
 ForeColor green
 BackColor grey30
 BackPixmap 129 #a8a8a8
 ~MyStyle
MyStyle "unfocus_colors"
 ForeColor blue
 BackColor grey30
 BackPixmap 129 #a8a8a8
 ~MyStyle


Above you’ll notice two specific colors: green and blue. These colors dictate the color of the text in the title bars when either focused (think Windows active) or unfocused (think Windows inactive). To change these colors, you simply change the color name and (this is a bit odd) switch from one theme to another and then back to your original theme. Once you've switched to your original theme, your changes should take effect.

Although this configuration seems somewhat minor, it can certainly add that last bit of detail to a particular overall theme. Along those lines, we have a few other small changes for the AfterStep look file, the first of which is the menu colors. Similar to the title bar color changes, the menu color changes take place in exactly the same way, only to different sections of code (from the same *look file). Look at this bit of code (again from the Transparent theme and the /usr/share/afterstep/looks/look.Transparent.rev file):
MyStyle "menu_title_style"
 Font -*-helvetica-bold-r-*-*-13-*-*-*-*-*-*-*
 TextStyle 0
 ForeColor green
 BackColor #050505
# For Non-shaded transparent menu (pixmap not used, but must exist)
 BackPixmap 129 black.xpm
# For a Shaded transparent menu (color is shade)
# BackPixmap 129 #a8a8a8
 ~MyStyle

MyStyle "menu_item_style"
 Inherit menu_font
 ForeColor blue
 BackColor Grey30
 MaxColors 128
# For Non-shaded transparent menu (pixmap not used, but must exist)
 BackPixmap 129 black.xpm
# For a Shaded transparent menu (color is shade)
# BackPixmap 129 #bdbdbd
 ~MyStyle

MyStyle "menu_hilite_style"
 Inherit menu_font
 Font -*-helvetica-bold-r-*-*-13-*-*-*-*-*-*-*
 TextStyle 3
 ForeColor green
# ForeColor #daa520
 BackColor Grey30
# For Non-shaded transparent menu (pixmap not used, but must exist)
 BackPixmap 129 black.xpm
# For a Shaded transparent menu (color is shade)
# BackPixmap 129 #bdbdbd
 ~MyStyle

We have a couple of changes taking place here (the first of which is unique to the Transparent look). The first change is to remove the tinting effect to the menus. With the menu tinting effective, you’ll see a shaded area within the menu, thus defeating the “transparent” look. To do this, you simply change this section:
# For Non-shaded transparent menu (pixmap not used, but must exist)
# BackPixmap 129 black.xpm
# For a Shaded transparent menu (color is shade)
 BackPixmap 129 #bdbdbd
to this:
# For Non-shaded transparent menu (pixmap not used, but must exist)
 BackPixmap 129 black.xpm
# For a Shaded transparent menu (color is shade)
# BackPixmap 129 #bdbdbd

If you want to have the shade (or tint) available, simply leave the code as is and change the colors to suit your needs.

The final change for this file has to do with title bar buttons. One of the great aspects (and strengths) of AfterStep is its configurability. The title bar buttons are a prime example. Title bar buttons vary from theme to theme; they can range from the simple Windows-like X and to the more esoteric box/circle/triangle of the Guylhem theme, or you can create your own. All of the buttons for the title bars reside in the /usr/share/afterstep/desktop/buttons directory and are in .xmp format. The buttons are configured within the following section of code (again, this example is taken from the Transparent theme, look.Transparent.rev):
# TitleButtons : [1] [3] [5] [7] [9] (title) [0] [8] [6] [4] [2]
TitleButton 1 as1.5-menu.xpm as1.5-menu-p.xpm
TitleButton 3 as1.5-iconize.xpm as1.5-iconize-p.xpm
TitleButton 2 as1.5-kill.xpm as1.5-kill-p.xpm
TitleButton 4 as1.5-shade.xpm as1.5-shade-p.xpm

Above is the standard button set for the Transparent look. As you can see, there are 10 possible button positions, of which only five are actually used—and only three of those are useful. The three positions that should be considered are for buttons 2, 4, and 6. Button location 2 is responsible for iconifying a window. In AfterStep, iconifying a window means to minimize a window to a small icon that can be clicked to be restored. This is very similar to the Windows ability to minimize a window to the taskbar. The next button position is position 4, which is responsible for shading a window. Window shading was borrowed from MacLand and allows a window to be completely drawn up so that the only thing remaining is the title bar itself. To restore the window, simply click the shade button again. The final button position, 6, is the kill (or close) button. This button does just what it sounds like it does—it closes applications.

As you can see in the code snippet above, the lines of code are written so the keyword TitleButton is followed first by the button position number, then by the unclicked button pic, and finally by the clicked button pic. With this in mind, you should be able to create nearly any finishing touches you like. As long as your image is 24X24 pixels (approximately), saved in XPM format, and has a transparent background (should you be using the Transparent theme), you will be fine.

/usr/share/afterstep/backgrounds
Creating a background is simply a matter of placing the picture you desire into the correct directory, updating the Start menu, and choosing that picture. There is, of course, a catch: The pictures should remain small. The largest default picture in this directory is 26,486 KB. I have managed to get a 54,888-KB JPG file to work just fine (without tweaking), but go any higher than that and the picture simply won't fly.

The directory where you want to place these pictures is /usr/share/afterstep/backgrounds, and it should have -rw-rw-r— permissions.

Drawback
AfterStep has one major drawback—KDE just doesn't like it. Although GNOME plays very well with AfterStep, KDE just won't share its toys with this window manager. This is not really a drawback, but more of an annoyance. With GNOME on its side, AfterStep can only stand to win.

Conclusion
In this Daily Drill Down, I’ve shown you that AfterStep is a perfectly capable, highly configurable, wonderfully stable X Windows environment that will allow you to customize your desktop to nearly any extent you wish. With a full complement of configuration scripts and menus, AfterStep can be tweaked and prodded into nearly any direction.

Give AfterStep a try—you won't regret the decision.
The authors and editors have taken care in preparation of the content contained herein but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for any damages. Always have a verified backup before making any changes.

About Jack Wallen

Jack Wallen is an award-winning writer for TechRepublic and Linux.com. He’s an avid promoter of open source and the voice of The Android Expert. For more news about Jack Wallen, visit his website jackwallen.com.

Editor's Picks