rust - How do I style this TemplateChild<gtk::Label>? - Stack Overflow

I want to style this TemplateChild<gtk::Label> and make it grey in color.

#[derive(Default, gtk::CompositeTemplate, glib::Properties)]
#[properties(wrapper_type = super::AccountRow)]
#[template(resource = "/com/belmoussaoui/Authenticator/account_row.ui")]
pub struct AccountRow {
    #[property(get, set, construct_only)]
    pub account: OnceCell<Account>,
    #[template_child]
    pub increment_btn: TemplateChild<gtk::Button>,
    #[template_child]
    pub otp_label: TemplateChild<gtk::Label>,
    #[template_child]
    pub next_otp_label: TemplateChild<gtk::Label>,
}

Here is how its defined in account_row.ui.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template parent="AdwActionRow" class="AccountRow">
    <property name="activatable">True</property>
    <property name="selectable">False</property>
    <property name="use-markup">False</property>
    <child type="suffix">
      <object class="GtkLabel" id="otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkLabel" id="next_otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton" id="increment_btn">
        <property name="visible">False</property>
        <property name="valign">center</property>
        <property name="action-name">account.increment-counter</property>
        <property name="icon-name">refresh-symbolic</property>
        <property name="tooltip-text" translatable="yes">Increment the counter</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton">
        <property name="valign">center</property>
        <property name="action-name">account.copy-otp</property>
        <property name="icon-name">copy-symbolic</property>
        <property name="tooltip-text" translatable="yes">Copy PIN to clipboard</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkImage">
        <property name="icon_name">go-next-symbolic</property>
        <property name="tooltip-text" translatable="yes">Account details</property>
      </object>
    </child>
  </template>
</interface>

I've tried in style.css, I expected it to change something, but it didn't do anything.

#next_otp_label {
  color: gray;
}

I want to style this TemplateChild<gtk::Label> and make it grey in color.

#[derive(Default, gtk::CompositeTemplate, glib::Properties)]
#[properties(wrapper_type = super::AccountRow)]
#[template(resource = "/com/belmoussaoui/Authenticator/account_row.ui")]
pub struct AccountRow {
    #[property(get, set, construct_only)]
    pub account: OnceCell<Account>,
    #[template_child]
    pub increment_btn: TemplateChild<gtk::Button>,
    #[template_child]
    pub otp_label: TemplateChild<gtk::Label>,
    #[template_child]
    pub next_otp_label: TemplateChild<gtk::Label>,
}

Here is how its defined in account_row.ui.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template parent="AdwActionRow" class="AccountRow">
    <property name="activatable">True</property>
    <property name="selectable">False</property>
    <property name="use-markup">False</property>
    <child type="suffix">
      <object class="GtkLabel" id="otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkLabel" id="next_otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton" id="increment_btn">
        <property name="visible">False</property>
        <property name="valign">center</property>
        <property name="action-name">account.increment-counter</property>
        <property name="icon-name">refresh-symbolic</property>
        <property name="tooltip-text" translatable="yes">Increment the counter</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton">
        <property name="valign">center</property>
        <property name="action-name">account.copy-otp</property>
        <property name="icon-name">copy-symbolic</property>
        <property name="tooltip-text" translatable="yes">Copy PIN to clipboard</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkImage">
        <property name="icon_name">go-next-symbolic</property>
        <property name="tooltip-text" translatable="yes">Account details</property>
      </object>
    </child>
  </template>
</interface>

I've tried in style.css, I expected it to change something, but it didn't do anything.

#next_otp_label {
  color: gray;
}

• rust
• gtk
• authenticator
• gnome-builder

Share Improve this question Follow asked Feb 3 at 9:12 ItsMeItsMe 1122 bronze badges 1

• I am guessing, you forgot to load the CSS into your application. Do not know how to do it on Rust, but here is a C documentation: docs.gtk.org/gtk4/class.CssProvider.html – White Owl Commented Feb 3 at 12:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

CSS in gtk does not work the same as the web standard. You need to add the class you created as a style like this:

<style>
<class name="your-classe"/>
</style>

If you want to reference a widget in CSS, this reference is not made by the widget's ID, you need to add a "name" property to your widget and reference this "name".

<property name="name">next_otp_label</property>

Both ways will work, but the first is better because it does not need to add a property just to make a reference.