Gnome Shell Stylesheet

Question

So I'm making a gnome shell extension, and I can't figure out how to make one part of my extension normal font weight. Here is my extension.js file:

'use strict';

const { St, Clutter } = imports.gi;

const Main = imports.ui.main;

let _myText;

class Extension {

    enable() {
    _myText = new St.Label({ text: 'This should be normal font weight.', y_align: Clutter.ActorAlign.CENTER, style_class: 'panel-button', track_hover: false, reactive: false});
    Main.panel._leftBox.insert_child_at_index(_myText, 10)
    }

    disable() {
    _myText.destroy();
    }
}

function init() {
    return new Extension();
}

And here is my stylesheet.css file:

StLabel._myText {
    font-weight: normal;
}

What am I doing wrong?

Answer 1

You can't just use arbitrary JavaScript variables in CSS; you need to tell a widget what CSS name and class it's supposed to use:

.my-class {
    font-weight: normal;
}

const myLabel = new St.Label({
    text: 'My Label',
    style_class: 'panel-button my-class',
});

See also:

• Anatomy of an Extension at gjs.guide
• St Documentation at gjs-docs.gnome.org