Vala Not Connecting to Style Sheet

Question

I am learning Vala at the moment, after a couple years programming with Java.

After some extensive searches in the net, I discovered a way to style a GTK Window background with a css style sheet, from the example given here , that uses a GTk.Window class extension. The code compiles fine on my machine (Ubuntu 19.04) and the widgets are styled as expected.

I was trying to combine the approach with one from this site . Here, the vala class extends to Gtk.Application, instead of Gtk.Window.

The code compiles and the window opens, but the widgets don't get styled according to the style sheet.

public class StyleApp1 : Gtk.Application {

    public StyleApp1 () {
        Object (
            application_id: "com.css.test",
            flags: ApplicationFlags.FLAGS_NONE
        );
    }

    protected override void activate () {

        var window = new Gtk.ApplicationWindow (this);
        window.set_default_size (350, 500);
        window.title = "Hello World";
        window.get_style_context().add_class("my_window");

        var screen = window.get_screen ();

        var css_provider = new Gtk.CssProvider();
        string path = "styleapp1.css";

        // test if the css file exist
        if (FileUtils.test (path, FileTest.EXISTS))
        {
            try {
                stdout.printf("File is there");
                css_provider.load_from_path(path);
                Gtk.StyleContext.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
            } catch (Error e) {
                error ("Cannot load CSS stylesheet: %s", e.message);
            }
        }

        var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 10);
        window.add (box);

        var label = new Gtk.Label ("Thank you");
        box.add (label);

        var label2 = new Gtk.Label ("Stackoverflow");
        label2.get_style_context().add_class("my_class");
        box.add (label2);

        window.show_all ();
    }

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

CSS file (syleapp1.css)

GtkWindow {
    font-size: 17px;
}

.my_class {
    color: red;
}

.my_window {
    background-color: rgba (200, 100, 100, 0.9);
 }

Meson build file:

project('com.css.test' , 'vala' , 'c')

executable (
    meson.project_name(),
   'StyleApp1.vala',

    dependencies: [
        dependency('gtk+-3.0')
    ],
install: true
)

I have no idea what I am missing. Can someone explain and point me into the right direction?

Many thank in advance.

score 1 · Accepted Answer · answered Sep 16 '19 at 09:12

1

It works fine here:

I'm using Windows / msys2 at the moment.

answered Sep 16 '19 at 09:12

Jens Mühlenhoff

14,565
6
56
113

That's interesting.... thanks for trying. How do you compile? Are you using meson? – rainer Sep 16 '19 at 21:27
Just the plain compiler: `valac -o styleapp1 styleapp1.vala --pkg gtk+-3.0` – Jens Mühlenhoff Sep 17 '19 at 09:34
Direct compiling also works on my machine. CSS style does not work when I compile with meson. Can you figure out why? I have edited my query to include the build file. – rainer Sep 17 '19 at 13:51
I tried building with meson (this time on Linux). It still works fine, but with meson the executable is put into the build dir (or install dir). When the .css file is not there no styling occurs. So maybe you got your directories confused. Maybe test with an absolute path for the style sheet file? (A better solution would be i.e. to use the GLib resource compiler) – Jens Mühlenhoff Sep 17 '19 at 17:35

Vala Not Connecting to Style Sheet

1 Answers1