Search code examples
javascriptcssubuntugnome-shellgnome-shell-extensions

Gnome Shell Stylesheet

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?

Solution

  • 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: