How do I apply CSS attributes by object id in GTK4?

Question

I am learning GTK4 from scratch, using GTKBuilder XML to construct objects and CSS to add style information from a file using:

const char cssPath[] = "/a/path/that/is/confirmed/to_be/working.css";
GtkCssProvider * cssProvider = gtk_css_provider_new();
gtk_css_provider_load_from_path(cssProvider, cssPath);
gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

When I use a generic CSS selector my style changes take affect, like so:

box { background-color: white; }
/* box goes white as expected */

but when I try and target a specific object using it's id="myBox" XML attribute, it doesn't work:

box#myBox { background-color: white; }
/* no colour change happens */

or

#myBox { background-color: white; }
/* no colour change happens here either */

The relevant section from my XML .ui file is:

    <object class="GtkBox" id="myBox">
        <property name="halign">GTK_ALIGN_CENTER</property>
        <child>

            <object class="GtkLabel" id="centreLabel">
                <property name="single-line-mode">true</property>
                <property name="xalign">0</property>
                <property name="yalign">0.5</property>
            </object>
        </child>
    </object>

Maybe I'm misunderstanding the way CSS selectors work, relative to the objects instantiated using GtkBuilder? I've read the docs, so I would appreciate any help anyone can offer here!

Cheers.

score 1 · Accepted Answer · answered Dec 02 '21 at 16:29

1

Using the name property in the UI file, you can set the specific Css name that you want your <object> to have. In order for this custom name to be used, you also need to put # in front of the myBox name in the Css, which you have already done.

To define the name property, simply add this line under your Box object in your UI file:

<property name="name">myBox</property>

Here is what your UI file should look like:

    <object class="GtkBox" id="myBox">
        <property name="halign">GTK_ALIGN_CENTER</property>
        <property name="name">myBox</property>
        <child>

            <object class="GtkLabel" id="centreLabel">
                <property name="single-line-mode">true</property>
                <property name="xalign">0</property>
                <property name="yalign">0.5</property>
            </object>
        </child>
    </object>

And here is what the Css should look like (you already had it this way):

#myBox { background-color: white; }

answered Dec 02 '21 at 16:29

Sylvester Kruin

3,294
5
16
39

Thanks - that worked straight away. It's always a simple answer isn't it ‍♂️ – rj_code Dec 02 '21 at 16:58
1

I'm only new to GTK but this feels like an area where the documentation assumes a lot about what you already know and never actually says it. Hmmm, I wonder if they take documentation PRs... – rj_code Dec 02 '21 at 16:59
1

Glad to help! I only just discovered how to do this today; I figured it out looking at [this question](https://stackoverflow.com/q/16740949/16775594), which is about something related. I don't know anything about C, so I'm glad that this didn't require C code to answer ;-)! It took me a while to figure out the the property was `name`; the Python methods that change this are called `set_css_name()` and `get_css_name()`, so I assumed at first that the property was something like `css-name`... – Sylvester Kruin Dec 02 '21 at 17:05

score 0 · Answer 2 · answered May 25 '22 at 22:29

I just got done going through this with GTK3. Horrible documentation.

Anyway, I had the exact same problem as you, and the solution was to ignore the GTK documentation (go figure).

You need the following to reference named nodes, I will use your example:

box#myBox { background-color: white; }

Change to:

#myBox box{ background-color: white; }

This solution was not listed anywhere on the GTK website.

How do I apply CSS attributes by object id in GTK4?

2 Answers2