Theming Window Maker Part 1: Styles
Window Maker themes that lack a background image are referred to as "styles." In this post, I'm going to describe the components of a style. I'll then show how to hand-build a style from scratch.
Components of a Style
A style defines the basic components of the Window Maker desktop, so we need to know how Window Maker identifies these components. For theming, we're most interested in two key attributes of these components. The key attributes we need to define in a style or theme are color and "texture." Texture in this context means using multiple colors in various types of gradients - we're not limited to solid colors only. In this post, I am not going to use image files for our elements, and we'll stick with a solid color for each element. I will cover texture and the use of images in future posts. First, it helps to have a working knowledge of the various components of the Window Maker desktop. Here is a screenshot of a typical Window Maker desktop with the key components labeled:
Colors are specified either as color names in the standard X color name format or by color numbers in the standard rgb (red-green-blue) format. You can use any color name shown by the showrgb program (like 'black', 'white' or 'grey') or any color value in the #rrggbb format, where rr, gg and bb is the intensity of the color component (such as #ff0000 for pure red or #000080 for medium blue). Note that color names in the #rrggbb format must be enclosed with double quotes.
In Linux, there are a large number of rgb color names pre-defined, and it is interesting to open a terminal, enter showrgb, and look over the choices you have. For example, there are four different "tomato" shades defined (tomato1, tomato2, tomato3 and tomato4 - obviously!). So the showrgb program can be a valuable resource for theming.
For solid colors, the color of an attribute is defined by <AttributeName> = (solid, <Color>)
For example, if I wanted icon backgrounds to be light blue, I would use:
IconBack = (solid, LightBlue)
I could also use a color picking program such as the one available at http://www.colorpicker.com to generate an rgb number. I might then use the rgb number as follows:
IconBack = (solid, "#8FB8F2")
Note that I have enclosed the rgb number with quotation marks. This is necessary because the color number contains a non-alphanumeric character (the # symbol) and therefore requires the quotation marks for proper interpretation by Window Maker. Any time a string contains a non-alphanumeric character in a style file (characters such as '#' ',' '.' etc.) you need to enclose that string with quotation marks.
A First Style File
With the information we have covered so far, we can put together a basic style, save it into our ~/GNUstep/Library/Windowaker/Styles directory, and use it on our system.
Step 1:
Start by opening your text editor and creating a file named ~/GNUstep/Library/WindowMaker/Test1.style. Copy or type the following template into the file:
{
IconBack = ();
FTitleBack = ();
FTitleColor = ;
PTitleBack = ();
PTitleColor = ;
UTitleBack = ();
UTitleColor = ;
MenuTitleBack = ();
MenuTitleColor = ;
MenuTextBack = ();
MenuTextColor = ;
HighlightColor = ;
HighlightTextColor = ;
MenuDisabledColor = ;
MenuTitleFont = "-*-lucida-medium-r-normal-*-12-*-*-*-*-*-iso8859-1";
MenuTextFont = "-*-lucida-medium-r-normal-*-12-*-*-*-*-*-iso8859-1";
MenuStyle = ;
ClipTitleColor = ;
CClipTitleColor = ;
ClipTitleFont = "-*-helvetica-medium-r-normal-*-10-*-*-*-*-*-*-*";
IconTitleFont = "-*-helvetica-medium-r-*-*-8-*-*-*-*-*-*-*";
ResizebarBack = ();
Displayfont = "-*-helvetica-medium-r-*-*-10-*-*-*-*-*-*-*";
TitleJustify = ;
WindowTitleFont = "-*-lucida-medium-r-normal-*-12-*-*-*-*-*-*-*";
}
The template provides all of the components of the Window Maker desktop formatted for use in a style or theme, EXCEPT the entry for the workspace background. Notice that some of the elements are followed by a pair of parentheses '()'. These correspond with elements that can carry both color and texture definitions. For these items, commands can be enterd that will produce various color gradients. You enter color and texture information between the parentheses. For now, I'm just going to use solid colors.
Notice that I have pre-loaded the font information. Window Maker themes and styles allow for specifying fonts using the X Logical Font Description format. This is a very complex (some would even say unnecessarily complex) syntax. You can see the syntax HERE or you can use a program like xfontsel to find and select fonts. Xfontsel will provide all of the syntax defining a particular font for you. For now, I've simply provided a couple of examples. When selecting fonts, remember that a font that is not installed on your system (or someone else's system, if you're sharing your styles and themes) may not display properly and that the sytem will choose an alternate font for you if the one you specify is not installed.
Step 2:
Now we're ready to build the style. I'm going to use various shades of gold. You can run showrgb and take a look at the dozens of pre-defined color names available, or go to colorpicker.com and use your imagination!
Enter (or copy and paste) the following values for the components in your template:
{
IconBack = (solid, DarkGoldenrod);
FTitleBack = (solid, DarkGoldenrod);
FTitleColor = black;
PTitleBack = (solid, brown1);
PTitleColor = grey40;
UTitleBack = (solid, goldenrod1);
UTitleColor = grey40;
MenuTitleBack = (solid, DarkGoldenrod);
MenuTitleColor = white;
MenuTextBack = (solid, PaleGoldenrod);
MenuTextColor = black;
HighlightColor = white;
HighlightTextColor = black;
MenuDisabledColor = gray80;
MenuTitleFont = "-*-lucida-medium-r-normal-*-12-*-*-*-*-*-iso8859-1";
MenuTextFont = "-*-lucida-medium-r-normal-*-12-*-*-*-*-*-*-*";
MenuStyle = normal;
ClipTitleColor = black;
CClipTitleColor = black;
ClipTitleFont = "-*-helvetica-medium-r-normal-*-10-*-*-*-*-*-*-*";
IconTitleFont = "-*-helvetica-medium-r-*-*-8-*-*-*-*-*-*-*";
ResizebarBack = (solid, goldenrod3);
Displayfont = "-*-helvetica-medium-r-*-*-10-*-*-*-*-*-*-*";
TitleJustify = center;
WindowTitleFont = "-*-helvetica-bold-r-normal-*-12-*-*-*-*-*-*-*";
}
After saving this into your ~/GNUstep/Library/WindowMaker/Styles directory, you can select your new style from the menu under Workspace-->Appearance-->Styles. Selecting the Test1 style should give you a desktop that looks something like this:
So, we've got our dark goldenrod icon backgrounds, dark goldenrod menu titlebars, pale goldenrod menu background, dark goldenrod focused window titlebars, and so on. The menu item text is black as is the focused titlebar text.
Making A Change
Now let's try a brief experiment. Open the Test1.style file, and change the entry for MenuStyle from normal to flat. Save the Test1.style file, then reload your style from the Workspace-->Appearance menu. Right click your desktop and take a look at the menu. It should now have a smooth menu field instead of a beveled field, like this:
Now that you know how easy it is to define a style in Window Maker...What are you waiting for? Get busy styling your Window Maker desktop!
In a future post, I will add to the level of complexity by including color gradients (textures) and adding a workspace background, which will move us from the 'style' category into the full-blown 'theme' category. Enjoy!
