Styles » History » Version 43
« Previous -
Version 43/47
(diff) -
Next » -
Current version
Anonymous, 11/04/2011 10:51 PM
Styles\015\012\015\012{{>toc}}\015\012\015\012Styles are used to define various properties of styleable items in a CSS-like syntax.\015\012\015\012h2. Box model\015\012\015\012Every styleable items item consists of different boxes, whereas each box includes the previous one. The size of a box is determined by the size required to include the previous one and a value for each side of the box: top, right, bottom, left (The values are ordered clockwise)\015\012\015\012Here is a layout for better understanding:\015\012\015\012\015\012 Top\015\012 +-----------------------------------------------------------------+\015\012 | Margin |\015\012 | +-----------------------------------------------+ |\015\012 | | Border | |\015\012 | | +-----------------------------+ | |\015\012 | | | Padding | | |\015\012 | | | +---------+ | | |\015\012Left | Margin | Border | Padding | Content | Padding | Border | Margin | Right\015\012 | | | +---------+ | | |\015\012 | | | Padding | | |\015\012 | | +-----------------------------+ | |\015\012 | | Border | |\015\012 | +-----------------------------------------------+ |\015\012 | Margin |\015\012 +-----------------------------------------------------------------+\015\012 Bottom\015\012
\015\012\015\012The various properties of a style have different meanings for each box:\015\012\015\012|_. Property |_. Meaning |\015\012| foreground | Sets the foreground color of the content box |\015\012| background | Sets the background color of the content and the padding box |\015\012| border | Sets the background color of the border box (per side) |\015\012\015\012{{info(The margin box is always transparent.)}}\015\012\015\012h2. Cascading\015\012\015\012Like CSS syntax, styles in subtle support simple cascading. That means that properties set for All are inherited by other styleable items.\015\012\015\012h3. All\015\012\015\012Defines properties for most of the styleable elements.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon\015\012\015\012Example:\015\012\015\012{{hide}}style :all do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#fecf35"\015\012 background "#202020"\015\012end
\015\012\015\012{{needs(2979)}}\015\012\015\012h2. Substyles\015\012\015\012Styles can contain nested styles, that inherit values from their parent. The default config uses this syntax to define styles for :focus, :occupied, :unoccupied and :urgent.\015\012\015\012Sublets automatically check for a substyle matching to their name and otherwise fallback to the :sublets style.\015\012\015\012h2. Styleable items\015\012\015\012h3. Clients\015\012\015\012Defines properties for active and inactive clients.\015\012\015\012{{info(margin is the former :gap option)}}\015\012\015\012*Supported properties*: Margin, Active, Inactive, Width\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 active "#303030", 2\015\012 inactive "#202020", 2\015\012 margin 0\015\012 width 50\015\012end
\015\012\015\012h3. Separator\015\012\015\012Defines properties for the panel separator.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Font, Separator\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}style :separator do\015\012 padding 0, 0, 0, 0\015\012 border 0\015\012 background "#202020"\015\012 foreground "#757575"\015\012end
\015\012\015\012h3. Sublets\015\012\015\012Defines properties for sublets in the panel.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Font\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}style :sublets do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#757575"\015\012 background "#202020"\015\012end
\015\012\015\012h3. Subtle\015\012\015\012Defines properties for subtle.\015\012\015\012{{info(padding is the former :strut option)}}\015\012\015\012*Supported properties*: Background, Padding, Panel, Stipple\015\012\015\012Example:\015\012\015\012{{hide}}style :subtle do\015\012 panel "#202020"\015\012 background "#3d3d3d"\015\012 stipple "#757575"\015\012end
\015\012\015\012h3. Title\015\012\015\012Defines properties for the title of current client.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Font\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}style :title do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#fecf35"\015\012 background "#202020"\015\012end
\015\012\015\012h3. Views\015\012\015\012Defines properties for view-related styleable elements.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}style :views do\015\012 background "#202020"\015\012end
\015\012\015\012h4. Focus\015\012\015\012Defines properties for current active view.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font\015\012\015\012*Inherits from*: Views\015\012\015\012Example:\015\012\015\012{{hide}}style :focus do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#fecf35"\015\012 background "#202020"\015\012end
\015\012\015\012h4. Occupied\015\012\015\012Defines properties for views with at least one client.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font\015\012\015\012*Inherits from*: Views\015\012\015\012Example:\015\012\015\012{{hide}}style :occupied do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#b8b8b8"\015\012 background "#202020"\015\012end
\015\012\015\012h4. Unoccupied\015\012\015\012Defines properties for unoccupied views in the view button list.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font\015\012\015\012*Inherits from*: Views\015\012\015\012Example:\015\012\015\012{{hide}}style :views do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#757575"\015\012 background "#202020"\015\012end
\015\012\015\012h4. Urgent\015\012\015\012Defines properties for views with urgent [clients.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font\015\012\015\012*Inherits from*: {{info(This style doesn't inherit values and is used additionally to other view styles like occupied.)}}\015\012\015\012Example:\015\012\015\012{{hide}}style :urgent do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#ff9800"\015\012 background "#202020"\015\012end
\015\012\015\012{{needs(3023)}}\015\012\015\012h4. Visible\015\012\015\012Defines properties for views that are visible on any screen.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font\015\012\015\012*Inherits from*: {{info(This style doesn't inherit values and is used additionally to other view styles like occupied.)}}\015\012\015\012Example:\015\012\015\012{{hide}}style :visible do\015\012 border-top "#303030", 2\015\012end
\015\012\015\012h2. Properties\015\012\015\012Following properties can be set for supported items:\015\012\015\012h3. Foreground\015\012\015\012This property sets the foreground/text color.\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 foreground "#fecf35"\015\012end
\015\012\015\012h3. Background\015\012\015\012This property sets the background color.\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 background "#202020"\015\012end
\015\012\015\012{{needs(3066)}}\015\012\015\012h3. Font\015\012\015\012This property sets the font and expects a string. The font string can either be from xfontsel or a valid XFT font description.\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :all do\015\012 font "-*-*-*-*-*-*-14-*-*-*-*-*-*-*"\015\012 #font "xft:sans-8"\015\012end
\015\012\015\012h3. Margin\015\012\015\012This property sets a transparent (no background) outer spacing in given directions. Following notations are supported:\015\012\015\012| margin 2
| Set space for all four directions |\015\012| margin 2, 2
| Set space for top/bottom and left/right |\015\012| margin 2, 2, 2
| Set space for top, left/right and bottom (top, right, bottom, left) |\015\012| margin 2, 2, 2, 2
| Set space for all four directions |\015\012| margin_top 2
| Set space for top side |\015\012| margin_right 2
| Set space for right side |\015\012| margin_bottom 2
| Set space for bottom side |\015\012| margin_left 2
| Set space for left side |\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 margin 2\015\012end\015\012\015\012style :title do\015\012 margin 2, 2\015\012end\015\012\015\012style :title do\015\012 margin_top 2\015\012end
\015\012\015\012h3. Border\015\012\015\012This property sets the border color and size. Following notations are supported:\015\012\015\012| border "#303030", 0
| Set border color and size of all four borders |\015\012| border_top "#303030", 0
| Set border color and size of top border |\015\012| border_right "#303030", 0
| Set border color and size of right border |\015\012| border_bottom "#303030", 0
| Set border color and size of bottom border |\015\012| border_left "#303030", 0
| Set border color and size of left border |\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 border "#303030", 0\015\012end\015\012\015\012style :title do\015\012 border_top "#303030", 0\015\012end
\015\012\015\012h3. Padding\015\012\015\012This property sets an inner spacing between border and content in given directions. Following notations are supported:\015\012\015\012| padding 2
| Set space for all four directions |\015\012| padding 2, 2
| Set space for top/bottom and left/right |\015\012| padding 2, 2, 2
| Set space for top, left/right and bottom (top, right, bottom, left) |\015\012| padding 2, 2, 2, 2
| Set space for all four directions |\015\012| padding_top 2
| Set space for top side |\015\012| padding_right 2
| Set space for right side |\015\012| padding_bottom 2
| Set space for bottom side |\015\012| padding_left 2
| Set space for left side |\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 padding 2\015\012end\015\012\015\012style :title do\015\012 padding 2, 2\015\012end\015\012\015\012style :title do\015\012 padding_top 2\015\012end
\015\012\015\012h3. Active\015\012\015\012This property sets the border color and size of the current active client.\015\012\015\012*Applicable to*: Clients\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 active "#303030", 2\015\012end
\015\012\015\012{{needs(r2979)}}\015\012\015\012h3. Icon\015\012\015\012This property sets the color of any icons in this panel item.\015\012\015\012*Applicable to*: All, Focus, Urgent, Occupied, Views, Sublets, Visible\015\012\015\012\015\012Example:\015\012\015\012{{hide}}style :views do\015\012 icon "#303030"\015\012end
\015\012\015\012h3. Inactive\015\012\015\012This property sets the border color and size of all other clients.\015\012\015\012{{info(The border size of inactive clients is ignored, because different sizes would require many size and position changes everytime the focus moves.)}}\015\012\015\012*Applicable to*: Clients\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 inactive "#202020", 2\015\012end
\015\012\015\012h3. Panel\015\012\015\012This property sets the panel color. Following notations are supported:\015\012\015\012| panel "#000000"
| Set color of both panels |\015\012| panel_top "#000000"
| Set color of top panel |\015\012| panel_bottom "#000000"
| Set color of bottom panel |\015\012\015\012*Applicable to*: Subtle\015\012\015\012Example:\015\012\015\012style :subtle do\015\012 panel "#202020"\015\012end\015\012\015\012style :subtle do\015\012 panel_top "#202020"\015\012 panel_bottom "#202020"\015\012end
\015\012\015\012{{needs(3097)}}\015\012\015\012h3. Separator\015\012\015\012This property sets the separator string.\015\012\015\012*Applicable to*: Separator\015\012\015\012Example:\015\012\015\012{{hide}}style :separator do\015\012 separator "|"\015\012end
\015\012\015\012h3. Stipple\015\012\015\012This property sets the color of the panel stippling if any.\015\012\015\012*Applicable to*: Subtle\015\012\015\012Example:\015\012\015\012{{hide}}style :subtle do\015\012 stipple "#757575"\015\012end
\015\012\015\012h3. Width\015\012\015\012This property sets the string length in character, default is 50 characters.\015\012\015\012*Applicable to*: Clients\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 width 50\015\012end
\015\012\015\012h3. Min_width\015\012\015\012This property sets the min. pixel width of a panel item.\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible\015\012\015\012Example:\015\012\015\012{{hide}}style :title do\015\012 min_width 50\015\012end
¶
style :all do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#fecf35"\015\012 background "#202020"\015\012end
style :clients do\015\012 active "#303030", 2\015\012 inactive "#202020", 2\015\012 margin 0\015\012 width 50\015\012end
style :separator do\015\012 padding 0, 0, 0, 0\015\012 border 0\015\012 background "#202020"\015\012 foreground "#757575"\015\012end
style :sublets do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#757575"\015\012 background "#202020"\015\012end
style :subtle do\015\012 panel "#202020"\015\012 background "#3d3d3d"\015\012 stipple "#757575"\015\012end
style :title do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#fecf35"\015\012 background "#202020"\015\012end
style :views do\015\012 background "#202020"\015\012end
style :focus do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#fecf35"\015\012 background "#202020"\015\012end
style :occupied do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#b8b8b8"\015\012 background "#202020"\015\012end
style :views do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#757575"\015\012 background "#202020"\015\012end
style :urgent do\015\012 padding 0, 0, 0, 0\015\012 border "#303030", 0\015\012 foreground "#ff9800"\015\012 background "#202020"\015\012end
style :visible do\015\012 border-top "#303030", 2\015\012end
\015\012style :title do\015\012 foreground "#fecf35"\015\012end
\015\012style :title do\015\012 background "#202020"\015\012end
\015\012style :all do\015\012 font "-*-*-*-*-*-*-14-*-*-*-*-*-*-*"\015\012 #font "xft:sans-8"\015\012end
\015\012style :title do\015\012 margin 2\015\012end\015\012\015\012style :title do\015\012 margin 2, 2\015\012end\015\012\015\012style :title do\015\012 margin_top 2\015\012end
\015\012style :title do\015\012 border "#303030", 0\015\012end\015\012\015\012style :title do\015\012 border_top "#303030", 0\015\012end
\015\012style :title do\015\012 padding 2\015\012end\015\012\015\012style :title do\015\012 padding 2, 2\015\012end\015\012\015\012style :title do\015\012 padding_top 2\015\012end
style :clients do\015\012 active "#303030", 2\015\012end
style :views do\015\012 icon "#303030"\015\012end
style :clients do\015\012 inactive "#202020", 2\015\012end
style :subtle do\015\012 panel "#202020"\015\012end\015\012\015\012style :subtle do\015\012 panel_top "#202020"\015\012 panel_bottom "#202020"\015\012end
style :separator do\015\012 separator "|"\015\012end
style :subtle do\015\012 stipple "#757575"\015\012end
style :clients do\015\012 width 50\015\012end
style :title do\015\012 min_width 50\015\012end