Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change the font size of a Gtk.Label in vala?

Tags:

linux

vala

gtk3

I'm a Vala/Gtk newbie and I'm trying to change the font size of a Gtk.Label, but I can't find a good way to do it.

I find out that I can use the markup like this :

    var welcome_message = new Gtk.Label ("<span size='17000'>Hello</span>");
    welcome_message.set_use_markup (true);

But it seems a little hackish. What is the right way to do it ?

like image 349
Olivier Lasne Avatar asked Dec 11 '22 01:12

Olivier Lasne


1 Answers

Thanks lethalman and nemequ.

I think it might help someone so here is a little example of how to use css with Vala.

using Gtk;

public class StyleApp1 : Gtk.Window
{
    public StyleApp1() 
    {

        this.title = "Style app example";
        this.set_border_width (10);
        this.set_position (Gtk.WindowPosition.CENTER);

        this.set_default_size (350, 200);
        this.destroy.connect (Gtk.main_quit);

        var screen = this.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 {
                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);
        this.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);
    }
}

static int main(string[] args) {
    Gtk.init(ref args);

    StyleApp1 win = new StyleApp1();
    win.show_all();

    Gtk.main();
    return 0;
}

and the styleapp1.css file :

GtkWindow {
    font-size: 17px;
}

.my_class {
    color: pink;
}

NB : if you use add_provider instead of add_provider_for_screen. You have to use add_provider for every widget that you want to customize.

like image 111
Olivier Lasne Avatar answered Jan 08 '23 17:01

Olivier Lasne