GTK+3 donne la possibilité de donner du style aux applications et les widgets via une description CSS-like très naturelle. Les designeurs familiers au CSS pourront donc créer facilement de fabuleuses interfaces au design totalement personnalisable.
Il est à noter qu’en Qt, il est possible d’appliquer du CSS directement via l’éditeur visuel de fenêtres. Mais pour GTK+, il vas falloir le faire programmatiquement, (On peut désormé appliquer des classe de style depuis Glade) mais ce n’est pas si compliqué. C’est d’une facilité déconcertante.
Je vais dans cet article vous montrer comment appliquer du CSS à une interface GTK+ en Python (PyGobject).
De la théorie
Pour utiliser ce fichu CSS, on va devoir nous 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. En d’autres termes, on charge du CSS dans un provider, qu’on ajoute au contexte stylistique d’un widget ou de toute l’application.
Dans la suite, ce qui appliquera réellement du style CSS est la ligne :
widget.get_style_context().add_provider(css, 600) Le 600 de la fin indique
l’indice de priorité d’exécution du style. Plus cet indice est bas, plutôt le
style sera appliqué et plus il aura de chance de se faire écraser. Je crois que
cette ligne parle d’elle même et n’as pas besoin de plus d’explications. Mais si
vous avez des questions, n’hésitez surtout pas à ne pas les poser, en
commentaire ;).
Appliquer le CSS sur l’ensemble de l’application
from gi.repository import Gtk, Gdk
css = Gtk.CssProvider()
# css.load_from_file(file)
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_file(file)
css.load_from_data('''
GtkEntry {
color: #900185;
}
''')
entry.get_style_context().add_provider(css, 600)
Selecteurs
On peut utiliser les sélecteurs CSS et de la même façon. Toutefois, il est plus commode de faire quelques rappels par ici. Il faut indiquer le nom de la class du widget comme qui dirait en C à la place des noms des éléments. On doit donc préfixer le nom du widget par un Gtk. Par exemple GtkEntry, et pas juste un Entry. Les noms des widgets (ceux que vous leurs donner) jouent le rôle des IDs.
Voici quelques exemples de ce qu’on peut faire. Ce sont les exemples de la documentation officielle. J’ai simplement traduit les commentaires.
/* Donne du style aux labels qui descendent d'une fenêtre */
GtkWindow GtkLabel {
background-color: #898989
}
/* Donne du style aux notebooks et tout ce qui se trouve
à l’intérieur */
GtkNotebook {
background-color: #a939f0
}
/* Donne du style aux combo boxes, et les entries qui
descendent directement de notebook */
GtkComboBox,
GtkNotebook > GtkEntry {
color: @fg_color;
background-color: #1209a2
}
/* Donne du style à n'importe quel widget à
l'intérieur d'un GtkBin */
GtkBin * {
font: Sans 20
}
/* Donne du style à un label nommé title-label */
GtkLabel#title-label {
font: Sans 15
}
/* Donne du style à tout widget nommé main-entry */
#main-entry {
background-color: #f0a810
}
/* Donne du style à tous les widget définissants la class entry */
.entry {
color: #39f1f9;
}
/* Donne du style seulement aux entries des spinbuttons */
GtkSpinButton.entry {
color: #900185
}