Examples of widget classes and names in selectors

Theme labels that are descendants of a window:

1
2
3

GtkWindow GtkLabel {
    background-color: #898989
}

Theme notebooks, and anything that’s within these:

1
2
3

GtkNotebook {
    background-color: #a939f0
}

Theme combo boxes, and entries that are direct children of a notebook:

1
2
3
4
5

GtkComboBox,
GtkNotebook > GtkEntry {
    color: @fg_color;
    background-color: #1209a2
}

Theme any widget within a GtkBin:

1
2
3

GtkBin * {
    font: Sans 20
}

Theme a label named title-label:

1
2
3

GtkLabel#title-label {
    font: Sans 15
}

Theme any widget named main-entry:

1
2
3

#main-entry {
    background-color: #f0a810
}

Widgets may also define style classes, which can be used for matching. When used in a selector, style classes must be prefixed with a “.” character.

Refer to the documentation of individual widgets to learn which style classes they define and see Style Classes and Regions for a list of all style classes used by GTK+ widgets.

Note that there is some ambiguity in the selector syntax when it comes to differentiation widget class names from regions. GTK+ currently treats a string as a widget class name if it contains any uppercase characters (which should work for more widgets with names like GtkLabel).

Examples for style classes in selectors

Theme all widgets defining the class entry:

1
2
3

.entry {
    color: #39f1f9;
}

Theme spinbuttons’ entry:

1
2
3

GtkSpinButton.entry {
    color: #900185
}

In complicated widgets like e.g. a GtkNotebook, it may be desirable to style different parts of the widget differently. To make this possible, container widgets may define regions, whose names may be used for matching in selectors.

Some containers allow to further differentiate between regions by applying so-called pseudo-classes to the region. For example, the tab region in GtkNotebook allows to single out the first or last tab by using the :first-child or :last-child pseudo-class. When used in selectors, pseudo-classes must be prefixed with a ':' character.

Refer to the documentation of individual widgets to learn which regions and pseudo-classes they define and see Style Classes and Regions for a list of all regions used by GTK+ widgets.

Examples for regions in selectors

Theme any label within a notebook:

1
2
3

GtkNotebook GtkLabel {
    color: #f90192;
}

Theme labels within notebook tabs:

1
2
3

GtkNotebook tab GtkLabel {
    color: #703910;
}

Theme labels in the any first notebook tab, both selectors are equivalent:

1
2
3
4

GtkNotebook tab:nth-child(first) GtkLabel,
GtkNotebook tab:first-child GtkLabel {
    color: #89d012;
}

Another use of pseudo-classes is to match widgets depending on their state. This is conceptually similar to the :hover, :active or :focus pseudo-classes in CSS. The available pseudo-classes for widget states are :active, :prelight (or :hover), :insensitive, :selected, :focused and :inconsistent.

Examples for styling specific widget states

Theme active (pressed) buttons:

1
2
3

GtkButton:active {
    background-color: #0274d9;
}

Theme buttons with the mouse pointer on it, both are equivalent:

1
2
3
4

GtkButton:hover,
GtkButton:prelight {
    background-color: #3085a9;
}

Theme insensitive widgets, both are equivalent:

1
2
3
4

:insensitive,
*:insensitive {
    background-color: #320a91;
}

Theme selection colors in entries:

1
2
3

GtkEntry:selected {
    background-color: #56f9a0;
}

Theme focused labels:

1
2
3

GtkLabel:focused {
    background-color: #b4940f;
}

Theme inconsistent checkbuttons:

1
2
3

GtkCheckButton:inconsistent {
    background-color: #20395a;
}

Widget state pseudoclasses may only apply to the last element in a selector.

To determine the effective style for a widget, all the matching rule sets are merged. As in CSS, rules apply by specificity, so the rules whose selectors more closely match a widget path will take precedence over the others.

rgb(r, g, b)

An opaque color.

1
2

color: rgb(128, 10, 54);
background-color: rgb(20%, 30%, 0%);

rgba(r, g, b, a)

A translucent color.

1

color: rgb(128, 10, 54, 0.5);

#xxyyzz

An opaque color.

1
2
3

color: #f0c;
background-color: #ff00cc;
border-color: #ffff0000cccc;

@name

Reference to a color that has been defined with @define-color

1

color: @bg_color;

mix(color1, color2, factor)

A linear combination of color1 and color2.

1

color: mix(#ff1e0a, @bg_color, 0.8);

shade(color, factor)

A lighter or darker variant of color.

1

color: shade(@fg_color, 0.5);

lighter(color)

A lighter variant of color.

1

color: lighter(@fg_color);

darker(color)

A darker variant of color.

1

color: darker(@bg_color);

alpha(color, factor)

Modifies passed color’s alpha by a factor.

1

color: alpha(@fg_color, 0.5);

Linear Gradients

A linear gradient along the line from (start_x, start_y) to (end_x, end_y) is specified using the following syntax:

The color-stop can be repeated multiple times to add more than one color stop. “from (color)” and “to (color)” can be used as abbreviations for color stops with position 0 and 1, respectively.

Example: Linear Gradient

1
2
3

-gtk-gradient (linear,
               left top, right bottom,
               from(@yellow), to(@blue));

Example: Linear Gradient 2

1
2
3
4
5

-gtk-gradient (linear,
               0 0, 0 1,
               color-stop(0, @yellow),
               color-stop(0.2, @blue),
               color-stop(1, #0f0))

Radial Gradients

A radial gradient along the two circles defined by (start_x, start_y, start_radius) and (end_x, end_y, end_radius) is specified using the following syntax:

where start_radius and end_radius are floating point numbers and the other parameters are as before.

Example: Radial Gradient

1
2
3
4

-gtk-gradient (radial,
               center center, 0,
               center center, 1,
               from(@yellow), to(@green))

Example: Radial Gradient 2

1
2
3
4
5
6
7

-gtk-gradient (radial,
               0.4 0.4, 0.1,
               0.6 0.6, 0.7,
               color-stop (0, #f00),
               color-stop (0.1, #a0f),
               color-stop (0.2, @yellow),
               color-stop (1, @green))

Image Source

The border image source can be specified either as a URL or a gradient:

1

border-image-source: url(path);

or

1

border-image-source: -gtk-gradient(...);

Image Slice

1

border-image-slice: top right bottom left;

The sizes specified by the top, right, bottom, and left parameters are the offsets (in pixels) from the relevant edge where the image should be “cut off” to build the slices used for the rendering of the border.

Image Width

1

border-image-width: top right bottom left;

The sizes specified by the top , right , bottom and left parameters are inward distances from the border box edge, used to specify the rendered size of each slice determined by border-image-slice. If this property is not specified, the values of border-width will be used as a fallback.

Image Repeat

Specifies how the image slices should be rendered in the area outlined by border-width.

1

border-image-repeat: [stretch|repeat|round|space];

or

1

border-image-repeat: [stretch|repeat|round|space] [stretch|repeat|round|space];

Example: Border Image

1

border-image: url("gradient1.png") 10 10 10 10;

Example: Repeating Border Image

1

border-image: url("gradient1.png") 10 10 10 10 repeat;

Example: Stetched Border Image

1

border-image: url("gradient1.png") 10 10 10 10 stretch;

engine: [name|none];

background-color: [color|transparent];

color: [color|transparent];

border-color: [color|transparent]{1,4};

border-top-color: [color|transparent];

border-right-color: [color|transparent];

border-bottom-color: [color|transparent];

border-left-color: [color|transparent];

font-family: name;

The name of the font family or font name to use.

1

font-family: Sans, Cantarell;

font-style: [normal|oblique|italic];

Selects between normal, italic and oblique faces within a font family.

1

font-style: italic;

font-variant: [normal|small-caps];

In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions.

1

font-variant: normal;

font-weight: [normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900];

Selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

font-size: [absolute-size|relative-size|percentage];

font-stretch: [face]

Selects a normal, condensed, or expanded face from a font family.

Absolute keyword values have the following ordering, from narrowest to widest:

font: family variant [size];

A shorthand for setting a few font properties at once.

margin: [length|percentage]{1,4};

A shorthand for setting the margin space required on all sides of an element.

margin-top: [length|percentage];

Sets the margin space required on the top of an element.

1

margin-top: 10px;

margin-right: [length|percentage];

Sets the margin space required on the right of an element.

1

margin-right: 0px;

margin-bottom: [length|percentage];

Sets the margin space required on the bottom of an element.

1

margin-bottom: 10px;

margin-left: [length|percentage];

Sets the margin space required on the left of an element.

1

margin-left: 1em;

padding: [length|percentage]{1,4};

A shorthand for setting the padding space required on all sides of an element. The padding area is the space between the content of the element and its border.

padding-top: [length|percentage];

Sets the padding space required on the top of an element.

1

padding-top: 10px;

padding-right: [length|percentage];

Sets the padding space required on the right of an element.

1

padding-right: 0px;

padding-bottom: [length|percentage];

Sets the padding space required on the bottom of an element.

1

padding-bottom: 10px;

padding-left: [length|percentage];

Sets the padding space required on the left of an element.

1

padding-left: 1em;

border-width: [width]{1,4};

A shorthand for setting the border width on all sides of an element.

border-top-width: [width];

Sets the border width required on the top of an element.

1

border-top: 10px;

border-right-width: [width];

Sets the border width required on the right of an element.

1

border-right: 0px;

border-bottom-width: [width];

Sets the border width required on the bottom of an element.

1

border-bottom: 10px;

border-left-width: [width];

Sets the border width required on the left of an element.

1

border-left: 1em;

border-radius: [length|percentage]{1,4};

Allows setting how rounded all border corners are.

border-style: [none|solid|inset|outset]{1,4};

A shorthand property for setting the line style for all four sides of the elements border.

border-image: source / width ; A shorthand

for setting an image on the borders of elements. See Border Images.

1

border-image: url("/path/to/image.png") 3 4 4 3 repeat stretch;

border-image-source: [none|url|linear-gradient]{1,4};

Defines the image to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead.

1

border-image-source: url("/path/to/image.png");

border-image-slice: [number|percentage]{1,4};

Divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.

border-image-width: [length|percentage]{1,4};

Defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges.

border-image-repeat: [none|url|linear-gradient]{1,4};

Defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

background-image: [none|url|linear-gradient], ...

Sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

background-repeat: [repeat|no-repeat|space|round|repeat-x|repeat-y];

Defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all.

text-shadow: horizontal_offset vertical_offset [ blur_radius ] color;

A shadow list can be applied to text or symbolic icons, using the CSS3 text-shadow syntax, as defined in the CSS3 Specification.

To set a shadow on an icon, use the icon-shadow property instead, with the same syntax.

To set multiple shadows on an element, you can specify a comma-separated list of shadow elements in the text-shadow or icon-shadow property. Shadows are always rendered front to back (i.e. the first shadow specified is on top of the others). Shadows can thus overlay each other, but they can never overlay the text or icon itself, which is always rendered on top of the shadow layer.

1

text-shadow: text-shadow: 1 1 0 blue, -4 -4 red;

box-shadow: [ inset ] horizontal_offset vertical_offset blur_radius color;

Themes can apply shadows on framed elements using the CSS3 box-shadow syntax, as defined in the CSS3 Specification.

To set multiple box-shadows on an element, you can specify a comma-separated list of shadow elements in the box-shadow property. Shadows are always rendered front to back (i.e. the first shadow specified is on top of the others) so they may overlap other boxes or other shadows.

1

box-shadow: inset 0 1px 1px alpha(black, 0.1);

transition: duration s|ms [loop];

Styles can specify transitions that will be used to create a gradual change in the appearance when a widget state changes.

1

transition: 150ms ease-in-out;

gtk-key-bindings: binding1, binding2, ...;

Key binding set name list.

Other Properties

GtkThemingEngines can register their own, engine-specific style properties with the function gtk_theming_engine_register_property(). These properties can be set in CSS like other properties, using a name of the form -namespace-name, where namespace is typically the name of the theming engine, and name is the name of the property. Style properties that have been registered by widgets using gtk_widget_class_install_style_property() can also be set in this way, using the widget class name for namespace.

An example for using engine-specific style properties:

1
2
3
4
5
6

* {
    engine: clearlooks;
    border-radius: 4;
    -GtkPaned-handle-size: 6;
    -clearlooks-colorize-scrollbar: false;
}

Returns

The provider used for fallback styling. This memory is owned by GTK+, and you must not free it.

[transfer none]

Parameters

Returns

a GtkCssProvider with the theme loaded. This memory is owned by GTK+, and you must not free it.

[transfer none]

Parameters

Returns

TRUE. The return value is deprecated and FALSE will only be returned for backwards compatibility reasons if an error is not NULL and a loading error occured. To track errors while loading CSS, connect to the GtkCssProvider::parsing-error signal.

Parameters

Returns

TRUE. The return value is deprecated and FALSE will only be returned for backwards compatibility reasons if an error is not NULL and a loading error occured. To track errors while loading CSS, connect to the GtkCssProvider::parsing-error signal.

Parameters

Returns

TRUE. The return value is deprecated and FALSE will only be returned for backwards compatibility reasons if an error is not NULL and a loading error occured. To track errors while loading CSS, connect to the GtkCssProvider::parsing-error signal.

Returns

A new GtkCssProvider

Parameters

Returns

a new string representing the provider .

Parameters

Returns

the line number

Parameters

Returns

the offset in bytes from the start of the line.

Parameters

Returns

the GFile that section was parsed from or NULL if section was parsed from other data.

[transfer none]

Parameters

Returns

the parent section or NULL if none.

[nullable][transfer none]

Parameters

Returns

the type of section

Parameters

Returns

the line number

Parameters

Returns

the offset in bytes from the start of the line.

Parameters

Returns

section itself.

Parameters

Members

Members

Parameters