====== Applicare stili css in Gtk3 ====== Autore: **//Fabio Di Matteo//** \\ Ultima revisione: **//03/03/2017 - 09:53//** \\ \\ {{:programmazione:gtk:2017-03-03_095219.png?406|}} Dalla versione 3 in poi delle librerie Gtk รจ possibile applicare dei fogli di stile CSS ai widget proprio come si fa per le pagine web. Nell'articolo vedremo come fare. ===== Glade ===== Per ogni widget Glade possiede ,nella scheda delle proprieta' "Comuni" gli attributi del widget relativamente ai fogli di stile . Infatti possiamo vedere vedere "Nome widget" e "Classe di stile" che sono rispettivamente l'id del widget e la classe di stile a cui appartiene (nel css rappresentati come #id e .classe , ovvero con il simbolo # per l'id e . per la classe). ===== Come caricare il foglio di stile ===== Realizziamo un foglio di stile come questo: **style.css** button { background-color: #FF0000; } #myLabel { color: #0000FF; background-image: linear-gradient(45deg, yellow, blue); margin-bottom: 30px; } #btBigButton{ background-image: linear-gradient(45deg, #008000, #78EB3E); border-radius: 25px; } #btBigButton:hover{ font-size: 58px; } #btBigButton>label { background-color: transparent; } Per caricarlo occorre in sostanza creare un **Provider css** e applicarlo alla finestra. Ecco i punti salienti del codice /*Creo il provider che servira' per applicare lo stile Css*/ GtkCssProvider* cssProvider =gtk_css_provider_new (); //Provider gchar* cssFilePath = g_build_filename("style.css", NULL); GFile* cssFile = g_file_new_for_path(cssFilePath); if (!gtk_css_provider_load_from_file (cssProvider, cssFile,&error)) { g_warning ("Problem on css provider: %s", error->message); g_error_free (error); } /*Applico il css sullo schermo corrente*/ GdkScreen *myScreen= gdk_screen_get_default (); gtk_style_context_add_provider_for_screen (myScreen, GTK_STYLE_PROVIDER (cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER); ===== Il codice completo ===== **main.c** #include int c; void on_mainWindow_delete_event(GtkWidget *widget, gpointer data); void push (GtkWidget *widget, gpointer data) { c++; gchar* title=g_strdup_printf("Hai cliccato %d volte", c); gtk_label_set_label (GTK_LABEL(data), title); } void clean(GtkWidget *widget, gpointer data) { gtk_label_set_label (GTK_LABEL(data), "Hai cliccato 0 volte"); c=0; } void on_mainWindow_delete_event(GtkWidget *widget, gpointer data) { gtk_main_quit(); } void mainWindowInit() { GError* error = NULL; gchar* glade_file = g_build_filename("gui.ui", NULL); GtkBuilder *xml; GObject *mainWindow, *btClean, *btPlus, *myLabel ; /*Creo il provider che servira' per applicare lo stile Css*/ GtkCssProvider* cssProvider =gtk_css_provider_new (); //Provider gchar* cssFilePath = g_build_filename("style.css", NULL); GFile* cssFile = g_file_new_for_path(cssFilePath); if (!gtk_css_provider_load_from_file (cssProvider, cssFile,&error)) { g_warning ("Problem on css provider: %s", error->message); g_error_free (error); } /*Applico il css sullo schermo corrente*/ GdkScreen *myScreen= gdk_screen_get_default (); gtk_style_context_add_provider_for_screen (myScreen, GTK_STYLE_PROVIDER (cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER); /*Infine carica come disolito il file dell'interfaccia */ xml = gtk_builder_new (); if (!gtk_builder_add_from_file (xml, glade_file, &error)) { g_warning ("Couldn\'t load builder file: %s", error->message); g_error_free (error); } mainWindow=gtk_builder_get_object (xml,"mainWindow" ); btPlus=gtk_builder_get_object (xml,"btPlus" ); btClean=gtk_builder_get_object (xml,"btClean" ); myLabel=gtk_builder_get_object (xml,"label" ); g_object_unref( G_OBJECT( xml ) ); g_signal_connect (mainWindow, "destroy", G_CALLBACK (on_mainWindow_delete_event), NULL); g_signal_connect (btPlus, "clicked", G_CALLBACK (push), myLabel); g_signal_connect (btClean, "clicked", G_CALLBACK (clean), myLabel); } int main (int argc, char **argv) { gtk_init (&argc, &argv); mainWindowInit(); gtk_main (); return 0; } **gui.ui** True False False True False vertical True False False True 7 0 myLabel True False Pronto. False True 1 Non fa niente btBigButton True True True False True 2 HeaderBar True False Titolo Applicazione Applicazione d'esempio True True False gtk-add True True True True False True 0 gtk-clear True True True True False True 2 **makefile** all: gcc main.c -o simple `pkg-config --cflags --libs gtk+-3.0`