Search code examples
pythoncssgtkpygtk

CSS styling for Gtk Widgets not working (Python, Gtk4)?

In my app I want some kind of profile picture a user can have. At first wanted to use libadwaita's Avatar widget, but it cannot load images from a file, which is a feature that I need. So I thought I would just implement a normal Gtk.Image and set its border-radius to 50%. However, GTK seems to ignore my CSS rules. The image is displayed but without the border radius. Here is my code:

# in my class MainWindow(Adw.ApplicationWindow)
css_provider = Gtk.CssProvider()
css_provider.load_from_path("style.css")
Gtk.StyleContext.add_provider_for_display(
    Gdk.Display.get_default(),
    css_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
)

img = Gtk.Image.new_from_file("some_image.jpg")
img.set_pixel_size(100)

self.some_box.append(img)

code of my style.css:

image { /* I also tried 'GtkImage' and a custom class */
    border: 4px solid #000;
}

EDIT: Solved it using a Gtk.Frame as a wrapper. Set the image as its child.

Solution

  • I just tested this in ruby-gtk, the image here is the result:

    The CSS I was using is exactly this:

    image {
  border: 50px solid black;
  border-radius: 50%;
}

    And that should at the least show a circle.

    Do you apply the CSS? GtkImage is deprecated.

    It may also help if you adapt your code a little bit so others can quickly copy/paste it. For me it was easier to just put it into an autogenerate I use for ruby-gtk3, rather than put in the missing pieces for python-gtk.

    Edit: actually I just noticed you refer to gtk4. gtk4 is odd.

    On gtk3 it works though.