SOLVED: Keyboard - selective background color change of a key

On a Keyboard: Is there any change to change the background color of selected keys?

If I try this...

.key:nth-child(1) {
  background-color: red

.key:nth-child(2) {
  background-color: red

... the keyboard looks like this.
Bildschirmfoto 2023-04-18 um 16.43.57

Is it possible that it looks more like that?
Bildschirmfoto 2023-04-18 um 16.49.37

.key:nth-child(2) inner {
  background-color: red

You can use the browser inspector to look into the widget's html/css and find out what needs to be changed.

1 Like

Great... thanks
I only miss an black outline on the black keys.

But you said something about browser inspector, I found it with the F12 key. I'm overwhelmed by all the information, I have to find my way around first.

try this

.key > inner {
  border: 1px solid #111;

.key:nth-child(2) inner, .key:nth-child(3) inner, .key:nth-child(5) inner {
  background-color: orange;


Could this somehow be used to display an instruments playable range dynamically?

It is alway a question about the right syntax...
That is helpful... thanks

I plan to show the playable keys if you choose a scale...


note that the on state doesn't not work... Can't find out to get it working...

this post can help you to display notes of your scale :slight_smile:

1 Like

I updated the right bottom corner with a keyboard.
The keyboard shows which piano keys occur in the harp.
The red is the root key and the blue are the keys of the scale you play on the harp.
...and it adapts to your choice of your red "root key"-button or your blue "scaling"-button.

By the way... here the download: (5.1 KB)


Thankyou for sharing this update. :+1:

Question about this bit of css,, is it possible to update the n in nth child by sending .key:nth-child(variable) as a variable from a custom module?

I want to change the key that is coloured using a custom module.

This is great. I am trying to understand what you have done here but can't get the variable /variableharpScale to be collected. Where do I need to save it or address it?

Currently when I open the OSC panel I see a panel as per your image above but can't change the scale from C major.

OMG don't worry.

It was all working correctly!!!! Totally a user error....

I just needed to double tap on the button!!!!!!!!! I don't use double tap functions so forgot that it was available!


please check the Harp with pedals, there is the last version.

and maybe check this