Qball's Weblog

Rofi 1.4.0: Sneak Preview Custom Layouts

Tags Rofi  Theme3.0 

As a last minute addition, in git you can now change how the different widgets of the GUI are packed.

The layout can be changed by specifying the children of the main ( #window.box ) widget.

You can define custom boxes (both vertical and horizontal), and pack the following rofi specific widgets:

Any widget name starting with textbox will turn into a textbox. Any other widget not starting textbox or matching one of the pre-defined widgets will turn into box.

The direction of the packing of a box can be set by orientation.

#hbox {
    orientation: horizontal;
#vbox {
    orientation: vertical;

You can specify the size of the children by setting the expand to true (use available space). Textbox width can be overridden by width property;
The text of an custom entry box can be set using text:

#entry {
    text: "My text";
    vertical-align: 1.0;
    horizontal-align: 1.0;

Below is an example of making it look like dmenu:


This can be done by packing prompt, entry and listview in one horizontal box.

|  prompt      |   entry       |    listview                    |

Or specified in CSS file:

* {
    background:      Black;
    foreground:      White;
    font:            "Times New Roman 12";

#window {
    anchor:     north;
    location:   north;

#window box {
    width:      100%;
    padding:    4px;    
    children:   [ horibox ];

#window horibox box {
    orientation: horizontal;
    children:   [ prompt, entry, listview ];    

#window horibox listview box {
    layout:     horizontal;
    spacing:    5px;
    lines:      10;

#window horibox entry {
    expand:     false;
    width:      10em;

#window horibox listview element {
    padding: 0px 2px;
#window horibox listview element selected {
    background: SteelBlue;

But it also allows you to make more complex GUIs:

Rofi Theme2

| prompt     | listview                                                     |
| entry      |                                                              |
+------------+                                                              |
| entrybox   |                                                              |
|            |                                                              |
+------------+                                                              |
| sidebar    |                                                              |


Rofi Theme3

comments powered by Disqus