Xfce GTK Engine Theme how to

This document is under development

gtk-xfce-engine, Xfce4's gtk engine provides a render engine for Gtk 2 and Gtk 3. This page contains information about the extra theming settings the gtk-xfce-engine provides. Both Gtk 2 and Gtk 3 are described here to make it easier to get a consistent look between them both.

To use the xfce engine in Gtk 2 set the engine to xfce. In the engine block the style properties can be set. The following simple properties are available.

The block property boxfill can be used for gradient backgrounds. Within the boxfill block the following properties can be set.

Example showing the default values.

style "default"
{
    engine "xfce"
    {
        smooth_edge = false
        grip_style = rough
        boxfill
        {
            fill_style = plain
            orientation = auto
            shade_start = 1.10
            shade_end = 0.90
        }
    }
}

To use the xfce engine in Gtk 3 set the engine to xfce. The style properties can be directly set using the -xfce prefix. The following properties are available.

Other properties can be set with default Gtk 3 settings. For example with background-image: -gtk-gradient() the background can be set to gradient. Here is a list of some of the properties. See the GtkCssProvider documentation for more details.

The simple Gtk 2 style properties can be directly converted. With one exception of grip_style none. The value none in css will set the property value to default which is rough and not disabled. The boxfill property is replaced by background-image: -gtk-gradient(). By using the -gtk-gradient it is not possible to reproduce the northern_diagonal and southern_diagonal gradients. These are never or rarely used so the support is dropped until requested. The auto orientation is not automatically supported and must be configured manually see the examples for more details.

The xthickness end ythickness are replaced by border-width. usages: border-width: <x> <y>; border-width: <width>; border-width: <left> <top> <right> <bottom>;

Linear vertical gradient example. Gtk 2

style "default"
{
    bg[ACTIVE] = "#cccccc"
    bg[INSENSITIVE] = "#aaaaaa"
    bg[NORMAL] = "#eeeeee"
    bg[PRELIGHT] = "#ffffff"
    bg[selected] = "#dddddd"

    engine "xfce"
    {
        boxfill
        {
            fill_style = gradient
            orientation = vertical
            shade_start = 1.10
            shade_end = 0.90
        }
    }
}

Gtk 3

* {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#eeeeee, 1.10)),
                                    to(shade(#eeeeee, 0.90)));
    border-color: darker(#eeeeee);
}

*:active {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#cccccc, 0.90)),
                                    to(shade(#cccccc, 1.10)));
    border-color: darker(#cccccc);
}

*:insensitive {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#aaaaaa, 1.10)),
                                    to(shade(#aaaaaa, 0.90)));
    border-color: darker(#aaaaaa);
}

*:hover {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#ffffff, 1.10)),
                                    to(shade(#ffffff, 0.90)));
    border-color: darker(#ffffff);
}

*:selected {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#dddddd, 1.10)),
                                    to(shade(#dddddd, 0.90)));
    border-color: darker(#dddddd);
}

Linear auto gradient example. Gtk 2

style "default"
{
    bg[ACTIVE] = "#cccccc"
    bg[INSENSITIVE] = "#aaaaaa"
    bg[NORMAL] = "#eeeeee"
    bg[PRELIGHT] = "#ffffff"
    bg[selected] = "#dddddd"

    engine "xfce"
    {
        boxfill
        {
            fill_style = gradient
            orientation = auto
            shade_start = 1.10
            shade_end = 0.90
        }
    }
}

Gtk 3

.horizontal {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#eeeeee, 1.10)),
                                    to(shade(#eeeeee, 0.90)));
    border-color: darker(#eeeeee);
}

.horizontal:active {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#cccccc, 0.90)),
                                    to(shade(#cccccc, 1.10)));
    border-color: darker(#cccccc);
}

.horizontal:insensitive {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#aaaaaa, 1.10)),
                                    to(shade(#aaaaaa, 0.90)));
    border-color: darker(#aaaaaa);
}

.horizontal:hover {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#ffffff, 1.10)),
                                    to(shade(#ffffff, 0.90)));
    border-color: darker(#ffffff);
}

.horizontal:selected {
    background-image: -gtk-gradient(linear,
                                    left top, left bottom,
                                    from(shade(#dddddd, 1.10)),
                                    to(shade(#dddddd, 0.90)));
    border-color: darker(#dddddd);
}

.vertical {
    background-image: -gtk-gradient(linear,
                                    left top, right top,
                                    from(shade(#eeeeee, 1.10)),
                                    to(shade(#eeeeee, 0.90)));
    border-color: darker(#eeeeee);
}

.vertical:active {
    background-image: -gtk-gradient(linear,
                                    left top, right top,
                                    from(shade(#cccccc, 0.90)),
                                    to(shade(#cccccc, 1.10)));
    border-color: darker(#cccccc);
}

.vertical:insensitive {
    background-image: -gtk-gradient(linear,
                                    left top, right top,
                                    from(shade(#aaaaaa, 1.10)),
                                    to(shade(#aaaaaa, 0.90)));
    border-color: darker(#aaaaaa);
}

.vertical:hover {
    background-image: -gtk-gradient(linear,
                                    left top, right top,
                                    from(shade(#ffffff, 1.10)),
                                    to(shade(#ffffff, 0.90)));
    border-color: darker(#ffffff);
}

.vertical:selected {
    background-image: -gtk-gradient(linear,
                                    left top, right top,
                                    from(shade(#dddddd, 1.10)),
                                    to(shade(#dddddd, 0.90)));
    border-color: darker(#dddddd);
}

The following table contain a list of the Widget class properties for both Gtk 2 and Gtk 3.

• Xfwm4 theme how-to
• Gtk 3 Theming changes