1ROFI-THEME(5)                                                    ROFI-THEME(5)
2
3
4

NAME

6       rofi-theme - Rofi theme format files
7

DESCRIPTION

9       The  need for a new theme format was motivated by the fact that the way
10       rofi handled widgets has changed. From a very static drawing  of  lines
11       and text to a nice structured form of packing widgets. This change made
12       it possible to provide a more flexible theme framework. The  old  theme
13       format  and config file are not flexible enough to expose these options
14       in a user-friendly way. Therefor, a new file format has  been  created,
15       replacing the old one.
16

FORMAT SPECIFICATION

Encoding

19       The  encoding  of  the file is utf-8. Both unix (\n) and windows (\r\n)
20       newlines format are supported. But unix is preferred.
21

Comments

23       C and C++ file comments are supported.
24
25       ·   Anything after // and before a newline is considered a comment.
26
27       ·   Everything between /* and */ is a comment.
28
29
30
31       Comments can be nested and the C comments can be inline.
32
33       The following is valid:
34
35
36
37           // Magic comment.
38           property: /* comment */ value;
39
40
41
42       However, this is not:
43
44
45
46           prop/*comment*/erty: value;
47
48
49

White space

51       White space and newlines, like comments, are ignored by the parser.
52
53       This:
54
55
56
57           property: name;
58
59
60
61       Is identical to:
62
63
64
65                property             :
66           name
67
68           ;
69
70
71

File extension

73       The preferred file extension for the new theme format is rasi. This  is
74       an abbreviation for rofi advanced style information.
75

BASIC STRUCTURE

77       Each  element  has a section with defined properties. Global properties
78       can be defined in section * { }. Sub-section names begin  with  a  hash
79       symbol #.
80
81       It  is  advised  to  define the global properties section on top of the
82       file to make inheritance of properties clearer.
83
84
85
86           /* Global properties section */
87           * {
88               // list of properties
89           }
90
91           /* Element theme section. */
92           {element path} {
93               // list of properties
94           }
95           {elements... } {
96               // list of properties
97           }
98
99
100
101       If there are multiple sections with the same  name,  they  are  merged.
102       Duplicate properties are overwritten and the last parsed entry kept.
103

Global properties section

105       A  theme  can  have one or more global properties sections. If there is
106       more than one, they will be merged.
107
108       The global properties section denotes the defaults  for  each  element.
109       Each property of this section can be referenced with @{identifier} (See
110       Properties section)
111
112       A global properties section is indicated with a * as element path.
113

Element theme section

115       A theme can have multiple element theme sections.
116
117       The element path can consist of multiple names separated by  whitespace
118       or  dots.  Each  element may contain any number of letters, numbers and
119       -´s. The first element in the element path should always start  with  a
120       #. Multiple elements can be specified by a ,.
121
122       This is a valid element name:
123
124
125
126           element normal.normal {
127               background-color: blue;
128           }
129           button {
130               background-color: blue;
131           }
132
133
134
135       And is identical to:
136
137
138
139           element normal normal, button {
140               background-color: blue;
141           }
142
143
144
145       Each  section inherits the global properties. Properties can be explic‐
146       itly inherited from their parent with the inherit keyword. In the  fol‐
147       lowing example:
148
149
150
151           window {
152            a: 1;
153            b: 2;
154           }
155           mainbox {
156               a: inherit;
157               b: 4;
158               c: 8;
159           }
160
161
162
163       The element mainbox will have the following set of properties (if main‐
164       box is a child of window):
165
166
167
168           a: 1;
169           b: 4;
170           c: 8;
171
172
173
174       If multiple sections are defined with the same name, they are merged by
175       the  parser.  If  multiple properties with the same name are defined in
176       one section, the last encountered property is used.
177

PROPERTIES FORMAT

179       The properties in a section consist of:
180
181
182
183           {identifier}: {value};
184
185
186
187       Both fields are mandatory for a property.
188
189       The identifier names the specified property. Identifiers can consist of
190       any  combination  of  numbers, letters and ´-´. It must not contain any
191       whitespace. The structure of the value defines the type  of  the  prop‐
192       erty. The current parser does not define or enforce a certain type of a
193       particular identifier. When used, values with the wrong type that  can‐
194       not be converted are ignored.
195
196       The current theme format supports different types:
197
198       ·   a string
199
200       ·   an integer number
201
202       ·   a fractional number
203
204       ·   a boolean value
205
206       ·   a color
207
208       ·   text style
209
210       ·   line style
211
212       ·   a distance
213
214       ·   a padding
215
216       ·   a border
217
218       ·   a position
219
220       ·   a reference
221
222       ·   an orientation
223
224       ·   a list of keywords
225
226       ·   an environment variable
227
228       ·   Inherit
229
230
231
232       Some of these types are a combination of other types.
233

String

235       ·   Format: "[:print:]+"
236
237
238
239       A  string is always surrounded by double quotes ("). Between the quotes
240       there can be any printable character.
241
242       For example:
243
244
245
246           font: "Awasome 12";
247
248
249
250       The string must be valid UTF-8.
251

Integer

253       ·   Format: [-+]?[:digit:]+
254
255
256
257       An integer may contain any number.
258
259       For examples:
260
261
262
263           lines: 12;
264
265
266

Real

268       ·   Format: [-+]?[:digit:]+(\.[:digit:]+)?
269
270
271
272       A real is an integer with an optional fraction.
273
274       For example:
275
276
277
278           real: 3.4;
279
280
281
282       The following is not valid: .3, 3. or scientific notation: 3.4e-3.
283

Boolean

285       ·   Format: (true|false)
286
287
288
289       Boolean value is either true or false. This is case-sensitive.
290
291       For example:
292
293
294
295           dynamic: false;
296
297
298

Color

300       rofi supports the color formats as specified in the CSS standard (1,2,3
301       and some of CSS 4)
302
303       ·   Format: #{HEX}{3} (rgb)
304
305       ·   Format: #{HEX}{4} (rgba)
306
307       ·   Format: #{HEX}{6} (rrggbb)
308
309       ·   Format: #{HEX}{8} (rrggbbaa)
310
311       ·   Format: rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])
312
313       ·   Format: rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}])
314
315       ·   Format:  hsl[a](  {ANGLE},  {PERCENTAGE}, {PERCENTAGE} [, {PERCENT‐
316           AGE}])
317
318       ·   Format: hwb[a]( {ANGLE}, {PERCENTAGE},  {PERCENTAGE}  [,  {PERCENT‐
319           AGE}])
320
321       ·   Format:  cmyk(  {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENT‐
322           AGE} [, {PERCENTAGE} ])
323
324       ·   Format: {named-color} [ / {PERCENTAGE} ]
325
326
327
328       The white-space format proposed in CSS4 is also supported.
329
330       The different values are:
331
332       ·   {HEX} is a hexadecimal number (´0-9a-f´ case insensitive).
333
334       ·   {INTEGER} value can be between 0 and 255 or 0-100 when representing
335           percentage.
336
337       ·   {ANGLE}  is  the angle on the color wheel, can be in deg, rad, grad
338           or turn. When no unit is specified, degrees is assumed.
339
340       ·   {PERCENTAGE} can be between 0-1.0, or 0%-100%
341
342       ·   {named-color} is one of the following colors:
343
344           AliceBlue, AntiqueWhite, Aqua, Aquamarine,  Azure,  Beige,  Bisque,
345           Black,  BlanchedAlmond,  Blue, BlueViolet, Brown, BurlyWood, Cadet‐
346           Blue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crim‐
347           son,  Cyan,  DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey,
348           DarkGreen,  DarkKhaki,  DarkMagenta,  DarkOliveGreen,   DarkOrange,
349           DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, Dark‐
350           SlateGray,  DarkSlateGrey,  DarkTurquoise,  DarkViolet,   DeepPink,
351           DeepSkyBlue,  DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite,
352           ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray,
353           Grey,  Green,  GreenYellow,  HoneyDew,  HotPink, IndianRed, Indigo,
354           Ivory, Khaki,  Lavender,  LavenderBlush,  LawnGreen,  LemonChiffon,
355           LightBlue,  LightCoral, LightCyan, LightGoldenRodYellow, LightGray,
356           LightGrey,  LightGreen,  LightPink,   LightSalmon,   LightSeaGreen,
357           LightSkyBlue,   LightSlateGray,   LightSlateGrey,   LightSteelBlue,
358           LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMa‐
359           rine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, Medi‐
360           umSlateBlue, MediumSpringGreen,  MediumTurquoise,  MediumVioletRed,
361           MidnightBlue,  MintCream,  MistyRose,  Moccasin, NavajoWhite, Navy,
362           OldLace, Olive, OliveDrab, Orange, OrangeRed,  Orchid,  PaleGolden‐
363           Rod,  PaleGreen,  PaleTurquoise,  PaleVioletRed, PapayaWhip, Peach‐
364           Puff, Peru, Pink, Plum,  PowderBlue,  Purple,  RebeccaPurple,  Red,
365           RosyBrown,  RoyalBlue,  SaddleBrown,  Salmon, SandyBrown, SeaGreen,
366           SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey,
367           Snow,   SpringGreen,   SteelBlue,   Tan,   Teal,  Thistle,  Tomato,
368           Turquoise,  Violet,  Wheat,  White,  WhiteSmoke,  Yellow,   Yellow‐
369           Green,transparent
370
371
372
373       For example:
374
375
376
377           background-color: #FF0000;
378           border-color: rgba(0,0,1, 0.5);
379           text-color: SeaGreen;
380
381
382
383       or
384
385
386
387           background-color: transparent;
388           text-color: Black;
389
390
391

Text style

393       ·   Format: (bold|italic|underline|strikethrough|none)
394
395
396
397       Text style indicates how the highlighted text is emphasized. None indi‐
398       cates that no emphasis should be applied.
399
400       ·   bold: make the text thicker then the surrounding text.
401
402       ·   italic: put the highlighted text in script type (slanted).
403
404       ·   underline: put a line under the highlighted text.
405
406       ·   strikethrough: put a line through the highlighted text.
407
408       ·   small caps: emphasise the text using capitalization.
409
410
411

Line style

413       ·   Format: (dash|solid)
414
415
416
417       Indicates how a line should be drawn. It currently supports: * dash:  a
418       dashed  line,  where  the  gap is the same width as the dash * solid: a
419       solid line
420

Distance

422       ·   Format: {Integer}px
423
424       ·   Format: {Real}em
425
426       ·   Format: {Real}ch
427
428       ·   Format: {Real}%
429
430
431
432       A distance can be specified in 3 different units:
433
434       ·   px: Screen pixels.
435
436       ·   em: Relative to text height.
437
438       ·   ch: Relative to width of a single number.
439
440       ·   %: Percentage of the monitor size.
441
442
443
444       Distances used in the horizontal direction use the monitor width.  Dis‐
445       tances in the vertical direction use the monitor height. For example:
446
447
448
449              padding: 10%;
450
451
452
453       On a full-HD (1920x1080) monitor, it defines a padding of 192 pixels on
454       the left and right side and 108 pixels on the top and bottom.
455

Padding

457       ·   Format: {Integer}
458
459       ·   Format: {Distance}
460
461       ·   Format: {Distance} {Distance}
462
463       ·   Format: {Distance} {Distance} {Distance}
464
465       ·   Format: {Distance} {Distance} {Distance} {Distance}
466
467
468
469       If no unit is specified, pixels are used.
470
471       The different number of fields in the formats are parsed like:
472
473       ·   1 field: all
474
475       ·   2 fields: top&bottom left&right
476
477       ·   3 fields: top, left&right, bottom
478
479       ·   4 fields: top, right, bottom, left
480
481
482

Border

484       ·   Format: {Integer}
485
486       ·   Format: {Distance}
487
488       ·   Format: {Distance} {Distance}
489
490       ·   Format: {Distance} {Distance} {Distance}
491
492       ·   Format: {Distance} {Distance} {Distance} {Distance}
493
494       ·   Format: {Distance} {Line style}
495
496       ·   Format: {Distance} {Line style} {Distance} {Line style}
497
498       ·   Format: {Distance} {Line style} {Distance} {Line style}  {Distance}
499           {Line style}
500
501       ·   Format:  {Distance} {Line style} {Distance} {Line style} {Distance}
502           {Line style} {Distance} {Line style}
503
504
505
506       Borders are identical to padding, except that each distance field has a
507       line style property.
508

Position

510       Indicate a place on the window/monitor.
511
512       ·   Format:  (center|east|north|west|south|north  east|north west|south
513           west|south east)
514
515
516
517
518
519
520           north west   |    north    |  north east
521           -------------|-------------|------------
522                 west   |   center    |  east
523           -------------|-------------|------------
524           south west   |    south    |  south east
525
526
527

Visibility

529       It is possible to hide widgets:
530
531       inputbar { enabled: false; }
532

Reference

534       ·   Format: @{PROPERTY NAME}
535
536
537
538       A reference can point to another reference. Currently, the maximum num‐
539       ber  of  redirects is 20. A property always refers to another property.
540       It cannot be used for a subpart of the property. For example,  this  is
541       not valid:
542
543
544
545           highlight: bold @pink;
546
547
548
549       But this is:
550
551
552
553           * {
554               myhigh: bold #FAA;
555           }
556
557           window {
558               highlight: @myhigh;
559           }
560
561
562

Orientation

564       ·   Format: (horizontal|vertical)
565
566
567
568       Specify the orientation of the widget.
569

List of keywords

571       ·   Format: [ keyword, keyword ]
572
573
574
575       A  list  starts with a ´[´ and ends with a ´]´. The entries in the list
576       are comma-separated. The keyword in the list refers to an widget name.
577

Environment variable

579       ·   Format: ${:alnum:}
580
581
582
583       This will parse the environment variable as the property  value.  (that
584       then can be any of the above types). The environment variable should be
585       an alphanumeric string without white-space.
586
587
588
589           * {
590               background-color: ${BG};
591           }
592
593
594

Inherit

596       ·   Format: inherit
597
598
599
600       Inherits the property from its parent widget.
601
602
603
604           mainbox {
605               border-color: inherit;
606           }
607
608
609

ELEMENTS PATHS

611       Element paths exists of two parts, the first part refers to the  actual
612       widget by name. Some widgets have an extra state.
613
614       For example:
615
616
617
618           element selected {
619           }
620
621
622
623       Here  element selected is the name of the widget, selected is the state
624       of the widget.
625
626       The difference between dots and spaces is purely  cosmetic.  These  are
627       all the same:
628
629
630
631           element .selected {
632
633           element.selected {
634           }
635           element selected {
636           }
637
638
639

SUPPORTED ELEMENT PATH

Name

642       The current widgets available in rofi:
643
644       ·
645
646       ·   overlay: the overlay widget.
647
648       ·
649
650       ·
651
652       ·   box: the horizontal @box packing the widgets
653
654       ·   case-indicator: the case/sort indicator @textbox
655
656       ·   prompt: the prompt @textbox
657
658       ·   entry: the main entry @textbox
659
660
661
662
663       ·
664
665       ·   scrollbar: the listview scrollbar
666
667       ·   element: the entries in the listview
668
669
670
671
672       ·
673
674       ·   button: the buttons @textbox for each mode
675
676
677
678
679       ·
680
681       ·   textbox: the message textbox
682
683
684
685
686
687
688
689
690
691
692
693
694       Note that these path names match the default theme. Themes that provide
695       a custom layout will have different element paths.
696

State

698       State: State of widget
699
700       Optional flag(s) indicating state of the widget, used for theming.
701
702       These are appended after the name or class of the widget.
703
704   Example:
705       button selected.normal { }
706
707       element selected.urgent { }
708
709       Currently only the entrybox and scrollbar have states:
710
711   Entrybox:
712       {visible modifier}.{state}
713
714       Where visible modifier can be: * normal: no  modification  *  selected:
715       the  entry is selected/highlighted by user * alternate: the entry is at
716       an alternating row (uneven row)
717
718       Where state is: * normal: no  modification  *  urgent:  this  entry  is
719       marked urgent * active: this entry is marked active
720
721       These can be mixed.
722
723       Example:
724
725
726
727           nametotextbox selected.active {
728               background-color: #003642;
729               text-color: #008ed4;
730           }
731
732
733
734       Sets  all  selected textboxes marked active to the given text and back‐
735       ground color. Note that a  state  modifies  the  original  element,  it
736       therefore contains all the properties of that element.
737
738   Scrollbar
739       The  scrollbar  uses  the handle state when drawing the small scrollbar
740       handle. This allows the colors used for drawing the handle  to  be  set
741       independently.
742

SUPPORTED PROPERTIES

744       The following properties are currently supported:
745
746   all widgets:
747       ·   padding: padding Padding on the inside of the widget
748
749       ·   margin: padding Margin on the outside of the widget
750
751       ·   border:  border  Border around the widget (between padding and mar‐
752           gin)/
753
754       ·   border-radius: padding Sets a radius on the corners of the borders.
755
756       ·   background-color: color Background color
757
758       ·   border-color: color Color of the border
759
760       ·   index: integer (This one does not inherit it value from the  parent
761           widget)
762
763
764
765   window:
766       ·   font: string The font used in the window
767
768       ·   transparency:  string Indicating if transparency should be used and
769           what type: real - True transparency. Only works with a  compositor.
770           background  -  Take  a  screenshot  of the background image and use
771           that. screenshot - Take a screenshot of the screen  and  use  that.
772           Path to png file - Use an image.
773
774       ·   location: position The place of the anchor on the monitor
775
776       ·   anchor: anchor The anchor position on the window
777
778       ·   fullscreen: boolean Window is fullscreen.
779
780       ·   width: distance The width of the window
781
782       ·   x-offset: distance
783
784       ·   y-offset:  distance  The  offset of the window to the anchor point,
785           allowing you to push the window left/right/up/down
786
787
788
789   scrollbar:
790       ·   background-color: color
791
792       ·   handle-width: distance
793
794       ·   handle-color: color
795
796       ·   border-color: color
797
798
799
800   box:
801       ·   orientation: orientation Set the direction the elements are packed.
802
803       ·   spacing: distance Distance between the packed elements.
804
805
806
807   textbox:
808       ·   background-color: color
809
810       ·   border-color: the color used for the border around the widget.
811
812       ·   font: the font used by this textbox (string)
813
814       ·   str: the string to display by this textbox (string)
815
816       ·   vertical-align: vertical alignment of the text (0 top, 1 bottom)
817
818       ·   horizontal-align: horizontal alignment  of  the  text  (0  left,  1
819           right)
820
821       ·   text-color: the text color to use
822
823       ·   highlight: text style {color} color is optional, multiple highlight
824           styles can be added like: bold underline italic #000000;
825
826       ·   width: override the desired width for the textbox
827
828
829
830   listview:
831       ·   columns: integer Number of columns to show (at least 1)
832
833       ·   fixed-height: boolean Always show lines rows, even  if  fewer  ele‐
834           ments are available.
835
836       ·   dynamic:  boolean True if the size should change when filtering the
837           list, False if it should keep the original height.
838
839       ·   scrollbar: boolean If the scrollbar should be enabled/disabled.
840
841       ·   scrollbar-width: distance Width of the scrollbar
842
843       ·   cycle: boolean When navigating, it should wrap around
844
845       ·   spacing: distance Spacing between the elements (both  vertical  and
846           horizontal)
847
848       ·   lines: integer Number of rows to show in the list view.
849
850       ·   layout:  orientation  Indicate how elements are stacked. Horizontal
851           implements the dmenu style.
852
853
854

Layout

856       The new format allows the layout of  the  rofi  window  to  be  tweaked
857       extensively.  For  each widget, the themer can specify padding, margin,
858       border, font, and more. It even allows, as an advanced feature, to pack
859       widgets in a custom structure.
860
861   Basic structure
862       The  whole  view is made out of boxes that pack other boxes or widgets.
863       The box can be vertical or horizontal. This is loosely inspired by  GTK
864       http://gtk.org/.
865
866       The current layout of rofi is structured as follows:
867
868
869
870           |------------------------------------------------------------------------------------|
871           | window {BOX:vertical}                                                              |
872           | |-------------------------------------------------------------------------------|  |
873           | | mainbox  {BOX:vertical}                                                       |  |
874           | | |---------------------------------------------------------------------------| |  |
875           | | | inputbar {BOX:horizontal}                                                 | |  |
876           | | | |---------| |-----------------------------------------------------| |---| | |  |
877           | | | | prompt  | | entry                                               | |ci | | |  |
878           | | | |---------| |-----------------------------------------------------| |---| | |  |
879           | | |---------------------------------------------------------------------------| |  |
880           | |                                                                               |  |
881           | | |---------------------------------------------------------------------------| |  |
882           | | | message                                                                   | |  |
883           | | | |-----------------------------------------------------------------------| | |  |
884           | | | | textbox                                                               | | |  |
885           | | | |-----------------------------------------------------------------------| | |  |
886           | | |---------------------------------------------------------------------------| |  |
887           | |                                                                               |  |
888           | | |-----------------------------------------------------------------------------|  |
889           | | | listview                                                                    |  |
890           | | |-----------------------------------------------------------------------------|  |
891           | |                                                                               |  |
892           | | |---------------------------------------------------------------------------| |  |
893           | | |  mode-switcher {BOX:horizontal}                                           | |  |
894           | | | |---------------|   |---------------|  |--------------| |---------------| | |  |
895           | | | | Button        |   | Button        |  | Button       | | Button        | | |  |
896           | | | |---------------|   |---------------|  |--------------| |---------------| | |  |
897           | | |---------------------------------------------------------------------------| |  |
898           | |-------------------------------------------------------------------------------|  |
899           |------------------------------------------------------------------------------------|
900
901
902
903   Error message structure
904       |-----------------------------------------------------------------------------------|
905       | window {BOX:vertical}                                                             |
906       | |------------------------------------------------------------------------------|  |
907       | | error-message {BOX:vertical}                                                 |  |
908       | | |-------------------------------------------------------------------------|  |  |
909       | | | textbox                                                                 |  |  |
910       | | |-------------------------------------------------------------------------|  |  |
911       | |------------------------------------------------------------------------------|  |
912       |-----------------------------------------------------------------------------------|
913
914   Advanced layout
915       The  layout  of rofi can be tweaked by packing the ´fixed´ widgets in a
916       custom structure.
917
918       The following widgets are fixed, as they provide core rofi  functional‐
919       ity:
920
921       ·   prompt
922
923       ·   entry
924
925       ·   overlay
926
927       ·   case-indicator
928
929       ·   message
930
931       ·   listview
932
933       ·   mode-switcher
934
935
936
937       The  following  keywords  are  defined and can be used to automatically
938       pack a subset of the widgets. These are used in the  default  theme  as
939       depicted in the figure above.
940
941       ·   mainbox Packs: inputbar, message, listview, mode-switcher
942
943       ·   inputbar Packs: prompt,entry,case-indicator
944
945
946
947       Any  widget  name starting with textbox is a textbox widget, others are
948       box widgets and can pack other widgets. To specify  children,  set  the
949       children  property  (this  always happens on the box child, see example
950       below):
951
952
953
954           children: [prompt,entry,overlay,case-indicator];
955
956
957
958       The theme needs to be updated to match the hierarchy specified.
959
960       Below is an example of a theme emulating dmenu:
961
962
963
964           * {
965               background-color:      Black;
966               text-color:            White;
967               border-color:          White;
968               font:            "Times New Roman 12";
969           }
970
971           window {
972               anchor:     north;
973               location:   north;
974               width:      100%;
975               padding:    4px;
976               children:   [ horibox ];
977           }
978
979           horibox {
980               orientation: horizontal;
981               children:   [ prompt, entry, listview ];
982           }
983
984           listview {
985               layout:     horizontal;
986               spacing:    5px;
987               lines:      10;
988           }
989
990           entry {
991               expand:     false;
992               width:      10em;
993           }
994
995           element {
996               padding: 0px 2px;
997           }
998           element selected {
999               background-color: SteelBlue;
1000           }
1001
1002
1003
1004   Padding and margin
1005       Just like CSS, rofi uses the box model for each widget.
1006
1007
1008
1009           |-------------------------------------------------------------------|
1010           | margin                                                            |
1011           |  |-------------------------------------------------------------|  |
1012           |  | border                                                      |  |
1013           |  | |---------------------------------------------------------| |  |
1014           |  | | padding                                                 | |  |
1015           |  | | |-----------------------------------------------------| | |  |
1016           |  | | | content                                             | | |  |
1017           |  | | |-----------------------------------------------------| | |  |
1018           |  | |---------------------------------------------------------| |  |
1019           |  |-------------------------------------------------------------|  |
1020           |-------------------------------------------------------------------|
1021
1022
1023
1024       Explanation of the different parts:
1025
1026       ·   Content - The content of the widget.
1027
1028       ·   Padding - Clears an area around the widget. The padding  shows  the
1029           background color of the widget.
1030
1031       ·   Border  -  A  border  that goes around the padding and content. The
1032           border use the border-color of the widget.
1033
1034       ·   Margin - Clears an area outside the border. The margin is transpar‐
1035           ent.
1036
1037
1038
1039       The  box model allows us to add a border around elements, and to define
1040       space between elements.
1041
1042       The size of each margin, border, and padding can be set. For  the  bor‐
1043       der, a linestyle and radius can be set.
1044
1045   Spacing
1046       Widgets  that  can  pack  more then one child widget (currently box and
1047       listview) have the spacing property. This property  sets  the  distance
1048       between the packed widgets (both horizontally and vertically).
1049
1050
1051
1052           |---------------------------------------|
1053           |  |--------| s |--------| s |-------|  |
1054           |  | child  | p | child  | p | child |  |
1055           |  |        | a |        | a |       |  |
1056           |  |        | c |        | c |       |  |
1057           |  |        | i |        | i |       |  |
1058           |  |        | n |        | n |       |  |
1059           |  |--------| g |--------| g |-------|  |
1060           |---------------------------------------|
1061
1062
1063
1064   Advanced box packing
1065       More dynamic spacing can be achieved by adding dummy widgets, for exam‐
1066       ple to make one widget centered:
1067
1068
1069
1070           |--------------------------------------------|
1071           |  |-----------|  |--------|  |-----------|  |
1072           |  | dummy     |  | child  |  | dummy     |  |
1073           |  | expand: y |  |        |  | expand: y |  |
1074           |  |           |  |        |  |           |  |
1075           |  |           |  |        |  |           |  |
1076           |  |           |  |        |  |           |  |
1077           |  |-----------|  |--------|  |-----------|  |
1078           |--------------------------------------------|
1079
1080
1081
1082       If both dummy widgets are  set  to  expand,  child  will  be  centered.
1083       Depending  on  the  expand  flag  of  child the remaining space will be
1084       equally divided between both dummy and child widget  (expand  enabled),
1085       or both dummy widgets (expand disabled).
1086

DEBUGGING

1088       To get debug information from the parser, run rofi like:
1089
1090
1091
1092           G_MESSAGES_DEBUG=Parser rofi -show run
1093
1094
1095
1096       Syntax errors are shown in a popup and printed out to command line with
1097       the above command.
1098
1099       To see the elements queried during running, run:
1100
1101
1102
1103           G_MESSAGES_DEBUG=Theme rofi -show run
1104
1105
1106
1107       To test minor changes, part of the theme can be passed on  the  command
1108       line, for example to set it to full-screen:
1109
1110
1111
1112           rofi -theme-str ´#window { fullscreen:true;}´ -show run
1113
1114
1115
1116       To print the current theme, run:
1117
1118
1119
1120           rofi -dump-theme
1121
1122
1123

EXAMPLES

1125       Several  examples  are installed together with rofi. These can be found
1126       in {datadir}/rofi/themes/, where {datadir} is the install path of  rofi
1127       data.  When  installed  using  a  package  manager,  this  is  usually:
1128       /usr/share/.
1129

SEE ALSO

1131       rofi(1)
1132
1133
1134
1135                                   May 2019                      ROFI-THEME(5)
Impressum