This blog describes how to style GTK+ based User interface using custom css. Styling gtk based user interface is now an easy task. gtk3 provides following important class to use css inside gtk+ program.

/*---- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
  /*---------------------------*/

Let us see below figure. We are going to implement this GUI in gtk+ program.

gtk css tutorial with example code

gtk css tutorial with example code to implement above gui

  • Write gtk+ program. Let us look at the below code (sample.c)
#include<gtk/gtk.h>
#include<stdbool.h>

GtkWidget *window;
GtkWidget *vbox;
GtkWidget *imagebox;
GtkWidget *hbox;
GtkWidget *go_button;
GtkWidget *back_button;
GtkWidget *forward_button;
GtkWidget *stop_button;
GtkWidget *entry;

const gchar* home = "style.css";
 
GError *error = 0;
 
int main (int argc, char **argv)
{


  gtk_init (&argc, &argv);

  /*---- CSS ------------------*/
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
  /*---------------------------*/

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position (GTK_WINDOW (window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size (GTK_WINDOW (window), 600, 350);
  gtk_window_set_title (GTK_WINDOW (window), "myWebBrowser");

  vbox = gtk_vbox_new (false, false);
  gtk_box_set_homogeneous(GTK_BOX(vbox),false);
  imagebox = gtk_vbox_new (true, true);
  hbox = gtk_hbox_new (false, false);

  gtk_container_add (GTK_CONTAINER (window), vbox);
  gtk_box_pack_start (GTK_BOX (vbox), hbox, 0, 0, 0);


  back_button = gtk_button_new_with_label ("Back");
  gtk_widget_set_name(back_button,"back");
  forward_button = gtk_button_new_with_label ("Forward");
  gtk_widget_set_name(forward_button,"forw");
  go_button = gtk_button_new_with_label ("Go");
  gtk_widget_set_name(go_button,"go");
  stop_button = gtk_button_new_with_label ("stop");
  gtk_widget_set_name(stop_button,"stop");
  entry = gtk_entry_new ();
  gtk_widget_set_name(entry,"addr");
  gtk_entry_set_text (GTK_ENTRY (entry), "http://");

  gtk_box_pack_start (GTK_BOX (hbox), back_button, 0, 0, 1);
  gtk_box_pack_start (GTK_BOX (hbox), forward_button, 0, 0, 1);
  gtk_box_pack_start (GTK_BOX (hbox), stop_button, 0, 0, 1);
  gtk_box_pack_start (GTK_BOX (hbox), entry, 1, 1, 1);
  gtk_box_pack_start (GTK_BOX (hbox), go_button, 0, 0, 0);
  gtk_box_pack_start (GTK_BOX (vbox), imagebox, 1, 1, 1);


  g_signal_connect_swapped (G_OBJECT (window), "destroy",
			    G_CALLBACK (gtk_main_quit), NULL);

    provider = gtk_css_provider_new ();
    display = gdk_display_get_default ();
    screen = gdk_display_get_default_screen (display);
    gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
 
    GError *error = 0;
    gtk_css_provider_load_from_file(provider, g_file_new_for_path(home), &error);
    g_object_unref (provider);
  
    gtk_widget_show_all (window);

  gtk_main ();
  return 0;

}
  • Let us create custom style.css file.
GtkWindow {
background-color:grey;
    border-radius: 15px;
}
#back {
    background: green;
    color: white;
    font-family: DejaVu Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;
}

#forw {
    background: blue;
    color: white;
    font-family: DejaVu Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;
}

#stop {
    background: red;
    color: white;
    font-family: DejaVu Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;
}

#go {
    background: green;
    color: white;
    font-family: DejaVu Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;

}

#addr {
    background: yellow;
    color: blue;
    font-family: DejaVu Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;

}

#go:hover,
#back:hover,
#stop:hover,
#forw:hover {
 background-color:black;
}
  • We can build the above program using below command and run the binary sample.
gcc sample.c -o sample pkg-config --cflags --libs gtk+-3.0

Ref:

https://developer.gnome.org/gtk3/stable/GtkCssProvider.html

Gtk+ layout and progress bar




Related Contents to follow