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()

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


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.

Asked By: Phoeniqz



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.

Answered By: shevy
Categories: questions Tags: , , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.