GNOME Theming

The next GNOME Art Meeting will be on Monday the 8th December at 19:00 UTC in #gnome-art on irc.gnome.org.

No topic that should be discussed on Monday has been added to the Wiki page yet. If you would like to add anything to the agenda, you can do so by editing the Wiki.

Everyone is welcome to participate in the meeting.

Andreas’ recent post initiated some discussion about this project’s merits [1, 2], so it might be helpful to spell out some factoids.

The CSS engine is:

• A theme engine for Gtk+ 2.x, that reads widget style descriptions from CSS.
• Very immature and far from being ready for daily use.
• Considerably slower than existing engines, since CSS styles are currently calculated for every drawing operation.
• Rather wastful regarding memory consumption, because it adds a complete theming layer aside Gtk+’s built-in gtkrc infrastructure.

The CSS engine is not / does not provide:

• A theming system for Gtk+ 3.x.
• A new way to arrange widgets in Gtk+ applications.
• The way how GNOME 3 will be themed.
• Good themes for free. No drawing is being done by the engine itself, every pixel on the screen has to be put there by CSS (or images referenced from CSS). Writing a CSS theme will be a lot of work.
• Any kind of innovation. QT supports CSS, XUL uses it for even longer. From a developer’s point of view the most interesting part is libccss anyway, a library that parses CSS and draws CSS styles using cairo. The gtk engine is just a thin wrapper around it.

[1] http://www.jonobacon.org/?p=1403
[2] http://dborg.wordpress.com/2008/11/19/creating-themes/

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.

The gtk-null-engine, version 0.2 is available:

http://www.gnome.org/~robsta/gtk-null-engine/
9ac60dc1af7a6cf578821d709d90ecdc gtk-null-engine-0.2.tar.gz

./gne-inspector GtkButton
./gne-inspector GtkComboBoxEntry

¿Where?

The CSS Theme Engine for Gtk+, Version 0.1 is available for downloaded:

ftp://ftp.gnome.org/pub/GNOME/sources/gtk-css-engine/0.2/

4268420614b57a8e54a40e7fea3ea22c  gtk-css-engine-0.2.0.tar.bz2
c02e05a4d5afa2be54814ff9f2100dba  gtk-css-engine-0.2.0.tar.gz

¿What?

The Cascading Style Sheet Theme Engine for the GNU is Not UNIX Image Manipulation Program Tool Kit Plus (commonly just “CSS engine”) is an experimental theme engine reading styling information from CSS rather than the traditional gtkrc format.

Because of the fledgling status this project is still in, desktop-wide use of CSS themes is not supported yet. Currently The Widget Factory [1] is the recommended way for working with the CSS engine. The focus of this release is on basic CSS support.

Features:

• Border radius.
• Background image: -attachment, -position, -repeat, -size.
• External tool `css2gtkrc` for extracting gtkrc information from stylesheets.

Theme:

• Rounded corners.
• CSS compliant background-image settings.
• Use actual borders for checks and options, make them use 100% of the allocated space.

Internals:

• Create `color` property and use it for bg- and fg-color(in `block`, `style`, …).
• More robust parsing, handle (some) invalid CSS.
• Better stability, work around a problem in libcroco (b.g.o#553937).
• Have an internal instance of `ccss_style_t` with default values, `ccss_style_init()` initialises the style to those. Then drawing functions don’t have to check for `NULL` pointers any more, or, at least not handle them functionally.

¿How?

The engine ships a forthcoming port of the “Gilouche” theme by Jakub Steiner and Garrett LeSage. A screenshot is avavailable at:

http://www.gnome.org/~robsta/gtk-css-engine/0.2/Gilouche-CSS-0.2.png

¿Who?

• Andreas Nilsson: art.
• Robert Staudinger: code.

¿When?

The release-date for the subsequent version has not been determined yet, but we are confident that 0.3 will be the first version supporting desktop-wide use. Please refer to the roadmap (TODO file) for details.

[1] http://www.stellingwerff.com/?page_id=10

We chose the winners from the background competition at GUADEC and the new backgrounds have been integrated into the gnome-backgrounds package. Thank you to everyone who took part and congratulations to the winners. All the backgrounds are released under the GNU GPL, so we encourage anyone who feels they could improve the backgrounds with any tweaks to submit your finished results back to gnome-backgrounds!

Abstract
- Silk.png, Spring.png, Waves.png: Patryk Zawadzki
- Flow.png, Gulp.png: Daniel Galleguillos

Nature
- Aqua.jpg: Charles Barbin
- Blinds.jpg: Lennart Poettering
- Dunes.jpg: Marco Cogoni
- FreshFlower.jpg: Jens Ansorg
- Garden.jpg: Charles Barbin
- GreenMeadow.jpg: Timothy Schellhase, retouched by Lapo Calamandrei
- LadyBird.jpg: Charles Barbin
- OpenFlower.jpg: Garrett LeSage
- RainDrops.jpg: “blackcombwhistler07″
- Storm.jpg: Sergey Nazarov
- TwoWings.jpg: Charles Barbin
- Wood.jpg: Jean-François Fortin Tam
- YellowFlower.jpg: Charles Barbin

Download available here: http://download.gnome.org/sources/gnome-backgrounds/2.23/