How to Implement CSS Styling in GTK Vala?

Question

I'm trying to add CSS styling for my label in GTK, but I can't figure out how to get the files setup. I've currently added an include at the beginning, but I get this error:

I also don't know if I've implemented this correctly, very new to GTK programming. Can someone help me correctly set this up for CSS implementation?

#include<gtk/gtk.h>
public class MyApp : Gtk.Application {

  public MyApp() {
        Object (
              application_id: "com.github.omerntosi.gtkHangman",
              flags: ApplicationFlags.FLAGS_NONE
        );
  }

  protected override void activate() {
        var main_window = new Gtk.ApplicationWindow(this);
        main_window.set_default_size(1000,800);
        main_window.title = "GTK Hangman";

        var grid = new Gtk.Grid();
        grid.orientation = Gtk.Orientation.VERTICAL;
        grid.row_spacing = 6;

        var topHalf = new Gtk.Grid();
        topHalf.orientation = Gtk.Orientation.HORIZONTAL;
        grid.row_spacing = 6;

        var man = new Gtk.Image();
        man.set_from_file("../src/img/placeholder-500x350.png");
        topHalf.add(man);

        GtkCssProvider cssProvider = gtk_css_provider_new();
        gtk_css_provider_load_from_path(cssProvider, "style.css", NULL);
        gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

        var sol = new Gtk.Label("____ ______");
        sol.set_use_markup(true);
        topHalf.add(sol);

        grid.add(topHalf);
        main_window.add(grid);
        main_window.show_all();
  }

  public static int main(string[] args) {
        var app = new MyApp();
        return app.run(args);
  }
}

Which programming language? Python? JavaScript? C++ (with GtkMM?)? This is not native GTK (coded in C)! — Basile Starynkevitch, Mar 24 '18 at 21:48
Yes, I understand that but it is still the main language recommeded for Elementary OS development so I thought I would give it a try. I'm realizing how hard documentation is to actually find on it though. — Omer Naveed, Mar 24 '18 at 21:55
That include line is not valid Vala code, it's C. Get rid of it. — nemequ, Mar 25 '18 at 00:05

Jens Mühlenhoff · Accepted Answer · 2018-03-25T12:32:42.630

You were mixing Vala and C in the same file, I have translated the C part to Vala:

Removed the #include directive.
Ported the C code with Gtk.CssProvider from C to Vala

Here is the result:

public class MyApp : Gtk.Application {

  public MyApp() {
        Object (
              application_id: "com.github.omerntosi.gtkHangman",
              flags: ApplicationFlags.FLAGS_NONE
        );
  }

  protected override void activate() {
        var main_window = new Gtk.ApplicationWindow(this);
        main_window.set_default_size(1000,800);
        main_window.title = "GTK Hangman";

        var grid = new Gtk.Grid();
        grid.orientation = Gtk.Orientation.VERTICAL;
        grid.row_spacing = 6;

        var topHalf = new Gtk.Grid();
        topHalf.orientation = Gtk.Orientation.HORIZONTAL;
        grid.row_spacing = 6;

        var man = new Gtk.Image();
        man.set_from_file("../src/img/placeholder-500x350.png");
        topHalf.add(man);

        Gtk.CssProvider css_provider = new Gtk.CssProvider ();
        css_provider.load_from_path ("style.css");
        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);

        var sol = new Gtk.Label("____ ______");
        sol.set_use_markup(true);
        topHalf.add(sol);

        grid.add(topHalf);
        main_window.add(grid);
        main_window.show_all();
  }

  public static int main(string[] args) {
        var app = new MyApp();
        return app.run(args);
  }
}

Compile with --pkg gtk+-3.0. That will fix the compiler messages about missing gtk.h, etc. If not then you have not correctly installed the GTK+ 3.0 headers (apt-get install libgtk-3-dev package).

Vala is using the pkg-config tool under the hood to add CFLAGS and LDFLAGS to the C compiling step that is taken to compile a Vala source file to a binary.

The resulting C file will automatically have the #include <gtk/gtk.h>, because it is specified in the gtk+-3.0.vapi file that ships with the vala compiler.

I can't test it without the resource files, but it compiles just fine here after these changes.

There is a warning left, because the code is not catching a GLib.Error somewhere, but you should be able to fix that yourself.

Also here is another code example on how to use CSS in Vala:

https://stackoverflow.com/a/28465993/426242

score -1 · Answer 2 · edited Dec 21 '19 at 22:49

Hi i found an answer if you want to style one component 1) Just remove this:

GtkCssProvider cssProvider = gtk_css_provider_new();
        gtk_css_provider_load_from_path(cssProvider, "style.css", NULL);
        gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

and write:

var cssProvider = new Gtk.CssProvider ();
cssProvider.load_from_path ("yourcss.css");
sol.get_style_context ().add_provider (cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER);

then compile

How to Implement CSS Styling in GTK Vala?

2 Answers2