deKorator Theming ================= ┌─────┬───────────────────────┬─────┐ │ 1 │ 2 │ 3 │ ├──┬──┴┬───┬─────────────┬───┬┴──┬──┤ │ 4│ 5 │ 6 │ 7 │ 8 │ 9 │10│ ├──┼───┴───┴─────────────┴───┴───┼──┤ │11│ │14│ ├──┤ ├──┤ │ │ │ │ │12│ Window Content │15│ │ │ │ │ ├──┤ ├──┤ │13│ │16│ ├──┴──┬───────────────────────┬──┴──┤ │ 17 │ 18 │ 19 │ └─────┴───────────────────────┴─────┘ Border Parts ============ 1: topLeftFrameBg - Top border, left corner / resize handle 2: topMidFrameBg - Top border, middle part (tiled to fill) 3: topRightFrameBg - Top border, right corner / resize handle 4: leftUpperCornerFrameBg - Left upper corner / resize handle 5: buttonsLeftBg - Titlebar part, behind left-side buttons 6: titleLeftBg - Titlebar part, separating buttons from middle 7: titleMidBg - Titlebar, middle part (tiled to fill) 8: titleBarRightBg - Titlebar part, separating buttons from middle 9: buttonsRightBg - Titlebar part, behind right-side buttons 10: rightUpperCornerFrameBg - Right upper corner / resize handle 11: leftUpperFrameBg - Left border, upper part 12: leftMidFrameBg - Left border, middle part (tiled to fill) 13: leftLowerCornerFrameBg - Left border, lower corner / resize handle 14: rightUpperFrameBg - Right border, upper part 15: rightMidFrameBg - Right border, middle part (tiled to fill) 16: rightLowerCornerFrameBg - Right border, lower corner / resize handle 17: bottomLeftFrameBg - Bottom border, left corner / resize handle 18: bottomMidFrameBg - Bottom border, middle part (tiled to fill) 19: bottomRightFrameBg - Bottom border, right corner / resize handle Optional (shaded windows): 17: bottomShadedLeftFrameBg - Bottom border, left corner / resize handle 18: bottomShadedMidFrameBg - Bottom border, middle part (tiled to fill) 19: bottomShadedRightFrameBg - Bottom border, right corner / resize handle Element Names ------------- - All border parts are expected in the `/deco` subfolder. - Image names can be found in the list above, or the listing below. Inactive Window Frames ---------------------- - Filenames of all border images end with `Bg`. - If additional files ending in `InactiveBg` are found: - They are used for inactive windows. - Fully optional and looked up in a granular fashion - Only providing inactive images for selective parts of the frame, or none at all is valid. Window Frame Structure ---------------------- deKorator frames are composed of: - Frame parts of top, left, right and bottom borders - Titlebar parts Border Parts Details -------------------- Horizontal ~~~~~~~~~~ ┌──────────────────┬───────────────────────────────┬───────────────────┐ │ topLeft │ topMid │ topRight │ └──────────────────┴───────────────────────────────┴───────────────────┘ ┌──────────────────┬───────────────────────────────┬───────────────────┐ │ bottomLeft │ bottomMid │ bottomRight │ └──────────────────┴───────────────────────────────┴───────────────────┘ ┌──────────────────┬───────────────────────────────┬───────────────────┐ │ bottomShadedLeft │ bottomShadedMid │ bottomShadedRight │ └──────────────────┴───────────────────────────────┴───────────────────┘ Notes: - Top/bottom borders are at the respective window edges. - *Left and *Right parts form corners, allow diagonal resizing. - *Mid parts are tiled to fill the remaining width, for vertical resizing. - Optional: Top border can be omitted. - In this case, the theme uses: - Top 5 pixels of titlebar for resizing. - Bottom border width for diagonal resizing. - Optional: BottomShaded border (for shaded windows). - Is only shown when drawing borders on shaded windows is enabled in settings. - If not found, normal bottom border is used. Vertical ~~~~~~~~ ┌──────┐ ┌──────┐ │ left-│ │right-│ │Upper-│ │Upper-│ │Corner│ │Corner│ ├──────┤ ├──────┤ │ left-│ │right-│ │ Upper│ │ Upper│ ├──────┤ ├──────┤ │ │ │ │ │ left-│ │right-│ │ Mid │ │ Mid │ │ │ │ │ ├──────┤ ├──────┤ │left- │ │right-│ │Lower-│ │Lower-│ │Corner│ │Corner│ └──────┘ └──────┘ Notes: - Side borders are stacked vertically between titlebar and bottom border. - [left|light]Upper parts are just below the titlebar. - [left|light]Mid parts are tiled to fill remaining space. - [left|light]LowerCorner parts form bottom corners. Titlebar ~~~~~~~~ ┌───────────────┬───────────┬────────────┬─────────────┬─────────────┬────────────┬────────────────┐ │leftUpperCorner│buttonsLeft│titleBarLeft│ titleBarMid │titleBarRight│buttonsRight│rightUpperCorner│ └───────────────┴───────────┴────────────┴─────────────┴─────────────┴────────────┴────────────────┘ Notes: - Titlebar is a strip of seven elements. - [left|light]UpperCorner parts: - Form sides of the titlebar. - Side parts top corners, allow diagonal resizing. - buttons[left|light] parts: - Tile behind titlebar buttons (if present). - titleBarMid: - Tiled to fill the titlebar center. - titleBar[left|light] at the left and right. Masks ~~~~~ ┌──────────────────────────────┬─────────────────────────┬───────────────────────────────┐ │ topLeftCornerBitmap │ topMidBitMap │ topRightCornerBitmap │ └──────────────────────────────┴─────────────────────────┴───────────────────────────────┘ ┌──────────────────────────────┬─────────────────────────┬───────────────────────────────┐ │ buttomLeftCornerBitmap │ buttomMidBitmap │ buttomRightCornerBitmap │ └──────────────────────────────┴─────────────────────────┴───────────────────────────────┘ ┌──────────────────────────────┬─────────────────────────┬───────────────────────────────┐ │ buttomLeftShadedCornerBitmap │ buttomShadedMidBitmap │ buttomShadedRightCornerBitmap │ └──────────────────────────────┴─────────────────────────┴───────────────────────────────┘ Notes: - Masks are optional images in black and white, used to determine transparent parts of the frame, if enabled in settings. - Black pixels are transparent parts of the frame. Buttons ======= Functions: ---------- - buttonAbove: Enable "Keep on top" - buttonAboveDown: Disable "Keep on top" - buttonBelow: Enable "Keep below" - buttonBelowDown: Disable "Keep below" - buttonClose: Close window - buttonHelp: Open help (if available) - buttonMax: Maximize window - buttonMenu: Show window menu (or icon if menu disabled) - buttonMin: Iconify window - buttonRestore: Unmaximize window - buttonShade: Shade (roll into titlebar) - buttonShadeDown: Unshade (roll out of titlebar) - buttonSticky: Show on all virtual desktops - buttonStickyDown: Disable "Show on all desktops" Image files: ------------ Normal buttons: /buttons/normal/[buttonName].png Hover (mouse over): /buttons/hover/[buttonName]Hover.png Pressed: /buttons/press/[buttonName]Press.png Please note the addition of 'Hover' and 'Press' on the respective buttons, as well as the different paths. Optional Inactive Images: - If additional files ending in "Inactive" are found, e.g., `buttonClosePressInactive.png`: - The inactive images are looked up per button image, allowing fine grained control. - If no inactive part is found, the same image is used on inactive and acrtive window borders. Theme directory: ---------------- The theme needs to be in a directory called "-theme", wheras can not contain whitespaces, i.e. "default-theme", "templaTor-theme". Listing of all files, including optional parts: -theme ├── buttons │ ├── hover │ │ ├── buttonAboveDownHoverInactive.png │ │ ├── buttonAboveDownHover.png │ │ ├── buttonAboveHoverInactive.png │ │ ├── buttonAboveHover.png │ │ ├── buttonBelowDownHoverInactive.png │ │ ├── buttonBelowDownHover.png │ │ ├── buttonBelowHoverInactive.png │ │ ├── buttonBelowHover.png │ │ ├── buttonCloseHoverInactive.png │ │ ├── buttonCloseHover.png │ │ ├── buttonHelpHoverInactive.png │ │ ├── buttonHelpHover.png │ │ ├── buttonMaxHoverInactive.png │ │ ├── buttonMaxHover.png │ │ ├── buttonMenuHoverInactive.png │ │ ├── buttonMenuHover.png │ │ ├── buttonMinHoverInactive.png │ │ ├── buttonMinHover.png │ │ ├── buttonRestoreHoverInactive.png │ │ ├── buttonRestoreHover.png │ │ ├── buttonShadeDownHoverInactive.png │ │ ├── buttonShadeDownHover.png │ │ ├── buttonShadeHoverInactive.png │ │ ├── buttonShadeHover.png │ │ ├── buttonStickyDownHoverInactive.png │ │ ├── buttonStickyDownHover.png │ │ ├── buttonStickyHoverInactive.png │ │ └── buttonStickyHover.png │ ├── normal │ │ ├── buttonAboveDownInactive.png │ │ ├── buttonAboveDown.png │ │ ├── buttonAboveInactive.png │ │ ├── buttonAbove.png │ │ ├── buttonBelowDownInactive.png │ │ ├── buttonBelowDown.png │ │ ├── buttonBelowInactive.png │ │ ├── buttonBelow.png │ │ ├── buttonCloseInactive.png │ │ ├── buttonClose.png │ │ ├── buttonHelpInactive.png │ │ ├── buttonHelp.png │ │ ├── buttonMaxInactive.png │ │ ├── buttonMax.png │ │ ├── buttonMenuInactive.png │ │ ├── buttonMenu.png │ │ ├── buttonMinInactive.png │ │ ├── buttonMin.png │ │ ├── buttonRestoreInactive.png │ │ ├── buttonRestore.png │ │ ├── buttonShadeDownInactive.png │ │ ├── buttonShadeDown.png │ │ ├── buttonShadeInactive.png │ │ ├── buttonShade.png │ │ ├── buttonStickyDownInactive.png │ │ ├── buttonStickyDown.png │ │ ├── buttonStickyInactive.png │ │ └── buttonSticky.png │ └── press │ ├── buttonAboveDownPressInactive.png │ ├── buttonAboveDownPress.png │ ├── buttonAbovePressInactive.png │ ├── buttonAbovePress.png │ ├── buttonBelowDownPressInactive.png │ ├── buttonBelowDownPress.png │ ├── buttonBelowPressInactive.png │ ├── buttonBelowPress.png │ ├── buttonClosePressInactive.png │ ├── buttonClosePress.png │ ├── buttonHelpPressInactive.png │ ├── buttonHelpPress.png │ ├── buttonMaxPressInactive.png │ ├── buttonMaxPress.png │ ├── buttonMenuPressInactive.png │ ├── buttonMenuPress.png │ ├── buttonMinPressInactive.png │ ├── buttonMinPress.png │ ├── buttonRestorePressInactive.png │ ├── buttonRestorePress.png │ ├── buttonShadeDownPressInactive.png │ ├── buttonShadeDownPress.png │ ├── buttonShadePressInactive.png │ ├── buttonShadePress.png │ ├── buttonStickyDownPressInactive.png │ ├── buttonStickyDownPress.png │ ├── buttonStickyPressInactive.png │ └── buttonStickyPress.png ├── deco │ ├── bottomLeftFrameBg.png │ ├── bottomLeftFrameInactiveBg.png │ ├── bottomMidFrameBg.png │ ├── bottomMidFrameInactiveBg.png │ ├── bottomRightFrameBg.png │ ├── bottomRightFrameInactiveBg.png │ ├── bottomShadedLeftFrameBg.png │ ├── bottomShadedLeftFrameInactiveBg.png │ ├── bottomShadedMidFrameBg.png │ ├── bottomShadedMidFrameInactiveBg.png │ ├── bottomShadedRightFrameBg.png │ ├── bottomShadedRightFrameInactiveBg.png │ ├── buttonsLeftBg.png │ ├── buttonsLeftInactiveBg.png │ ├── buttonsRightBg.png │ ├── buttonsRightInactiveBg.png │ ├── leftLowerCornerFrameBg.png │ ├── leftLowerCornerFrameInactiveBg.png │ ├── leftMidFrameBg.png │ ├── leftMidFrameInactiveBg.png │ ├── leftUpperCornerFrameBg.png │ ├── leftUpperCornerFrameInactiveBg.png │ ├── leftUpperFrameBg.png │ ├── leftUpperFrameInactiveBg.png │ ├── rightLowerCornerFrameBg.png │ ├── rightLowerCornerFrameInactiveBg.png │ ├── rightMidFrameBg.png │ ├── rightMidFrameInactiveBg.png │ ├── rightUpperCornerFrameBg.png │ ├── rightUpperCornerFrameInactiveBg.png │ ├── rightUpperFrameBg.png │ ├── rightUpperFrameInactiveBg.png │ ├── titleLeftBg.png │ ├── titleLeftInactiveBg.png │ ├── titleMidBg.png │ ├── titleMidInactiveBg.png │ ├── titleRightBg.png │ ├── titleRightInactiveBg.png │ ├── topLeftFrameBg.png │ ├── topLeftFrameInactiveBg.png │ ├── topMidFrameBg.png │ ├── topMidFrameInactiveBg.png │ ├── topRightFrameBg.png │ └── topRightFrameInactiveBg.png └── masks ├── buttomLeftCornerBitmap.png ├── buttomMidBitmap.png ├── buttomRightCornerBitmap.png ├── buttomShadedLeftCornerBitmap.png ├── buttomShadedMidBitmap.png ├── buttomShadedRightCornerBitmap.png ├── topLeftCornerBitmap.png ├── topMidBitMap.png └── topRightCornerBitmap.png