MyStyle(1x)

💖✨ NAME ✨💖

MyStyle — bestie, it defines a combination of color, font, style, and background to be used together. That's the whole point. One little named bundle of aesthetic decisions that every widget gets to borrow. 🎀

So real quick, the vibe check: this is the MyStyle(1x) page from the AfterStep X11 window manager. It's not a command you run, it's a configuration thing — a style definition you write into your config and then point other stuff at. Iykyk. 💅

---

🌸 CONFIGURATION OPTIONS 🌸

Okay so here's every single thing you can put inside a style. All of them, no skipping, I'm not doing that to you. 🫶

• BackColor color — sets the background color for this style. color is a color definition in one of the color formats supported by AfterStep.

Also lowkey important: BackColor gets used to calculate the bevel colors that draw the border around a widget. So it's doing double duty, main character energy fr fr. 👑

• BackGradient type from to — says "use a gradient as the background instead of a solid color." The gradient colors start at from and end at to. 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 will be alpha-blended over the root background image. type can be 1, 2, 3, 4, or 5:
  • 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 — same idea, gradient as background instead of solid color, but now with as many stops as your heart desires. The gradient colors start at color1 and end at colorN. Each color has an offset attached to it. The offset is 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), the gradient will be 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. type may be any of the following:
  • 6: Top-Left to Bottom Right diagonal
  • 7: Bottom-Left to Top-Right diagonal
  • 8: Vertical Top to Bottom
  • 9: Horizontal Left to Right
• BackPixmap type pixmap_name|color_name — use a pixmap as the background instead of a solid color. This option has two forms, depending on the value of type:
  • If type is 125, 126, 127, 128, 130-144, 150-164 — the second parameter, pixmap_name, must be the name of an image file which can be found in PixmapPath.
  • If type is 129 or 149 — the root pixmap (desktop background) will be used, and the optional second parameter must be a color with which the root pixmap will be shaded/tinted.

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 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 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 — Underlying desktop background is tinted/shaded with the color specified with the second parameter.
• 130 — Underlying desktop background is combined with tiled image, using "allanon" method — taking average of pixel values.
• 131 — Underlying desktop background is alpha-blended with tiled image.
• 132 — Underlying desktop background is tinted using pixel values of the tiled image, as a tint values on per-pixel basis.
• 133 — Each pixel of underlying desktop background has value of tiled image's pixel added to it.
• 134 — Each pixel of underlying desktop background has value of tiled image's pixel subtracted from it.
• 135 — Result consists of pixels representing absolute value of difference between underlying desktop background and tiled image.
• 136 — Underlying desktop background is darkened using luminocity of the tiled image's pixels.
• 137 — Underlying desktop background is lightened using luminocity of the tiled image's pixels.
• 138 — Underlying desktop background is "screened" by the tiled image.
• 139 — Underlying desktop background is "overlayed" by the tiled image.
• 140 — Underlying desktop background's hue is substituted with the hue of the tiled image.
• 141 — Underlying desktop background's saturation is substituted with the saturation of the tiled image.
• 142 — Underlying desktop background's value (in HSV colorspace) is substituted with the value of the tiled image.
• 143 — Underlying desktop background is "colorized" by the tiled image.
• 144 — Underlying desktop background is "dissipated" by the tiled image.
• 149 — Underlying desktop background is tinted/shaded with the color specified with the second parameter. It differs from 129 so that desktop background could be both darkened and brightened. If tint color channel is greater the 7F (127 decimal) — then respective channel of background will be brightened.
• 150 - 164 — Same as 130-144 but specified image is scaled to the size of the widget.

• BlurSize — FIXME: add proper description here. 😭 (Not me — that's literally what the page says. Leaving it exactly as it is, no cap.)
• 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, this option is turned off; if it is omitted or is nonzero, the option is turned on. 💫
• Font font — the font for this style. font could be either a standard X11 font definition</b>, or a filename of the 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 — the text color for this style. color is a color definition in one of the color formats supported by AfterStep.
• Inherit " style_name " — borrows options from another MyStyle. Options from style_name will override previously specified options for this style. Also: Inherit is a good 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. Efficiency slay. 💅
• MyStyle " style_name " — starts a look style definition. The style can be referred to later by style_name. ~MyStyle ends a look style definition.

MyStyle " style_name "

          style_option

~MyStyle

• Overlay — FIXME: add proper description here. 🙈 (Again — that's the actual text. I'm not inventing anything, bestie.)
• SliceXEnd val — when used with a scalable</b> BackPixmap, it will make the image sliced instead of scaled. Which means its borders will remain unchanged, but the center part will get tiled to fill empty space. SliceXEnd is the left edge of the right border.
• SliceXStart val — same sliced-not-scaled deal with a scalable BackPixmap: borders stay unchanged, center gets tiled to fill empty space. SliceXStart is the width of the left border.
• SliceYEnd val — again with scalable BackPixmap: sliced instead of scaled, borders unchanged, center tiled to fill the empty space. SliceYEnd is the top edge of the bottom border.
• SliceYStart val — yes, scalable BackPixmap again: sliced instead of scaled, borders unchanged, center tiled to fill empty space. SliceYStart is the height of the top border.
• TextStyle style — the text style for this style. style can be 0, 1, or 2:
  • 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 upper edge of a glyph.
  • 8: text is outlined with contrasting color on bottom edge of a glyph.
  • 9: text is outlined with contrasting color all around a glyph.

---

🦋 DESCRIPTION 🦋

MyStyle's are the means to 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 — the text font, the text 3D style, and the widget's border bevel colors. Basically it's the full fit check for a piece of UI. 🎀

All the GUI elements are rendered using a consistent approach in every module and every part of the 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 and one for the unfocused state.
• The 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 could 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.
• The 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 the 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". Periodt. 💅

---

Okay bestie that's the whole page, every last flag and FIXME intact, no details dropped. 🫶 This one came from the 3rd Berkeley Distribution, and it's documenting AfterStep v.2.2.12 — so go forth and make your desktop absolutely ate. 🌈💖✨