Custom Styling on Toolbox Items

379 views
Skip to first unread message

John Hewitt

unread,
Apr 11, 2016, 12:47:16 PM4/11/16
to Blockly
I have created a number of toolboxes(for showing different commands for different levels of user), but was wondering if there was any easy way to customize the styling for individual categories, such as by having a specified id/name from the toolbox XML that I can reference in the css.

I can see the standard css entries but they will effect all categories.  My initial thought is to be able to show a custom icon for each category.

Is/Could this be possible?




Miguel

unread,
Apr 11, 2016, 2:34:32 PM4/11/16
to Blockly
Hi,
a reply just from my experience.

I have done the icon thing in two different ways:
1) Referring in CSS the ids given automatically to the toolbox items (':1', ':2', ..). The problem is that is hard to maintain: every time you change the toolbox you have to change the style file. And if you change the toolbox at runtime, it is still harder.
2) Loading the icons as a font (that seems to be the cool thing to do nowadays). So I just changed the names of categories to include the icon as a character.

You can see how the result here

By the way, I agree with you that it makes sense to have a method to configure the id/class given to the visual items.

Miguel

--
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.
For more options, visit https://groups.google.com/d/optout.

John Hewitt

unread,
Apr 13, 2016, 10:41:24 AM4/13/16
to Blockly
many thanks for the pointer - will go with a css font for the moment
Reply all
Reply to author
Forward
0 new messages