Button style

[Max Stephen Russell]

I have yet to find an outright example for styling a button in Blockly. Could someone show me the simple way to do this, please? Even if this won't be my preferred method, I would like to understand what is available, and I do not believe my help is to be found in the guide here:  https://developers.google.com/blockly/guides/configure/web/toolboxes/buttons

I'm *guessing* that the very best way is to follow the pattern for a custom toolbox label as I did with the codelab.

 {

        kind: 'category',

        name: 'Action',

        colour: 272,

        contents: [

          {

            kind: 'button',

            text: 'Trying to style',

// so far I have failed to style a button

          },      

        ]

 }

Thanks very much.

Steve

[epas...@google.com]

Hi Steve,

To style the button you'd add the web-class property to it and specify the class name to apply, then you can add any custom styling you want to your css using that class name.

          {

            kind: 'button',

            text: 'Trying to style',

            web-class: 'myButtonStyle',

// so far I have failed to style a button

          },  

Cheers,

Erik

[Max Stephen Russell]

Thanks, Erik, but still I have no styling.

In toolbox.js:

          {
            kind: 'button',
            text: 'Trying to style',
            'web-class': 'myButtonStyle',

            // still no style applied, what am I missing?
          },  

In toolbox_style.css:

.myButtonStyle {

  background-color: #4CAF50;

  color: white;

  padding: 8px 16px;

  border: none;

  cursor: pointer;

}

[Max Stephen Russell]

          {
            kind: 'button',
            text: 'Trying to style',
            'web-class': 'myButtonStyle',
            // still no style applied, what am I missing?
          },  

If I don't enclose web-class with quotes, I get:

ERROR in ./src/toolbox.js 194:15
Module parse failed: Unexpected token (194:15)

If I do enclose web-class with quotes, I get no styling results for my button.

[epas...@google.com]

I was able to get it working locally by putting everything in quotes like in the codelab:

```

<style>

...
    .myButton {
      fill: blue;
    }

...

</style>

...

var toolbox = {
    "kind": "flyoutToolbox",
    "contents": [
...,

      {
        "kind": "button",
        "text": "Trying to style",

        "web-class": "myButton"
      },
    ]
  };
...

    var workspace = Blockly.inject('blocklyDiv', {
      toolbox: toolbox
    });

```

This gave me a button that looks like this:

[Max Stephen Russell]

Well thank you very much for putting so much effort into this. I too can get your fill idea to give me a blue button, but nothing else has an apparent effect on this button in the toolbox. So it seems to me there is a basic issue that I haven't put my finger on, like what exactly is being targeted here.

Much appreciated, Erik.

-Steve

[Max Stephen Russell]

“The fill property is primarily used for styling SVG elements, not for general HTML elements.”

[Max Stephen Russell]

I think this is not a productive subject. I remember now that in times gone by, when I wanted a good-looking button, I usually made my own.

[epas...@google.com]

Sorry, the fill property just happened to be the first one I tried. It looks like part of it is the specificity for whatever you're trying to replace. Looking at the element in my workspace I see that any changes to the font are comparing to the blocklyText class which has a specificity of (0, 3, 0). If you use my example directly, the specificity for the myButton class is only (0, 1, 0). I was able to override the default text styling by making the selector more specific, though I'm not sure this is the most effective way to do so.

    .myButtonStyle {
      fill: green;
    }
    .myButtonStyle.myButtonStyle > .blocklyText {
      font-style: italic;
      font-size: 50px;
      color: red;
    }

[epas...@google.com]

No worries. Sorry I wasn't able to help you find a solution.

[Max Stephen Russell]

But you did help me, Erik. Your method is somewhat ingenious, if I can just determine that it is completely reliable. This CSS specificity concept is new to me. I need to see exactly what the 0,3,0 and 0,1,0 represent in this case. These results are about as good as I could have hoped for. Thanks a lot! And I always find a solution, so either way you have been a big help to me, as happens when people put their heads together.

-Steve