minetest-flow/doc/styling.md

Styling forms

Inline syntax

At the moment I suggest only using this syntax if your form won't look broken without the style - older versions of flow don't support this syntax, and I may make breaking changes to the sub-style syntax in the future.

You can add inline styles to elements with the style field:

gui.Button{
    label = "Test",
    style = {
        bgcolor = "red",

        -- You can style specific states of elements:
        {sel = "$hovered", bgcolor = "green"},

        -- Or a combination of states:
        {sel = "$hovered, $pressed", bgcolor = "blue"},
        {sel = "$hovered+pressed", bgcolor = "white"},
    },
}

If you need to style multiple elements, you can reuse the style table:

local my_style = {bgcolor = "red", {sel = "$hovered", bgcolor = "green"}}

local gui = flow.make_gui(function(player, ctx)
    return gui.VBox{
        gui.Button{label = "Styled button", style = my_style},
        gui.Button{label = "Unstyled button"},
        gui.Button{label = "Second styled button", style = my_style},
    }
end)

Note that this may inadvertently reset styles on subsequent elements if used on elements without a name due to formspec limitations.

See the Luanti documentation for a list of valid property names and values. Flow accepts numbers and booleans as property values where applicable.

Separate style elements

Alternatively, you can use the gui.Style and gui.StyleType elements if you need to style a large group of elements or need to support older versions of flow:

gui.Style{
    selectors = {"btn1"},
    props = {
        bgimg = "button.png",
        border = false,
    }
},

gui.Button{
    name = "btn1",
    label = "Button",
},

The Style and StyleType elements are invisible and won't affect padding.

Warning: gui.Style and gui.StyleType do not support styles that change the element size, such as font_size for labels and size/spacing for lists. Use the inline syntax instead for these styles.