GTK3 Theming: Assorted Techniques, Tips and Tricks

Contents

  1. Theming Scrollbar Buttons
  2. Don't Rely Just on the Widget Factory
  3. What CSS Rule Determines a Given Behaviour?
  4. Addendum: Why is this here?
  5. Theming Scrollbar Buttons

    You probably got here by Googling, confused about the fact that GTK buttons have only up and down classes. You maybe even went ahead and wrote button.left and button.right selectors and they ended up with the wrong arrows (understandable, since the fact that there are up and down classes would sort of imply that there should be matching left and right classes, since you can have both horizontal and vertical scrollbars).

    Anyway, it doesn't work like that. In GTK3, the buttons themselves only have up and down properties, depending on whether they advance the scrollview or not. Their parent scrollbar, however, has proper orientation classes, so you can do this:

    scrollbar.vertical button.up {
        -gtk-icon-source: url('assets/arrow_up.png');
    }
    
    scrollbar.vertical button.down {
        -gtk-icon-source: url('assets/arrow_down.png');
    }
    
    scrollbar.horizontal button.up {
        -gtk-icon-source: url('assets/arrow_left.png');
    }
    
    scrollbar.horizontal button.down {
        -gtk-icon-source: url('assets/arrow_right.png');
    }
    

    In other words, the convention is:

    For shits'n'giggles: my own first attempt at theming scrollbar buttons was this:

    scrollbar contents button.up {
        -gtk-icon-source: url('assets/arrow_up.png');
    }
    
    scrollbar contents button.down {
        -gtk-icon-source: url('assets/arrow_down.png');
    }
    
    scrollbar contents button.left {
        -gtk-icon-source: url('assets/arrow_left.png');
    }
    
    scrollbar contents button.right {
        -gtk-icon-source: url('assets/arrow_right.png');
    }
    

    which produced the following highly comical effect:

    Left and right buttons have up and down arrows, not left and
          right arrows

    There are no left and right classes, but the theming engine did not complain about it, presumably because you can probably add arbitrary classes to any element.

    Don't Rely Just on the Widget Factory

    gtk3-widget-factory is a great tool for presenting a theme because you can quickly get an idea about how the thing looks. But it's not the only reference you should use. It's good in the early stages of development, but as soon as you have something that works reasonably well in the widget factory, you should test extensively with real-world applications.

    Some examples of typical caveats that you do not encounter in gtk3-widget-factory include:

    1. Various types of nested widgets, such as buttons placed in notebook tabs. A common wart is pictured below: you want to give your buttons a 3D look (great, you're already better than 95% of the people who write GTK themes), so you style them all in 3D by default. But if you try to do that to flat buttons as well, they look like crap on top of tabs:
    2. The open file... dialog, which poses a bunch of scrollview-related alignment issues that are not immediately obvious in gtk3-widget-factory
    3. Application-specific hacks, custom stylesheets etc..

    What CSS Rule Determines a Given Behaviour?

    The interactive debugger (launch an application with GTK_DEBUG=interactive set) has a neat feature: when a rule is applied, it tells you where in the CSS chain it got it from. See below for an example: the border-left-style property of an image node is solid, and that's because of whatever happens to be on line 28 from gtk.css

    Screenshot of interactive debugger

    Why is this here?

    The worst plight that mobile computing brought to our world is not the lack of privacy. The worst plight that mobile computing brought to our world is this idea that touch interfaces are to be emulated everywhere. Five years later, we have flat themes with indistinguishable widgets that have acres of padding inside and outside. So I set out to make my own, knowing full well that it is going to look horrible, but that it will at least let me use my computer again.

    The very modest result is here. It is very clunky, for reasons which I am unable to convey without offending other programmers, but it is somewhat usable.

    I also learned a valuable lesson.

    CSS is shit