GNOME Theming

The CSS Theme Engine for Gtk+, Version 0.3.1 is available for download.

About gtk-css-engine

The CSS theme engine for Gtk+ an experimental theme engine reading styling information from CSS rather than the traditional gtkrc format.

The engine has only seen very limited testing and is not suited for production use at this point in time. We are however proud to announce that this is the initial release that supports desktop-wide use.

New and noteworthy

• Initial support for desktop-wide use.
• Require ccss >= 0.5.0.
• Improvements to the Moblesse sample theme.
• Updates to the Pioneer single canvas theme template.

Usage information

Due to limitations in the Gtk+ toolkit integration working with the CSS engine requires extra steps. Here is a brief rundown that should work on most systems. This workflow requires The Widget Factory to be installed and its twf binary be found in the path.

1. Install to --prefix=/usr
2. Delete the directory /usr/share/themes/moblesse
3. Symlink the tarball’s themes/moblesse directory to ~/.themes/moblesse
4. Edit themes/moblesse/gtk-2.0/gtkrc.css
5. Go to themes/moblesse/gtk-2.0 and run make preview
6. Repeat from 4.

Step 4. creates a gtkrc file called generated.rc which is included in the theme’s boilerplate gtkrc. This ensures gtk is initialised correctly so that foreign applications like Firefox and OpenOffice.org work as expected.

A template tarball for custom themes will be made available shortly.

Availability

c1d0000e00516b50f976db7726cd3f5e6318182704ad04be980d4ec7731e75d4 gtk-css-engine-0.3.1.tar.bz2
9cf4fe99f3b6a30edc892489894252e031b3b988d7f23629e202d97ee689078e gtk-css-engine-0.3.1.tar.gz

Contributors

Robert Staudinger, Thorsten Wilms

The CCSS library version 0.5 is available for download.

About CCSS

CCSS offers a C API to parse CSS stylesheets from files or buffers and offers and interface to cascade styles for custom document representations such as a libxml DOM or a Gtk+ widget tree.

The CCSS-Cairo integration library offers an API to draw CSS styles onto cairo surfaces.

CCSS-Gtk+ integration library provides convenience functions for interacting with Gtk+, such as a best-effort css-to-gtkrc conversion.

New and noteworthy

• Use ccss name consistently, drop lib prefix where possible (e.g. pkg-config files).

CCSS

• Deep-free properties when destroying a stylesheet, fixes memory leak.
• New ccss_style_hash() value can be used to compare styles for equality.
• Ability to load CSS files and dump the resulting CSS in ccss-stylesheet-to-gtkrc for debugging multi-file stylesheets.
• New ccss_stylesheet_unload() to unload CSS files or buffers.

CCSS-Cairo

• Support for loadable modules to hook in custom CSS3 appearance renderers.
• Draw background with alpha channel.
• Consolidate drawing functions (no more outline, line functions), use double precision coordinates.

CCSS-Gtk+

• Improvements to gtk[rc] compatibility.

Availability

http://people.freedesktop.org/~robsta/ccss/

Contributors

• Robert Staudinger
• Thomas Thurman

The CSS Theme Engine for Gtk+, Version 0.3 is available for download.

About gtk-css-engine

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

The engine has only seen very limited testing and is not suited for desktop-wide use at this point in time. Currently The Widget Factory is the recommended way for working with the CSS engine.

New and noteworthy

• Work on widgets parts: a way to address things like notebook tabs.
• Start of a sample theme called Moblesse.
• Work on a single canvas theme called Pioneer.
• Requires libccss-0.4.

Availability

http://download.gnome.org/sources/gtk-css-engine/0.3/

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/