GNOME Theming

Up to now the vocabulary used for theming in the CSS engine was very much tied to the way Gtk+ works internally. Designers were required to know how things work under the hood, which made the creation of themes rather counter-intuitive.

For the upcoming release this will change. Theming will focus on the well-known widgets and a few additional widget roles.

Widget Theming

Specifying the style of simple widgets is very intuitive, the following example creates a white button with black border and red text:

GtkButton {
    background-color: white;
    border: 1px solid black;
    color: red;
}

Things are a bit more involved when it comes to widgets that consist of several parts, like for instance a scroll-bar. In version 0.3 style will apply to the background of a widget by default:

GtkScrollbar {
    background-color: grey;
}

will affect the scroll-bar’s “trough” area, the part on which the scroll handle resides.

Of course it is desirable to also have access to a scroll-bar’s other parts, like the up/down arrows and the scroll-handle. This is possible using widget roles.

Widget Roles

The scroll-bar arrows mentioned above appear in a similar fashion in a spin-button, and there is a number of widgets that employs some sort of “handle” that is used to change a position or value, yet another set of widgets share the concept of a “drop-down button”.

To allow for styling of such common parts a set of CSS classes will be introduced:

.gtk-check-mark

A check-mark sign, used by GtkCheckButton, GtkCheckMenuItem, GtkCellRendererToggle.

.gtk-radio-knob

A radio-button sign, used by GtkRadioButton, GtkRadioMenuItem, GtkCellRendererToggle.

.gtk-dropdown-button

A button exposing collapsed widget content in a pop-up, used by GtkComboBox, GtkComboBoxEntry, GtkMenuToolButton, GtkOptionMenu.

.gtk-expander

Usually an arrow exposing collapsed widget content inline, used by GtkExpander, GtkTreeView.

.gtk-handle

A widget part that is used to changed values or positions, used by GtkHandleBox, GtkStatusbar, GtkPaned, GtkRange (and its sub-classes GtkHScale, GtkVScale, GtkHScrollbar, GtkVScrollbar).

.gtk-tab

A label that stays visible when the widget’s main part is hidden, used by GtkNotebook.

.gtk-header

A header providing information about a column, used by GtkTreeView, GtkCalendar.

.gtk-forward-stepper, .gtk-backward-stepper

An arrow increasing or decreasing value or position, used by GtkSpinButton, GtkHScrollbar, GtkVScrollbar.

.gtk-secondary-forward-stepper, .gtk-secondary-backward-stepper

A secondary arrow for manipulation of scroll position, used by GtkHScrollbar, GtkVScrollbar.

.gtk-progress-indicator

An area indicating how much an operation already progressed, used by GtkProgressBar.

.gtk-focus-indicator

GtkButton, GtkCalendar, GtkCheckButton, GtkEntry, GtkExpander, GtkIconView (“iconview-drop-indicator”, “icon_view”), GtkListItem (“add-mode”, NULL”), GtkNotebook, GtkOptionMenu, GtkRange, GtkText, GtkTextView, GtkTreeItem, GtkTreeView (“NULL, “treeview”, “treeview-left”, “treeview-right”, “treeview-middle”, “treeview-drop-indicator”, “treeview-drop-indicator-left”, “treeview-drop-indicator-right”, “tree-view-drop-indicator-middle”), GtkTreeViewColumn

Examples

CSS provides means to select specific items and apply style to them, here are a few examples:

• *.gtk-dropdown-button { ... }: give a common appearance for all drop-down buttons.
• GtkComboBox > *..gtk-dropdown-button { ... }: give a special appearance for a combo-box’s drop-down button.
• GtkVScrollbar > *.gtk-handle { ... }: access the slider of a vertical scrollbar.
• GtkTreeview > *.gtk-header { ... }: access the header of a tree-view widget.
• GtkHandleBox[handle-position=left] > *.gtk-handle { ... }: access the handle of a standard handle-box with the handle on the left.

Updates

• Add “.gtk-focus-indicator” role.