Styles¶

• Table of contents
• Styles
  • Box model
  • Cascading
    • All
  • Substyles
  • Styleable items
    • Clients
    • Separator
    • Sublets
      • Separator
    • Subtle
    • Title
    • Views
      • Focus
      • Occupied
      • Urgent
      • Visible
      • Separator
  • Properties
    • Foreground
    • Background
    • Font
    • Margin
    • Border
    • Padding
    • Active
    • Icon
    • Inactive
    • Panel
    • Separator
    • Stipple
    • Width
    • Min_width

Styles are used to define various properties of styleable items in a CSS-like syntax.

Box model¶

Every 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)

Here is a layout for better understanding:

                                     Top
     +-----------------------------------------------------------------+
     |                              Margin                             |
     |        +-----------------------------------------------+        |
     |        |                     Border                    |        |
     |        |        +-----------------------------+        |        |
     |        |        |           Padding           |        |        |
     |        |        |         +---------+         |        |        |
Left | Margin | Border | Padding | Content | Padding | Border | Margin | Right
     |        |        |         +---------+         |        |        |
     |        |        |           Padding           |        |        |
     |        |        +-----------------------------+        |        |
     |        |                    Border                     |        |
     |        +-----------------------------------------------+        |
     |                             Margin                              |
     +-----------------------------------------------------------------+
                                   Bottom

The various properties of a style have different meanings for each box:

Property	Meaning
foreground	Sets the foreground color of the content box
background	Sets the background color of the content and the padding box
border	Sets the background color of the border box (per side)

{{info(The margin box is always transparent.)}}

Cascading¶

Like CSS syntax, styles in subtle support simple cascading. That means that properties set for All are inherited by other styleable items.

All¶

Defines properties for most of the styleable elements.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Icon

Example:

style :all do
  padding     0, 0, 0, 0
  border      "#303030", 0
  foreground  "#fecf35" 
  background  "#202020" 
end

{{needs(2979)}}

Substyles¶

Styles 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.

Sublets automatically check for a substyle matching to their name and otherwise fallback to the :sublets style.

Styleable items¶

Clients¶

Defines properties for active and inactive clients.

{{info(margin is the former :gap option)}}

Supported properties: Margin, Active, Inactive, Width

Example:

style :clients do
  active      "#303030", 2
  inactive    "#202020", 2
  margin      0
  width       50
end

Separator¶

Defines properties for the panel separator.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Font, Separator

Inherits from: All

Example:

style :separator do
  padding     0, 0, 0, 0
  border      0
  background  "#202020" 
  foreground  "#757575" 
end

Sublets¶

Defines properties for sublets in the panel.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Font

Inherits from: All

Example:

style :sublets do
  padding     0, 0, 0, 0
  border      "#303030", 0
  foreground  "#757575" 
  background  "#202020" 
end

{{needs(3097)}}

Separator¶

Defines properties for the sublet separator.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Font, Separator

Inherits from: Sublets

Example:

style :separator do
  padding     0, 0, 0, 0
  border      0
  background  "#202020" 
  foreground  "#757575" 
end

Subtle¶

Defines properties for subtle.

{{info(padding is the former :strut option)}}

Supported properties: Background, Padding, Panel, Stipple

Example:

style :subtle do
  panel       "#202020" 
  background  "#3d3d3d" 
  stipple     "#757575" 
end

Title¶

Defines properties for the title of current client.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Font

Inherits from: All

Example:

style :title do
  padding     0, 0, 0, 0
  border      "#303030", 0
  foreground  "#fecf35" 
  background  "#202020" 
end

Views¶

Defines properties for view-related styleable elements.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font

Inherits from: All

Example:

style :views do
  background  "#202020" 
end

Focus¶

Defines properties for current active view.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font

Inherits from: Views

Example:

style :focus do
  padding     0, 0, 0, 0
  border      "#303030", 0
  foreground  "#fecf35" 
  background  "#202020" 
end

Occupied¶

Defines properties for views with at least one client.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font

Inherits from: Views

Example:

style :occupied do
  padding     0, 0, 0, 0
  border      "#303030", 0
  foreground  "#b8b8b8" 
  background  "#202020" 
end

Urgent¶

Defines properties for views with urgent clients.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font

Inherits from: {{info(This style doesn't inherit values and is used additionally to other view styles like occupied.)}}

Example:

style :urgent do
  padding     0, 0, 0, 0
  border      "#303030", 0
  foreground  "#ff9800" 
  background  "#202020" 
end

{{needs(3023)}}

Visible¶

Defines properties for views that are visible on any screen.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Icon, Font

Inherits from: {{info(This style doesn't inherit values and is used additionally to other view styles like occupied.)}}

Example:

style :visible do
  border-top "#303030", 2
end

{{needs(3097)}}

Separator¶

Defines properties for the views separator.

Supported properties: Foreground, Background, Margin, Border, Padding, Min_width, Font, Separator

Inherits from: Views

Example:

style :separator do
  padding     0, 0, 0, 0
  border      0
  background  "#202020" 
  foreground  "#757575" 
end

Properties¶

Following properties can be set for supported items:

Foreground¶

This property sets the foreground/text color.

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible

Example:

style :title do
  foreground "#fecf35" 
end

Background¶

This property sets the background color.

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible

Example:

style :title do
  background "#202020" 
end

{{needs(3066)}}

Font¶

This property sets the font and expects a string. The font string can either be from xfontsel or a valid XFT font description.

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible

Example:

style :all do
  font  "-*-*-*-*-*-*-14-*-*-*-*-*-*-*" 
  #font "xft:sans-8" 
end

Margin¶

This property sets a transparent (no background) outer spacing in given directions. Following notations are supported:

margin 2	Set space for all four directions
margin 2, 2	Set space for top/bottom and left/right
margin 2, 2, 2	Set space for top, left/right and bottom (top, right, bottom, left)
margin 2, 2, 2, 2	Set space for all four directions
margin_top 2	Set space for top side
margin_right 2	Set space for right side
margin_bottom 2	Set space for bottom side
margin_left 2	Set space for left side

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible

Example:

style :title do
  margin 2
end

style :title do
  margin 2, 2
end

style :title do
  margin_top 2
end

Border¶

This property sets the border color and size. Following notations are supported:

border "#303030", 0	Set border color and size of all four borders
border_top "#303030", 0	Set border color and size of top border
border_right "#303030", 0	Set border color and size of right border
border_bottom "#303030", 0	Set border color and size of bottom border
border_left "#303030", 0	Set border color and size of left border

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible

Example:

style :title do
  border "#303030", 0
end

style :title do
  border_top    "#303030", 0
end

Padding¶

This property sets an inner spacing between border and content in given directions. Following notations are supported:

padding 2	Set space for all four directions
padding 2, 2	Set space for top/bottom and left/right
padding 2, 2, 2	Set space for top, left/right and bottom (top, right, bottom, left)
padding 2, 2, 2, 2	Set space for all four directions
padding_top 2	Set space for top side
padding_right 2	Set space for right side
padding_bottom 2	Set space for bottom side
padding_left 2	Set space for left side

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible, Subtle

Example:

style :title do
  padding 2
end

style :title do
  padding 2, 2
end

style :title do
  padding_top 2
end

Active¶

This property sets the border color and size of the current active client.

Applicable to: Clients

Example:

style :clients do
  active "#303030", 2
end

{{needs(r2979)}}

Icon¶

This property sets the color of any icons in this panel item.

Applicable to: All, Focus, Urgent, Occupied, Views, Sublets, Visible

Example:

style :views do
  icon "#303030" 
end

Inactive¶

This property sets the border color and size of all other clients.

{{info(The border size of inactive clients is ignored, because different sizes would require many size and position changes everytime the focus moves.)}}

Applicable to: Clients

Example:

style :clients do
  inactive "#202020", 2
end

Panel¶

This property sets the panel color. Following notations are supported:

panel "#000000"	Set color of both panels
panel_top "#000000"	Set color of top panel
panel_bottom "#000000"	Set color of bottom panel

Applicable to: Subtle

Example:

style :subtle do
  panel "#202020" 
end

style :subtle do
  panel_top    "#202020" 
  panel_bottom "#202020" 
end

{{needs(3097)}}

Separator¶

This property sets the separator string.

Applicable to: Separator

Example:

style :separator do
  separator "|" 
end

Stipple¶

This property sets the color of the panel stippling if any.

Applicable to: Subtle

Example:

style :subtle do
  stipple "#757575" 
end

Width¶

This property sets the string length in character, default is 50 characters.

Applicable to: Clients

Example:

style :clients do
  width 50
end

Min_width¶

This property sets the min. pixel width of a panel item.

Applicable to: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator, Visible

Example:

style :title do
  min_width 50
end