Bonus points

There are some features in GtkStyleContext that were not available in GtkStyle, or were made available over time for certain widgets through extending the detail string in obscure ways. There is a lot more information available when rendering UI elements, and it is accessible in more uniform, less hacky ways. By going through this list you'll ensure your widget is a good citizen in a fully themable user interface.

  1. If your widget renders a series of similar elements, such as tabs in a GtkNotebook or rows/column in a GtkTreeView, consider adding regions through gtk_style_context_add_region(). These regions can be referenced in CSS and the :nth-child pseudo-class may be used to match the elements depending on the flags passed.

    Example 50. Theming widget regions

    GtkNotebook tab {
      background-color: #f3329d;
    GtkTreeView row::nth-child (even) {
      background-color: #dddddd;

  2. If your container renders child widgets within different regions, make it implement GtkContainer get_path_for_child(). This function lets containers assign a special GtkWidgetPath to child widgets depending on their role/region. This is necessary to extend the concept above throughout the widget hierarchy.

    For example, a GtkNotebook modifies the tab labels' GtkWidgetPath so the "tab" region is added. This makes it possible to theme tab labels through:

    Example 51. Theming a widget within a parent container region

    GtkNotebook tab GtkLabel {
      font: Sans 8;

  3. If you intend several visual elements to look interconnected, make sure you specify rendered elements' connection areas with gtk_style_context_set_junction_sides(). It is of course up to the theme to make use of this information or not.
  4. GtkStyleContext supports implicit animations on state changes for the most simple case out-of-the-box: widgets with a single animatable area, whose state is changed with gtk_widget_set_state_flags() or gtk_widget_unset_state_flags(). These functions trigger animated transitions for the affected state flags. Examples of widgets for which this kind of animation may be sufficient are GtkButton or GtkEntry.

    If your widget consists of more than a simple area, and these areas may be rendered with different states, make sure to mark the rendered areas with gtk_style_context_push_animatable_region() and gtk_style_context_pop_animatable_region().

    gtk_style_context_notify_state_change() may be used to trigger a transition for a given state. The region ID will determine the animatable region that is affected by this transition.