Putting rectangular box behind the label text in a category

[JAIN RAJESH]

Hello,

I have put labels in a toolbox category and styled it by putting a class and applying CSS. The codes are as below:

Label with class:

            <label text="Math Variables" web-class="RGBBulbStyle"></label>

style:

        .blocklyFlyoutLabel.RGBBulbStyle>.blocklyFlyoutLabelText{

            font-size: larger;

            font-weight:bold;

             fill: #00f;

        }

Now, I want to put a rectangular box (blue color) behind the text (in white) as shown in the attached image.

Please help.

Kumaar

[JAIN RAJESH]

Hello,

I am still awaiting any reply. Hope, somebody responds soon.

[Christopher Allen]

Hi Kumaar,

Sorry for the delay in replying to you; I wrote a draft, went to check something I'd written was actually true, and forgot to come back to click send!

This isn't really a Blockly question, but a basic CSS question.  Unfortunately, this week it is my turn to answer your questions, and I happen to be the one member of the Blockly team who knows the least about CSS.  Fortunately, however, I have MDN to show me what to do, and my helpful teammates to explain why the thing I tired at first wasn't working!

After a bit of experimentation with the Chrome inspector, I think you can achieve the desired result by adding a few extra items to your stylesheet:

  .blocklyFlyoutLabel.RGBBulbStyle>.blocklyFlyoutLabelBackground{

    opacity: 1;

    fill: #00f;

  }

(You don't need to put a fill on the blocklyFlyoutLabelText.)

You can also set rx and ry to 0 if you don't want rounded corners.

Apologies again and best wishes,

Christopher

 

[JAIN RAJESH]

Thank you Christopher,

It worked.

😊😊

Kumaar

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAN0w5eZR6pWo6-PMk8ejWwHFz2juN%2B7fLBO4U51mh3yNhX%2BGzQ%40mail.gmail.com.