CSS customizations

[Noor HM]

Hello,

I've been editing the toolbox and workspace via CSS in my implementation, but for some reason this is how the toolbox is showing when i select a category 
under which class does this fall to customize?
The expected behavior should be that the selector "or the blue rectangle" should fill the label properly.

[epas...@google.com]

Hi there,

The easiest way to figure out which classes you want to modify is to take a look at things with your browser's inspector tools open. Looking at the standard playground toolbox (see screenshot below) you can see that the blocklyToolboxCategory and the blocklyToolboxSelected classes are controlling the appearance of the background and the padding for those. You can also edit the properties directly in the inspector to see how they affect the appearance before changing them in your CSS file.

Cheers,

Erik

[Shawn Wallace]

Hi Noor:

If you're using the latest Blockly (version 12.X) some of the elements in the toolbox have updated names. For instance:

blocklyTreeRow -> blocklyToolboxCategory
blocklyTreeLabel -> blocklyToolboxCategoryLabel
blocklyTreeRowContentContainer -> blocklyToolboxCategoryContent

I think this happened with v12.1 so they may be different on 12.0. If that's not it then feel free to share your CSS.

Shawn

Shawn Wallace 

Unruly Studios

Cell: (401) 835-7550

  

--
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 visit https://groups.google.com/d/msgid/blockly/ac6a1e2b-0072-4fce-a042-998d2e4f4860n%40googlegroups.com.

[Noor HM]

Thank you so much, that was helpful