GTK+3 et style CSS

08 December 2012 · #css, #gtk3, #pygobject

GTK+3 donne la possibilité de donner du style aux applications et aux widgets via une description CSS-like très naturelle. Les designers familiers au CSS pourront donc créer facilement de fabuleuses interfaces.

De la théorie

Pour utiliser ce CSS, on va devoir se servir de l'objet Gtk.CssProvider. On indique à ce CssProvider notre feuille de style qu'on charge soit depuis un fichier .css soit d'une variable string. Il ne reste plus qu'à appliquer ce CSS.

Appliquer le CSS sur l'ensemble de l'application

from gi.repository import Gtk, Gdk

css = Gtk.CssProvider()
css.load_from_data('''
GtkEntry {
    color: #900185;
}''')

Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
       css, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

Appliquer le CSS sur un seul widget

entry = Gtk.Entry()
css = Gtk.CssProvider()
css.load_from_data('''
GtkEntry {
    color: #900185;
}
''')
entry.get_style_context().add_provider(css, 600)

Sélecteurs

On peut utiliser les sélecteurs CSS de la même façon :

/* Donne du style aux labels qui descendent d'une fenêtre */
GtkWindow GtkLabel { background-color: #898989 }
/* Style par classe */
.myClass { background-color: blue }
/* Style par nom de widget */
#myWidget { background-color: red }