How to add custom css styles in toolbox of Blockly.

1,163 views
Skip to first unread message

Ashish sipani

unread,
Sep 18, 2019, 8:04:36 AM9/18/19
to Blockly
Hii,

Screenshot from 2019-09-18 17-30-32.png

Screenshot from 2019-09-18 17-30-53.png

I want to add custom css styles in toolbox. Like as I want to change block's category view shape. This shape is done when mouse hover but i want to show this shape directly.
Please tell  me, where the changes are done then i will get result .
Please reply me fastly.

Thank you

Erik Pasternak

unread,
Sep 18, 2019, 12:52:48 PM9/18/19
to Blockly
Hi Ashish,

I'm not entirely sure what you're asking. It sounds like you already have it displaying that shape for the selection/mouseover states but you'd like there to always be an oval background on the rows?

If so, you should be able to add a background to the blocklyTreeRow class and set the toolbox's background to white to achieve that. I'm not sure exactly what CSS you'll want for the background shape, but here's an example using border-radius and a background color:

Screenshot from 2019-09-18 09-50-35.png

Ashish sipani

unread,
Sep 19, 2019, 12:10:01 AM9/19/19
to blo...@googlegroups.com
Thank You Erik,

But i want the css class which is affect foreground blocks, not to background. If you see the block ,i also implement the
tree row class. When you remove background-colour  then border radius is  not shown. And i want also give  the different color to the different category block.
How to implement this?
Reply me fast.

Thank You





Screenshot from 2019-09-19 09-35-00.png

--
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/44d559f5-4f20-4293-a08c-3be78b96c4a9%40googlegroups.com.

Erik Pasternak

unread,
Sep 19, 2019, 2:08:35 PM9/19/19
to Blockly
I'm not sure what you mean by foreground blocks. Are you still talking about the category labels in the toolbox?

The border color for tree row can be set using the border-color attribute.

The standard color tab on the side of a category is done by setColour_ in toolbox.js which gets its colour from either the style or colour attribute on the category. If you wanted to have that set the border colour or another property you'd need to replace or modify that method.

Cheers,
Erik
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages