MyStyle(7x)

💖 NAME 💖

MyStyle — bestie, this is the one that defines a whole combination of color, font, style and background that all get used together. It's giving "one glam look, applied everywhere." 🎀

This is a page from the AfterStep X11 window manager manual, section 7x. Periodt.

---

✨ CONFIGURATION OPTIONS ✨

Okay so here's every knob you can turn. No skipping, we're doing all of them. 💅

• BackColor color — sets the background color that this style is associated with. color is a color definition in one of the color formats that AfterStep supports.

Not me pointing out that BackColor has a secret second job: it's also used to calculate the bevel colors that draw the border around a widget. Iconic multitasking behavior honestly.

• BackGradient type from to — says "actually, use a gradient as the background instead of a plain flat color." The gradient colors start at from and end at to. Both from and to are color definitions in one of the supported color formats. If the gradient includes at least one transparent color (alpha value set to be below FF), the gradient gets alpha-blended over the root background image. Gorgeous. 🦋

The page says type can be 1, 2, 3, 4, or 5 — and then hands you nine of them, so here is literally all of it, bestie:

1. Wharf-style diagonal gradient
2. Horizontal from top to bottom
3. Horizontal from top/bottom to center
4. Vertical from left to right
5. Vertical from left/right to center
6. Top-Left to Bottom Right diagonal ( same as 1 )
7. Bottom-Left to Top-Right diagonal
8. Vertical Top to Bottom ( same as 2 )
9. Horizontal Left to Right ( same as 4 )

• BackMultiGradient type offset1 color1 ... offsetN colorN — again with the gradient-as-background instead of a solid color, but this time it's a whole multi-stop situation. The gradient colors start at color1 and end at colorN. Each color has an offset attached to it — that's a number between 0.0 and 1.0 and it says where in the gradient that color gets placed. The colors are in one of the color formats supported by AfterStep. At least two colors must be given. If the gradient includes at least one transparent color (alpha value set to be below FF), it gets alpha-blended over the root background image. The offsets are non-decreasing numbers between 0.0 and 1.0. If the first offset is not 0.0, it will be set to 0.0. If the last offset is not 1.0, it will be set to 1.0.

For type, you've got these options:

1. Top-Left to Bottom Right diagonal
2. Bottom-Left to Top-Right diagonal
3. Vertical Top to Bottom
4. Horizontal Left to Right

(those are the types numbered 6, 7, 8 and 9, just so we're clear 👑)

• BackPixmap type pixmap_name|color_name — use a pixmap as the background instead of a solid color. This one has two forms, depending on what type is:
  • If type is 125, 126, 127, 128, 130-144, 150-164 → the second parameter, pixmap_name, has to be the name of an image file that can be found in PixmapPath.
  • If type is 129 or 149 → the root pixmap (your desktop background, the one behind everything) will be used, and the optional second parameter must be a color that the root pixmap will be shaded/tinted with.

Depending on the value of type, AfterStep will render the pixmap in many different ways:

• 125 — image is SCALED to the size of the widget, and its opacity is used to set the shape of the widget/window decoration, achieving a non-rectangular window effect.
• 126 — image is TILED to the size of the widget, and its opacity is used to set the shape of the widget/window decoration, achieving a non-rectangular window effect.
• 127 — image is SCALED to the size of the widget.
• 128 — image is Tiled to the size of the image.
• 129 — the underlying desktop background is tinted/shaded with the color specified with the second parameter.
• 130 — the underlying desktop background is combined with the tiled image, using the "allanon" method — taking the average of pixel values.
• 131 — the underlying desktop background is alpha-blended with the tiled image.
• 132 — the underlying desktop background is tinted using pixel values of the tiled image, as tint values on a per-pixel basis.
• 133 — each pixel of the underlying desktop background has the value of the tiled image's pixel added to it.
• 134 — each pixel of the underlying desktop background has the value of the tiled image's pixel subtracted from it.
• 135 — the result consists of pixels representing the absolute value of the difference between the underlying desktop background and the tiled image.
• 136 — the underlying desktop background is darkened using the luminosity of the tiled image's pixels.
• 137 — the underlying desktop background is lightened using the luminosity of the tiled image's pixels.
• 138 — the underlying desktop background is "screened" by the tiled image.
• 139 — the underlying desktop background is "overlayed" by the tiled image.
• 140 — the underlying desktop background's hue is substituted with the hue of the tiled image.
• 141 — the underlying desktop background's saturation is substituted with the saturation of the tiled image.
• 142 — the underlying desktop background's value (in HSV colorspace) is substituted with the value of the tiled image.
• 143 — the underlying desktop background is "colorized" by the tiled image.
• 144 — the underlying desktop background is "dissipated" by the tiled image.
• 149 — the underlying desktop background is tinted/shaded with the color specified with the second parameter. It differs from 129 in that the desktop background could be both darkened and brightened. If the tint color channel is greater than 7F (127 decimal) — then the respective channel of the background will be brightened.
• 150 - 164 — same as 130-144, but the specified image is scaled to the size of the widget.

• BlurSize — FIXME: add proper description here. 😭 yeah. That's genuinely what it says. I'm not gonna make something up bestie, I would never lie to you.
• DrawTextBackground [ 0|1 ] — says the area behind text drawn in this style should be cleared to BackColor. The argument is optional! If the argument is 0, the option is turned off; if it's omitted or is nonzero, the option is turned on.
• Font font — sets the font that this style is associated with. font could be either a standard X11 font definition, or a filename of a TrueType font that could be found in FontPath. To specify the size of the TrueType font, use a format like this: FontName.ttf-Size.

Example:

Font  DefaultSans.ttf-14

• ForeColor color — sets the text color associated with this style. color is a color definition in one of the color formats supported by AfterStep.
• Inherit " style_name " — picks a MyStyle to inherit options from. Options from style_name will override previously specified options for this style. This is a genuinely good move — a great way to save memory and network bandwidth if the same BackPixmap is used for several styles, since the pixmap will only be loaded for the inherited style. Recycling but make it chic ♻️
• MyStyle " style_name " — with its little option body, plus the closing ~MyStyle, marks the beginning of a look style definition. You can refer to the style later by style_name. ~MyStyle ends a look style definition.

MyStyle " style_name "

         style_option

~MyStyle

• Overlay — FIXME: add proper description here. 🙈 again!! Nothing more. Moving on before I cry.
• SliceXEnd val — when used with a scalable BackPixmap, it makes the image sliced instead of scaled. Which means its borders stay unchanged, but the center part gets tiled to fill the empty space. SliceXEnd is the left edge of the right border.
• SliceXStart val — same slicing deal with a scalable BackPixmap: borders unchanged, center tiled to fill empty space. SliceXStart is the width of the left border.
• SliceYEnd val — same slicing situation again. SliceYEnd is the top edge of the bottom border.
• SliceYStart val — same slicing energy. SliceYStart is the height of the top border.
• TextStyle style — sets the text style for this style. (The page says style can be 0, 1, or 2 and then gives you ten, so… here's all ten, queen. 👑)
  0. normal text
  1. embossed 3D text
  2. sunken 3D text
  3. text has shade above the text
  4. text has shade below the text
  5. thick embossed 3D text
  6. thick sunken 3D text
  7. text is outlined with contrasting color on the upper edge of a glyph.
  8. text is outlined with contrasting color on the bottom edge of a glyph.
  9. text is outlined with contrasting color all around a glyph.

---

🌸 DESCRIPTION 🌸

So. MyStyle's are the way you define how widgets (menu items, titlebars, wharf buttons, Pager desktops, etc.) should be rendered. It defines the widget's background (solid color, gradient, textured image and/or semitransparent texture), its shape — making the widget non-rectangular, bestie — the text font, the text 3D style, and the widget's border bevel colors. That's a lot of jobs for one concept and it does all of them. Main character energy. 💅

Every GUI element is rendered using a consistent approach in every module and every part of AfterStep. The interface is built from so-called TBars. A TBar is a rectangular area that may be focused (hilited) or unfocused, and pressed or unpressed.

🫶 TBAR STRUCTURE 🫶

Each TBar has the following structure:

• the background of the TBar, which is defined by MyStyle and the state of the bar — there are two MyStyles assigned to each TBar: one for the focused state and one for the unfocused state.
• tiles of the TBar. Tiles are smaller features that get arranged inside the bar according to its size, alignment, position and order. Tiles could be:
  • static icons (cannot be pressed);
  • blocks of buttons — each having two shapes, pressed and normal;
  • Text labels;
  • Empty space tiles.

There can be up to 256 tiles, each residing on one of the cells in an 8x8 grid. Several tiles could reside in a single cell, in which case they get superimposed on top of each other. Stacked, layered, cute. ✨

• bevel of the TBar. When a TBar is rendered, all of its tiles are superimposed on top of its background, and the resulting image will have a 3D bevel drawn on it, using colors from the same MyStyle as used for the background. The bevel could be switched off partially or entirely. Respective configuration options have been added where appropriate. When a TBar is pressed — its bevel is inverted. 🔥

🌈 TBAR RENDERING 🌈

When a TBar is rendered, all of its elements get superimposed on top of each other using one of 13 blending methods supported by libAfterImage, with the default being simple alphablending. See the MyFrame configuration for more details. This is referred to as the "Composition Method".

---

That's the whole page, bestie. Every option, every type, every pixel-flavored detail. You're so welcome. 🫶

Anywaaay, this lil masterpiece comes to you from the 3rd Berkeley Distribution, tagged AfterStep v.2.2.12 — and it's the MyStyle(7x) page itself, so you know exactly where you are. Study it, slay it, go make some non-rectangular windows. 💖✨🎀🦋