Change style of GtkLabel inside header bar

Question

I am trying to add a GtkLabel to the right of a GtkHeaderBar then change the font weight but I cannot manage to do it.

I have my XML like this:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template class="ExampleAppWindow" parent="GtkApplicationWindow">
    <property name="title" translatable="yes">Demo</property>
    <property name="default-width">800</property>
    <property name="default-height">600</property>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="header">
        <child type="start">
          <object class="GtkLabel" id="version">
            <property name="label" translatable="yes">Version 1.0.0</property>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="GtkBox" id="content_box">
        <property name="orientation">horizontal</property>
        <child>
          <object class="GtkLabel" id="demo">
            <property name="label">Work in progress</property>
          </object>
        </child>
      </object>
    </child>
  </template>
</interface>

Then I have the code

#include <gtk/gtk.h>

#include "example.h"
#include "exampleappwin.h"

struct _ExampleAppWindow
{
  GtkApplicationWindow parent;
};

G_DEFINE_TYPE(ExamplAppWindow, example_app_window, GTK_TYPE_APPLICATION_WINDOW);

static void
example_app_window_init (ExampleAppWindow *win)
{
    GtkCssProvider *cssProvider = gtk_css_provider_new ();
    gtk_css_provider_load_from_resource (cssProvider, "/org/gtk/exampleapp/theme.css");

    gtk_style_context_add_provider (gtk_widget_get_style_context(GTK_WIDGET (win)),
                               GTK_STYLE_PROVIDER(cssProvider),
                               GTK_STYLE_PROVIDER_PRIORITY_USER);
                               
    gtk_widget_init_template (GTK_WIDGET (win));
}

static void
example_app_window_class_init (ExampleAppWindowClass *class)
{
    gtk_widget_class_set_template_from_resource (GTK_WIDGET_CLASS (class),
                                               "/org/gtk/exampleapp/window.ui");
}

ExampleAppWindow *
example_app_window_new (ExampleApp *app)
{
  return g_object_new (EXAMPLE_APP_WINDOW_TYPE, "application", app, NULL);
}

Then I have my style like this

GtkLabel {
    color: red;
    font-weight: bold;
}

And finally the gresources

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/org/gtk/exampleapp">
    <file preprocess="xml-stripblanks">window.ui</file>
    <file>theme.css</file>
  </gresource>
</gresources>

Everything is compiled with meson

example_resources = gnome.compile_resources('asistent_resources',
  'example.gresource.xml',
  source_dir: '.')

But it does nothing. The label does not change its style. I have also tried

<object class="GtkLabel">
  <property name="label" translatable="yes">Version 1.0.0</property>
  <attributes>
    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
    <attribute name="background" value="red" start="5" end="10"/>
  </attributes>
</object>

or even <property name="label" translatable="yes"><b>Version 1.0.0</b></property> but when I do these things the label just disappears completely from the header.

I only went as far as being able to change the global style using

* {
    color: red;
    font-weight: bold;
}

This works but using .classname or #id or name selectors does nothing.

My code is based on this example

score 0 · Answer 1 · answered Apr 19 '22 at 01:12

You would think that the definition in the XML file for the object class would equate to a CSS class attribute, but it does not. Evidently, the object definition line:

<object class="GtkLabel" id="demo">

is for the benefit of the GTK builder process for building the proper widgets in the program and not what one would assume to be a CSS class attribute. However, you do have other alternative attributes available that will work for applying color and font weight at your disposal.

GTK labels have an element name of "label" which theoretically could be used with the following custom CSS block.

label {
    color: red;
    font-weight: bold;
}

However, since that element name is the same for all GTK labels, you would see the same behavior as when you had used the asterisk as noted above.

More likely, what you could do is add a "name" property to each label that you want to display in red bold text as follows.

<property name="name">red_bold</property>

That, coupled with a CSS block as follows would produce the desired results.

#red_bold {
    color: red;
    font-weight: bold;
}

Alternatively, GTK4 provides and additional property that overrides the element name of a widget called "css-name". It would be added as a property to each widget that is to display in red bold text.

<property name="css-name">redBOLD</property>

And the associated CSS block would be composed as follows.

redBOLD {
    color: red;
    font-weight: bold;
}

Please note the names I chose for the property names were arbitrary and just names that described what effect was being generated.

Attached is a sample display where I utilized the "red_bold" name property.

I hope that provides you a clear explanation, and with some options for customizing your widgets with CSS.

Regards,

Craig

Change style of GtkLabel inside header bar

1 Answers1