1ROFI-THEME(5) File Formats Manual ROFI-THEME(5)
2
6 rofi-theme - Rofi theme format files
7
10 By default, rofi loads the default theme. This theme is always loaded.
11 In the default (always loaded) configuration it does:
12 @theme "default"
15 To unload the default theme, and load another theme, add @theme to your
19 config.rasi file.
20 If you have a theme loaded by @theme or use the default theme, you can
23 tweak it by adding overriding elements at the end of your config.rasi
24 file.
25 For the difference between @import and @theme see the Multiple file
28 handling section in this manpage.
29 To see the default theme, run the following command:
32 rofi -no-config -dump-theme
35
39 The need for a new theme format was motivated by the fact that the way
40 rofi handled widgets has changed. From a very static drawing of lines
41 and text to a nice structured form of packing widgets. This change made
42 it possible to provide a more flexible theme framework. The old theme
43 format and config file are not flexible enough to expose these options
44 in a user-friendly way. Therefore, a new file format has been created,
45 replacing the old one.
46
50 The encoding of the file is utf-8. Both unix (\n) and windows (\r\n)
51 newlines format are supported. But unix is preferred.
52
55 C and C++ file comments are supported.
56 • Anything after // and before a newline is considered a com‐
59 ment.
60 • Everything between /* and */ is a comment.
62 Comments can be nested and the C comments can be inline.
66 The following is valid:
69 // Magic comment.
72 property: /* comment */ value;
73 However, this is not:
77 prop/*comment*/erty: value;
80
84 White space and newlines, like comments, are ignored by the parser.
85 This:
88 property: name;
91 Is identical to:
95 property :
98 name
99 ;
101
105 The preferred file extension for the new theme format is rasi. This is
106 an abbreviation for rofi advanced style information.
107
110 Each element has a section with defined properties. Global properties
111 can be defined in section * { }. Sub-section names begin with a hash
112 symbol #.
113 It is advised to define the global properties section on top of the
116 file to make inheritance of properties clearer.
117 /* Global properties section */
120 * {
121 // list of properties
122 }
123 /* Element theme section. */
125 {element path} {
126 // list of properties
127 }
128 {elements... } {
129 // list of properties
130 }
131 If there are multiple sections with the same name, they are merged. Du‐
135 plicate properties are overwritten and the last parsed entry kept.
136
139 A theme can have one or more global properties sections. If there is
140 more than one, they will be merged.
141 The global properties section denotes the defaults for each element.
144 Each property of this section can be referenced with @{identifier} (See
145 Properties section)
146 A global properties section is indicated with a * as element path.
149
152 A theme can have multiple element theme sections.
153 The element path can consist of multiple names separated by whitespace
156 or dots. Each element may contain any number of letters, numbers and
157 -'s. The first element in the element path should always start with a
158 #. Multiple elements can be specified by a ,.
159 This is a valid element name:
162 element normal.normal {
165 background-color: blue;
166 }
167 button {
168 background-color: blue;
169 }
170 And is identical to:
174 element normal normal, button {
177 background-color: blue;
178 }
179 Each section inherits the global properties. Properties can be explic‐
183 itly inherited from their parent with the inherit keyword. In the fol‐
184 lowing example:
185 window {
188 a: 1;
189 b: 2;
190 children: [ mainbox ];
191 }
192 mainbox {
193 a: inherit;
194 b: 4;
195 c: 8;
196 }
197 The element mainbox will have the following set of properties (if main‐
201 box is a child of window):
202 a: 1;
205 b: 4;
206 c: 8;
207 If multiple sections are defined with the same name, they are merged by
211 the parser. If multiple properties with the same name are defined in
212 one section, the last encountered property is used.
213
216 The properties in a section consist of:
217 {identifier}: {value};
220 Both fields are mandatory for a property.
224 The identifier names the specified property. Identifiers can consist of
227 any combination of numbers, letters and '-'. It must not contain any
228 whitespace. The structure of the value defines the type of the prop‐
229 erty. The current parser does not define or enforce a certain type of a
230 particular identifier. When used, values with the wrong type that can‐
231 not be converted are ignored.
232 The current theme format supports different types:
235 • a string
238 • an integer number
240 • a fractional number
242 • a boolean value
244 • a color
246 • image
248 • text style
250 • line style
252 • a distance
254 • a padding
256 • a border
258 • a position
260 • a reference
262 • an orientation
264 • a cursor
266 • a list of keywords
268 • an array of values
270 • an environment variable
272 • Inherit
274 Some of these types are a combination of other types.
278
281 • Format: "[:print:]+"
282 A string is always surrounded by double quotes ("). Between the quotes
286 there can be any printable character.
287 For example:
290 font: "Awasome 12";
293 The string must be valid UTF-8.
297
300 • Format: [-+]?[:digit:]+
301 An integer may contain any number.
305 For examples:
308 lines: 12;
311
315 • Format: [-+]?[:digit:]+(\.[:digit:]+)?
316 A real is an integer with an optional fraction.
320 For example:
323 real: 3.4;
326 The following is not valid: .3, 3. or scientific notation: 3.4e-3.
330
333 • Format: (true|false)
334 Boolean value is either true or false. This is case-sensitive.
338 For example:
341 dynamic: false;
344
348 rofi support a limited set of background-image formats.
349 • Format: url("path to image");
352 • Format: url("path to image", scale); where scale is: none,
354 both, width, height
355 • Format: linear-gradient(stop color,stop1, color, stop2 color,
357 ...);
358 • Format: linear-gradient(to direction, stop color,stop1, color,
360 stop2 color, ...); where direction is: top,left,right,bot‐
361 tom.
362 • Format: linear-gradient(angle, stop color,stop1, color, stop2
364 color, ...); Angle in deg,rad,grad (as used in color).
365 Where the path is a string, and stop color is of type color.
369
372 rofi supports the color formats as specified in the CSS standard (1,2,3
373 and some of CSS 4)
374 • Format: #{HEX}{3} (rgb)
377 • Format: #{HEX}{4} (rgba)
379 • Format: #{HEX}{6} (rrggbb)
381 • Format: #{HEX}{8} (rrggbbaa)
383 • Format: rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])
385 • Format: rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENT‐
387 AGE}])
388 • Format: hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PER‐
390 CENTAGE}])
391 • Format: hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PER‐
393 CENTAGE}])
394 • Format: cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PER‐
396 CENTAGE} [, {PERCENTAGE} ])
397 • Format: {named-color} [ / {PERCENTAGE} ]
399 The white-space format proposed in CSS4 is also supported.
403 The different values are:
406 • {HEX} is a hexadecimal number ('0-9a-f' case insensitive).
409 • {INTEGER} value can be between 0 and 255 or 0-100 when repre‐
411 senting percentage.
412 • {ANGLE} is the angle on the color wheel, can be in deg, rad,
414 grad or turn. When no unit is specified, degrees is assumed.
415 • {PERCENTAGE} can be between 0-1.0, or 0%-100%
417 •
419 {named-color} is one of the following colors:
422 AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque,
424 Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood,
425 CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Corn‐
426 silk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, Dark‐
427 Gray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveG‐
428 reen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen,
429 DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise,
430 DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue,
431 FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, Ghost‐
432 White, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, Honey‐
433 Dew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, Laven‐
434 derBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, Light‐
435 Cyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen,
436 LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightS‐
437 lateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime,
438 LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue,
439 MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue,
440 MediumSpringGreen, MediumTurquoise, MediumVioletRed, Midnight‐
441 Blue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, Old‐
442 Lace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGolden‐
443 Rod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, Peach‐
444 Puff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red,
445 RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen,
446 SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, Slate‐
447 Grey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato,
448 Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, Yellow‐
449 Green,transparent
450 For example:
454 background-color: #FF0000;
457 border-color: rgba(0,0,1, 0.5);
458 text-color: SeaGreen;
459 or
463 background-color: transparent;
466 text-color: Black;
467
471 • Format: (bold|italic|underline|strikethrough|none)
472 Text style indicates how the highlighted text is emphasized. None indi‐
476 cates that no emphasis should be applied.
477 • bold: make the text thicker then the surrounding text.
480 • italic: put the highlighted text in script type (slanted).
482 • underline: put a line under the highlighted text.
484 • strikethrough: put a line through the highlighted text.
486
490 • Format: (dash|solid)
491 Indicates how a line should be drawn. It currently supports:
495 * dash: a dashed line, where the gap is the same width as the dash
496 * solid: a solid line
497
500 • Format: {Integer}px
501 • Format: {Real}em
503 • Format: {Real}ch
505 • Format: {Real}%
507 • Format: {Integer}mm
509 A distance can be specified in 3 different units:
513 • px: Screen pixels.
516 • em: Relative to text height.
518 • ch: Relative to width of a single number.
520 • mm: Actual size in millimeters (based on dpi).
522 • %: Percentage of the monitor size.
524 Distances used in the horizontal direction use the monitor width. Dis‐
528 tances in the vertical direction use the monitor height. For example:
529 padding: 10%;
532 On a full-HD (1920x1080) monitor, it defines a padding of 192 pixels on
536 the left and right side and 108 pixels on the top and bottom.
537 Calculating sizes
540 Rofi supports some maths in calculating sizes. For this it uses the CSS
541 syntax:
542 width: calc( 100% - 37px );
545 It supports the following operations:
549 • + : Add
552 • - : Subtract
554 • / : Divide
556 • * : Multiply
558 • % : Multiply
560 • min : Minimum of l or rvalue;
562 • max : Maximum of l or rvalue;
564 • floor : Round down lvalue to the next multiple of rvalue
566 • ceil : Round up lvalue to the next multiple of rvalue
568 • round : Round lvalue to the next multiple of rvalue
570 It uses the C precedence ordering.
574
577 • Format: {Integer}
578 • Format: {Distance}
580 • Format: {Distance} {Distance}
582 • Format: {Distance} {Distance} {Distance}
584 • Format: {Distance} {Distance} {Distance} {Distance}
586 If no unit is specified, pixels are assumed.
590 The different number of fields in the formats are parsed like:
593 • 1 field: all
596 • 2 fields: topbottom leftright
598 • 3 fields: top, leftright, bottom
600 • 4 fields: top, right, bottom, left
602
606 • Format: {Integer}
607 • Format: {Distance}
609 • Format: {Distance} {Distance}
611 • Format: {Distance} {Distance} {Distance}
613 • Format: {Distance} {Distance} {Distance} {Distance}
615 • Format: {Distance} {Line style}
617 • Format: {Distance} {Line style} {Distance} {Line style}
619 • Format: {Distance} {Line style} {Distance} {Line style} {Dis‐
621 tance} {Line style}
622 • Format: {Distance} {Line style} {Distance} {Line style} {Dis‐
624 tance} {Line style} {Distance} {Line style}
625 Borders are identical to padding, except that each distance field has a
629 line style property.
630 When no unit is specified, pixels are assumed.
633
636 Indicate a place on the window/monitor.
637 •
640 Format: (center|east|north|west|south|north east|north
643 west|south west|south east)
644 north west | north | north east
646 -------------|-------------|------------
647 west | center | east
648 -------------|-------------|------------
649 south west | south | south east
650
655 It is possible to hide widgets:
656 inputbar {
659 enabled: false; }
660
663 • Format: @{PROPERTY NAME}
664 A reference can point to another reference. Currently, the maximum num‐
668 ber of redirects is 20. A property always refers to another property.
669 It cannot be used for a subpart of the property. For example, this is
670 not valid:
671 highlight: bold @pink;
674 But this is:
678 * {
681 myhigh: bold #FAA;
682 }
683 window {
685 highlight: @myhigh;
686 }
687 • Format: var(PROPERTY NAME, DEFAULT)
691 A reference can point to another reference. Currently, the maximum num‐
695 ber of redirects is 20. A property always refers to another property.
696 It cannot be used for a subpart of the property.
697 Example:
700 window {
703 width: var( width, 30%);
704 }
705 If the property width is set globally (*{}) that value is used, if the
709 property width is not set, the default value is used.
710
713 • Format: (horizontal|vertical)
714 Specify the orientation of the widget.
718
721 • Format: (default|pointer|text)
722 Specify the type of mouse cursor that is set when the mouse pointer is
726 over the widget.
727
730 • Format: [ keyword, keyword ]
731 A list starts with a '[' and ends with a ']'. The entries in the list
735 are comma-separated. The keyword in the list refers to an widget name.
736
739 • Format: [ value, value, ... ]
740 An list starts with a '[' and ends with a ']'. The entries in the list
744 are comma-separated.
745
748 • Format: ${:alnum:}
749 This will parse the environment variable as the property value. (that
753 then can be any of the above types). The environment variable should
754 be an alphanumeric string without white-space.
755 * {
758 background-color: ${BG};
759 }
760 • Format: env(ENVIRONMENT, default)
764 This will parse the environment variable as the property value. (that
768 then can be any of the above types). The environment variable should
769 be an alphanumeric string without white-space. If the environment
770 value is not found, the default value is used.
771 window {
774 width: env(WIDTH, 40%);
775 }
776 If environment WIDTH is set, then that value is parsed, otherwise the
780 default value (40%).
781
784 • Format: inherit
785 Inherits the property from its parent widget.
789 mainbox {
792 border-color: inherit;
793 }
794
798 Element paths exists of two parts, the first part refers to the actual
799 widget by name. Some widgets have an extra state.
800 For example:
803 element selected {
806 }
807 Here element selected is the name of the widget, selected is the state
811 of the widget.
812 The difference between dots and spaces is purely cosmetic. These are
815 all the same:
816 element .selected {
819 element.selected {
821 }
822 element selected {
823 }
824
829 The current widgets available in rofi:
830 • window
833 • overlay: the overlay widget.
836 • mainbox: The mainbox box.
838 • inputbar: The input bar box.
840 • box: the horizontal @box packing the widgets
843 • case-indicator: the case/sort indicator @textbox
845 • prompt: the prompt @textbox
847 • entry: the main entry @textbox
849 • num-rows: Shows the total number of rows.
851 • num-filtered-rows: Shows the total number of rows after
853 filtering.
854 • listview: The listview.
857 • scrollbar: the listview scrollbar
860 • element: a box in the listview holding the entries
862 • element-icon: the widget in the listview's entry showing
865 the (optional) icon
866 • element-index: the widget in the listview's entry key‐
868 bindable index (1,2,3..0)
869 • element-text: the widget in the listview's entry showing
871 the text.
872 • mode-switcher: the main horizontal @box packing the buttons.
876 • button: the buttons @textbox for each mode
879 • message: The container holding the textbox.
882 • textbox: the message textbox
885 Note that these path names match the default theme. Themes that provide
891 a custom layout will have different elements, and structure.
892
895 State: State of widget
896 Optional flag(s) indicating state of the widget, used for theming.
899 These are appended after the name or class of the widget.
902 Example:
905 button selected.normal { }
906 element selected.urgent { }
909 Currently only the entrybox and scrollbar have states:
912 Entrybox:
915 {visible modifier}.{state}
916 Where visible modifier can be:
919 * normal: no modification
920 * selected: the entry is selected/highlighted by user
921 * alternate: the entry is at an alternating row (uneven row)
922 Where state is:
925 * normal: no modification
926 * urgent: this entry is marked urgent
927 * active: this entry is marked active
928 These can be mixed.
931 Example:
934 nametotextbox selected.active {
937 background-color: #003642;
938 text-color: #008ed4;
939 }
940 Sets all selected textboxes marked active to the given text and back‐
944 ground color. Note that a state modifies the original element, it
945 therefore contains all the properties of that element.
946 Scrollbar
949 The scrollbar uses the handle state when drawing the small scrollbar
950 handle. This allows the colors used for drawing the handle to be set
951 independently.
952
955 The following properties are currently supported:
956 all widgets:
959 • enabled: enable/disable the widget
960 • padding: padding Padding on the inside of the widget
962 • margin: padding Margin on the outside of the widget
964 • border: border Border around the widget (between pad‐
966 ding and margin)/
967 • border-radius: padding Sets a radius on the corners of the
969 borders.
970 • background-color: color Background color
972 • background-image: image Background image
974 • border-color: color Color of the border
976 • cursor: cursor Type of mouse cursor that is set when the
978 mouse pointer is hovered over the widget.
979 window:
983 •
984 font: string The font used in the window
987 •
989 transparency: string Indicating if transparency should be
992 used and what type: real - True transparency. Only works with a
993 compositor. background - Take a screenshot of the background
994 image and use that. screenshot - Take a screenshot of the
995 screen and use that. Path to png file - Use an image.
996 •
998 location: position The place of the anchor on the monitor
1001 •
1003 anchor: anchor The anchor position on the window
1006 •
1008 fullscreen: boolean Window is fullscreen.
1011 •
1013 width: distance The width of the window
1016 •
1018 x-offset: distance
1021 •
1023 y-offset: distance The offset of the window to the anchor
1026 point, allowing you to push the window left/right/up/down
1027 scrollbar:
1031 • background-color: color
1032 • handle-width: distance
1034 • handle-color: color
1036 • border-color: color
1038 box:
1042 • orientation: orientation
1043 Set the direction the elements are packed.
1044 • spacing: distance
1046 Distance between the packed elements.
1047 textbox:
1051 • background-color: color
1052 • border-color: the color used for the border around the
1054 widget.
1055 • font: the font used by this textbox (string).
1057 • str: the string to display by this textbox
1059 (string).
1060 • vertical-align: Vertical alignment of the text. A number
1062 between 0 (top) and 1 (bottom).
1063 • horizontal-align: Horizontal alignment of the text. A number
1065 between 0 (left) and 1 (right).
1066 • text-color: the text color to use.
1068 • highlight: text style {color}. color is optional,
1070 multiple highlight styles can be added like: bold underline
1071 italic #000000; This option is only available on the ele‐
1072 ment-text widget.
1073 • width: override the desired width for the textbox.
1075 • content: Set the displayed text (String).
1077 • placeholder: Set the displayed text (String) when noth‐
1079 ing is entered.
1080 • placeholder-color: Color of the placeholder text.
1082 • blink: Enable/Disable blinking on an input textbox
1084 (Boolean).
1085 • markup: Force markup on, beware that only valid
1087 pango markup strings are shown.
1088 • tab-stops: array of distances Set the location of tab
1090 stops by their distance from the beginning of the line. Each
1091 distance should be greater than the previous one. The text
1092 appears to the right of the tab stop position (other align‐
1093 ments are not supported yet).
1094 listview:
1098 • columns: integer Number of columns to show (at least
1099 1)
1100 • fixed-height: boolean Always show lines rows, even if fewer
1102 elements are available.
1103 • dynamic: boolean True if the size should change when
1105 filtering the list, False if it should keep the original
1106 height.
1107 • scrollbar: boolean If the scrollbar should be en‐
1109 abled/disabled.
1110 • scrollbar-width: distance Width of the scrollbar
1112 • cycle: boolean When navigating, it should wrap
1114 around
1115 • spacing: distance Spacing between the elements (both
1117 vertical and horizontal)
1118 • lines: integer Number of rows to show in the list
1120 view.
1121 • layout: orientation Indicate how elements are
1123 stacked. Horizontal implements the dmenu style.
1124 • reverse: boolean Reverse the ordering (top down to
1126 bottom up).
1127 • fixed-columns: boolean Do not reduce the number of columns
1129 shown when number of visible elements is not enough to fill
1130 them all.
1131 Each element is a box called element. Each element can contain an ele‐
1135 ment-icon and element-text.
1136 listview text highlight:
1139 The element-text widget in the listview is the one used to show the
1140 text. On this widget set the highlight property (only place this prop‐
1141 erty is used) to change the style of highlighting. The highlight prop‐
1142 erty consist of the text-style property and a color.
1143 To disable highlighting:
1146 element-text {
1149 highlight: None;
1150 }
1151 To set to red underlined:
1155 element-text {
1158 highlight: underline red;
1159 }
1160
1164 The new format allows the layout of the rofi window to be tweaked ex‐
1165 tensively. For each widget, the themer can specify padding, margin,
1166 border, font, and more. It even allows, as an advanced feature, to
1167 pack widgets in a custom structure.
1168 Basic structure
1171 The whole view is made out of boxes that pack other boxes or widgets.
1172 The box can be vertical or horizontal. This is loosely inspired by GTK
1173 ⟨http://gtk.org/⟩.
1174 The current layout of rofi is structured as follows:
1177 |------------------------------------------------------------------------------------|
1180 | window {BOX:vertical} |
1181 | |-------------------------------------------------------------------------------| |
1182 | | mainbox {BOX:vertical} | |
1183 | | |---------------------------------------------------------------------------| | |
1184 | | | inputbar {BOX:horizontal} | | |
1185 | | | |---------| |-| |---------------------------------|---| |---| |---| |---| | | |
1186 | | | | prompt | |:| | entry |#fr| | / | |#ns| |ci | | | |
1187 | | | |---------| |_| |---------------------------------|---| |---| |---| |---| | | |
1188 | | |---------------------------------------------------------------------------| | |
1189 | | | |
1190 | | |---------------------------------------------------------------------------| | |
1191 | | | message | | |
1192 | | | |-----------------------------------------------------------------------| | | |
1193 | | | | textbox | | | |
1194 | | | |-----------------------------------------------------------------------| | | |
1195 | | |---------------------------------------------------------------------------| | |
1196 | | | |
1197 | | |-----------------------------------------------------------------------------| |
1198 | | | listview | |
1199 | | | |------------------------------------------------------------------------] | |
1200 | | | | element | | |
1201 | | | | |-----------------| |------------------------------------------------] | | |
1202 | | | | |element-icon | |element-text | | | |
1203 | | | | |-----------------| |------------------------------------------------| | | |
1204 | | | |------------------------------------------------------------------------] | |
1205 | | |-----------------------------------------------------------------------------| |
1206 | | | |
1207 | | |---------------------------------------------------------------------------| | |
1208 | | | mode-switcher {BOX:horizontal} | | |
1209 | | | |---------------| |---------------| |--------------| |---------------| | | |
1210 | | | | Button | | Button | | Button | | Button | | | |
1211 | | | |---------------| |---------------| |--------------| |---------------| | | |
1212 | | |---------------------------------------------------------------------------| | |
1213 | |-------------------------------------------------------------------------------| |
1214 |------------------------------------------------------------------------------------|
1215 • ci is the case-indicator
1221 • fr is the num-filtered-rows
1223 • ns is the num-rows
1225 Error message structure
1230 |-----------------------------------------------------------------------------------|
1231 | window {BOX:vertical} |
1232 | |------------------------------------------------------------------------------| |
1233 | | error-message {BOX:vertical} | |
1234 | | |-------------------------------------------------------------------------| | |
1235 | | | textbox | | |
1236 | | |-------------------------------------------------------------------------| | |
1237 | |------------------------------------------------------------------------------| |
1238 |-----------------------------------------------------------------------------------|
1239 Advanced layout
1245 The layout of rofi can be tweaked by packing the 'fixed' widgets in a
1246 custom structure.
1247 The following widgets are fixed, as they provide core rofi functional‐
1250 ity:
1251 • prompt
1254 • entry
1256 • overlay
1258 • case-indicator
1260 • message
1262 • listview
1264 • mode-switcher
1266 • num-rows
1268 • num-filtered-rows
1270 The following keywords are defined and can be used to automatically
1274 pack a subset of the widgets. These are used in the default theme as
1275 depicted in the figure above.
1276 • mainbox Packs: inputbar, message, listview, mode-switcher
1279 • inputbar Packs: prompt,entry,case-indicator
1281 Any widget name starting with textbox is a textbox widget, others are
1285 box widgets and can pack other widgets.
1286 There are several special widgets that can be used by prefixing the
1289 name of the widget:
1290 textbox
1293 This is a read-only textbox widget. The displayed string can be set
1294 with content.
1295 Example:
1298 textbox-custom {
1301 expand: false;
1302 content: "My Message";
1303 }
1304 Icon
1308 This is an icon widget. The displayed icon can be set with filename and
1309 size with size. If the property action is set, it acts as a button.
1310 action can be set to a keybinding name and completes that action. (see
1311 rofi -show keys for a list).
1312 If the squared property is set to false the widget height and width are
1315 not forced to be equal.
1316 Example:
1319 icon-paste {
1322 expand: false;
1323 filename: "gtk-paste";
1324 size: 24;
1325 vertical-align: 0.5;
1326 action: "kb-primary-paste";
1327 }
1328 button
1332 This is a textbox widget that can have a 'clickable' action. The ac‐
1333 tion can be set to: keybinding: accepts a keybinding name and completes
1334 that action. (see rofi -show keys for a list).
1335 button-paste {
1338 expand: false;
1339 content: "My Clickable Message";
1340 vertical-align: 0.5;
1341 action: "kb-primary-paste";
1342 }
1343 Children
1347 To specify children, set the children property (this always happens on
1348 the box child, see example below):
1349 inputbar {
1352 children: [prompt,entry,overlay,case-indicator];
1353 }
1354 The theme needs to be updated to match the hierarchy specified.
1358 Below is an example of a theme emulating dmenu:
1361 * {
1364 background-color: Black;
1365 text-color: White;
1366 border-color: White;
1367 font: "Times New Roman 12";
1368 }
1369 window {
1371 anchor: north;
1372 location: north;
1373 width: 100%;
1374 padding: 4px;
1375 children: [ horibox ];
1376 }
1377 horibox {
1379 orientation: horizontal;
1380 children: [ prompt, entry, listview ];
1381 }
1382 listview {
1384 layout: horizontal;
1385 spacing: 5px;
1386 lines: 10;
1387 }
1388 entry {
1390 expand: false;
1391 width: 10em;
1392 }
1393 element {
1395 padding: 0px 2px;
1396 }
1397 element selected {
1398 background-color: SteelBlue;
1399 }
1400 Padding and margin
1404 Just like CSS, rofi uses the box model for each widget.
1405 |-------------------------------------------------------------------|
1408 | margin |
1409 | |-------------------------------------------------------------| |
1410 | | border | |
1411 | | |---------------------------------------------------------| | |
1412 | | | padding | | |
1413 | | | |-----------------------------------------------------| | | |
1414 | | | | content | | | |
1415 | | | |-----------------------------------------------------| | | |
1416 | | |---------------------------------------------------------| | |
1417 | |-------------------------------------------------------------| |
1418 |-------------------------------------------------------------------|
1419 Explanation of the different parts:
1423 • Content - The content of the widget.
1426 • Padding - Clears an area around the widget. The padding shows
1428 the background color of the widget.
1429 • Border - A border that goes around the padding and content.
1431 The border use the border-color of the widget.
1432 • Margin - Clears an area outside the border. The margin is
1434 transparent.
1435 The box model allows us to add a border around elements, and to define
1439 space between elements.
1440 The size of each margin, border, and padding can be set. For the bor‐
1443 der, a linestyle and radius can be set.
1444 Spacing
1447 Widgets that can pack more then one child widget (currently box and
1448 listview) have the spacing property. This property sets the distance
1449 between the packed widgets (both horizontally and vertically).
1450 |---------------------------------------|
1453 | |--------| s |--------| s |-------| |
1454 | | child | p | child | p | child | |
1455 | | | a | | a | | |
1456 | | | c | | c | | |
1457 | | | i | | i | | |
1458 | | | n | | n | | |
1459 | |--------| g |--------| g |-------| |
1460 |---------------------------------------|
1461 Advanced box packing
1465 More dynamic spacing can be achieved by adding dummy widgets, for exam‐
1466 ple to make one widget centered:
1467 |----------------------------------------------------|
1470 | |---------------| |--------| |---------------| |
1471 | | dummy | | child | | dummy | |
1472 | | expand: true; | | | | expand: true; | |
1473 | | | | | | | |
1474 | | | | | | | |
1475 | | | | | | | |
1476 | |---------------| |--------| |---------------| |
1477 |----------------------------------------------------|
1478 If both dummy widgets are set to expand, child will be centered. De‐
1482 pending on the expand flag of child the remaining space will be equally
1483 divided between both dummy and child widget (expand enabled), or both
1484 dummy widgets (expand disabled).
1485
1488 To get debug information from the parser, run rofi like:
1489 G_MESSAGES_DEBUG=Parser rofi -show run
1492 Syntax errors are shown in a popup and printed out to command line with
1496 the above command.
1497 To see the elements queried during running, run:
1500 G_MESSAGES_DEBUG=Theme rofi -show run
1503 To test minor changes, part of the theme can be passed on the command
1507 line, for example to set it to full-screen:
1508 rofi -theme-str 'window { fullscreen:true;}' -show run
1511 Another syntax to modify theme properties is:
1515 rofi -theme+window+fullscreen true -show run
1518 To print the current theme, run:
1522 rofi -dump-theme
1525
1529 Parts of the theme can be conditionally loaded, like the CSS @media op‐
1530 tion.
1531 @media ( min-width: 120 ) {
1534 }
1536 It supports the following keys as constraint:
1540 • min-width: load when width is bigger or equal then
1543 value.
1544 • max-width: load when width is smaller then value.
1546 • min-height: load when height is bigger or equal then
1548 value.
1549 • max-height: load when height is smaller then value.
1551 • min-aspect-ratio load when aspect ratio is over value.
1553 • max-aspect-ratio: load when aspect ratio is under value.
1555 • monitor-id: The monitor id, see rofi -help for id's.
1557 @media takes an integer number or a fraction, for integer number px can
1561 be added.
1562 @media ( min-width: 120 px ) {
1565 }
1567
1571 Rofi uses pango ⟨https://pango.gnome.org/⟩ for font rendering. The font
1572 should be specified in a format that pango understands. This normally
1573 is the font name followed by the font size. For example:
1574 mono 18
1577 Or
1581 FontAwesome 22
1584
1588 The rasi file format offers two methods of including other files. This
1589 can be used to modify existing themes, or have multiple variations on a
1590 theme.
1591 • import: Import and parse a second file.
1594 • theme: Discard theme, and load file as a fresh theme.
1596 Syntax:
1600 @import "myfile"
1603 @theme "mytheme"
1604 The specified file can either by name, filename,full path.
1608 If a filename is provided, it will try to resolve it in the following
1611 order:
1612 • ${XDG_CONFIG_HOME}/rofi/themes/
1615 • ${XDG_CONFIG_HOME}/rofi/
1617 • ${XDG_DATA_HOME}/rofi/themes/
1619 • ${INSTALL PREFIX}/share/rofi/themes/
1621 A name is resolved as a filename by appending the .rasi extension.
1625
1628 Several examples are installed together with rofi. These can be found
1629 in {datadir}/rofi/themes/, where {datadir} is the install path of rofi
1630 data. When installed using a package manager, this is usually:
1631 /usr/share/.
1632
1635 rofi(1), rofi-script(5), rofi-theme-selector(1)
1636 rofi-theme ROFI-THEME(5)