Retired Techie

Getting older, not necessarily wiser!

JWM Agnostic X on Arch – Part 9

Published on November 20, 2022 at 6:04 pm by LEW

Introduction

We are finally going to get into some styling the various components of Joes Window Manager (JWM). I will be going though my style. Yours should hopefully be different. Never let others dictate your style. It sounds trite, but in this case “Do Your Own Thing”.

We have covered most of the preliminary information for this subject. And, have touched on some styling already. As we go through some of the various elements, there are a few additional pieces here and there we need to talk about.

Note that in the below examples I will be using the 3 hex number RGB color notation (last post). Feel free to use the 6 number hex notation or X color names.

Desktop Visual Style

In our discussion on virtual desktops in the last post, we briefly touched on the desktop background. Specifically we used the solid background type, while mentioning several others. Some people are fine with a solid color background. It is visually clean, neat and non distracting.

Next in complexity is the gradient background. This is expressed as two colors. The first being at the top of the screen and the second at the bottom. In between is a smooth color transition.

<background type=”gradient”>#222:#999</background>

After that we have three image type backgrounds; stretched, scaled, and tiled. Stretched adjusts the smallest image dimension to match the largest screen dimension. It actually scales an image proportionately to cover the entire screen. Scaled adjusts an image non proportionality to fit the screen, possibly introducing distortion, artifacting and pixelation (I have gotten better results with stretch). Tile simply adds multiple copies of images to fill the screen (some images are designed for this with smooth transitions between the edges, a brick wall being the classic example).

<background type=”stretch”>myimage.jpg</background>

A final option is command, for those that like to change wallpaper often. This allows you to run a program for setting the background wallpaper. Whats available will depend on your distribution. Nitrogen is a light weight choice.

Window Visual Styles

Next to the desktop, the Window is probably the most visual component of the GUI. Within the <Window> tag there are three possible elements; decorations can be either flat or motif (default to flat), delimiters determine what goes around client type when included (defaults to (), showclient adds the client computer name to the window title bar (default is nothing displayed). For example.

<WindowStyle decoration=”mofit” delimiters=”>>” showclient=”true”>
    ...
</WindowStyle>

In this example we can see the client name is “archer” and the decoration is “motif” (the small edging around the window).

There are several sub tags that can go between the window tags. Some of which we have discussed earlier, and some that will be new.

Font is the font for the title bar. In the last post I recommended using XFT, which makes defining and dealing with fonts much simpler.
Width is the size of the window border in pixels (the left right and bottom sides).
Height is for the title bar in pixels. If not specified, the title bar height is determined by the font used.
Corner allows rounding of the window corners. Values range from 0 (no rounding) to 5 (max rounding).
Foreground is the color for items, like text, in an inactive window title bars.
Background is the color of inactive window title bars and border. Note that a gradient can be applied to the title bar, but not the sides and bottom of a window.
Opacity is a value between 0.0 (transparent) and 1.0 (opaque) for non active windows, and requires a composite manager. Not everyone wants transparency. But for those who do, a lihy weight choice is picom (a fork of compton which is a fork of xcompmgr), which can be run using a JWM StartupCommand.
Outline draws an outline around inactive windows in a specific color.
Active is a tag for the active window and can contain the following sub-tags; Foreground, Background, Opacity, and Outline.

Here is an example of the Window Style tag I am using.

<WindowStyle decoration=”mofit” showclient=”true”>
    <Font>DejaVuSerif-12:bold</Font>
    <Width>4</Width>
    <Corner>4</Corner>
    <Foreground>#223</Foreground>
    <Background>#a41:#c71</Background>
    <Opacity>0.8</Opacity>
    <Active>
        <Foreground>#ddc</Foreground>
         <Background>#117:#558</Background>
         <Opacity>1.0</Opacity>
    </Active>
</WindowStyle>

Tray Visual Styles

The good thing about covering Windows Styles is that a lot of it is applicable to the tray. That is you can use mofit or flat decoration as well as Font, Background, Foreground, Opacity, and Outline.

Note that the only things you can change on an active tray (assuming you have more than one) is Background, foreground, and Outline. Opacity is the same regardless of Active or not.

Also note that I have found the Background, while not stated explicitly in the JWM Configuration guide, can be a gradient.

<TrayStyle>
    <Font>DejaVuSans-12</Font>
    <Background>#117:@224</Background>
    <Foreground>#fff</Foreground>
    <Opacity>0.9</Opacity>
</TrayStyle>

It should also be noted that the tray contents have there own style, independent of the tray.

Menu Visual Style

The menu (root and Window) is another major visual element that can be styled. Accessing the root menu will depend on how it was setup. The window menu is accessed form then window title bar.

Both types of menus are styled with the MenuStyle tag. As with other style tags, the menu can be decorated as either flat of mofit. Additionally, the following sub-tags, as above, are supported; Background, Foreground, Font, Outline, Active, and Opacity.

<MenuStyle>
 <Font>dejaVuSans-12</Font>  
    <Foreground>#002</Foreground>
    <Background>#e81</Background>
    <Active>
        <Foreground>#edd</Foreground>
        <Background>#117#448</Background>
    </Active>
    <Opacity>0.9</Opacity>
</MenuStyle>