GTK+ By Example/Theming

About

The aim of this page is to provide a guide to creating and modifying themes for GTK+ on both Linux and Windows.

Description

Customising the look of GTK+ applications involves modifying RC files, usually called gtkrc.

Explanation of GTKs rc files.

Some Gtk apps can have lots of rc files. Theses are initialization files and are usually modified from the application's preference dialog. GTKRC files are plain text files saved as "gtkrc" with no extension. For more information on the GTK+ rc file format visit http://library.gnome.org/devel/gtk-tutorial/stable/c2111.html This guide will concentrate on the one file that is used to adjust the look and feel of the application.

GTKRC'S

A GTK+ rc file can contain 4 main parts:

• The Style Declaration – How an item will be drawn onscreen,
• A Class Declaration – Assigns styles to a class,
• A Widget Declaration – Assigns a style to a widget,
• A Widget_class Declaration – Assigns a style to a particular widget by class name.

All GTK+ programs are made up of widgets and there are several attributes or flags that can be set for each widget:

• fg – modifies the foreground of the widget,
• bg – modifies the background of the widget,
• base – the widget's Editable, Tree, or List background,
• bg_pixmap – assigns an image to the background of the widget,
• font – changes the font attributes.

And each of these can have several states:

• [NORMAL] – The widgets normal state,
• [PRELIGHT] – When a mouse cursor is hovering over a widget (this is used by buttons and their subclasses),
• [ACTIVE] – For active widgets e.g. selected tab and scroll bars,
• [INSENSITIVE] – A disabled widget,
• [SELECTED] – Highlighted objects in a widget e.g. text.

The colors for these can be set using 1 of 3 different methods:

1. A GTK+ string – This is a number between 0 and 1,
2. Hexadecimal – The same as some website, values are set like this - #000000, and can be any value between 00 and ff,
3. RGB – This is any number between 0 and 256 e.g. 256 256 256,

To adjust the properties of a widget you need to first define a style.

Style

A style declaration may look something like this:-

style "default"
{
    font = "-*-helvetica-medium-r-normal--*-120-*-*-*-*-*-*"
    fg[NORMAL] = "#000000"
    fg[PRELIGHT] = "#000000"
    fg[ACTIVE] = "#000000"
    fg[SELECTED] = "#000000"
    fg[INSENSITIVE] = "#999999"
}

The first line is the style declaration, this line defines a new style and calls it default (of course this can be called anything you want). The following lines are the actual style. However for this to be applied it needs to be assigned to a GTK+ widget.

Gtk Widgets

There are many widgets in the GTK system but for the sake of the tutorial we will target the top most parent widget called - widget_class "GtkWindow", of which all other widgets will get their style from. To assign a style to a widget you would use:

widget_class "GtkWindow" style "window"

This instructs the widget called "GtkWindow" to use the style "window".

When the above code is copyed to a gtkrc file and accompinied with:

widget_class "GtkWindow" style "default"

and saved in the "theme" folder a difference should be noticed next time a GTKApplication is started or restarted.

Extending this to include images

To include images in a theme you would have to create the images and save them in the folder with the previously created gtkrc file. Once there you would edit the file to use the image.

style "Button"
{
    bg_pixmap[NORMAL] = "warning.xpm"
}

this is an example of using images (please note you will need to create warning.xpm in GIMP for this to work.