User Module missing CSS classes

[ndom91]

Hey folks, I'm trying to customize the user module a bit, but it doesn't look like there are any CSS classes for the various elements.

The wiki entry doesn't list any CSS at all at the bottom. Seems like there aren't any defined in the user.cpp file to begin with 😢

I was hoping to be able to round the avatar, for example.

#user .avatar {
  border-radius: 50%;
}

[RobertMueller2]

You should be able to style #user image, e.g.

#user image {
    border-radius: 50%;
    background-color: #ffffff;
    padding: 5px;
}

if you start waybar with GTK_DEBUG=interactive, you can have a look at the elements including CSS hierarchy.

[HarshNarayanJha]

This adds a circular border to the image rather than rounded the image itself

[RobertMueller2]

It does, but that's a limitation of GtkImage. https://gitlab.gnome.org/GNOME/gtk/-/issues/555

The above is a working CSS selector. It might be more useful once #2815 is implemented. Short of that, somebody would have to implement a custom widget, as suggest in the GTK issue above.