How to chance toolbox behaviours with CSS?

[Eryck Pedro]

Hello everyone.

I'm trying to create my own Blockly application and decided to mess around with my own CSS overriding Blockly's but I don't know if this is working right. It's also worth saying that I know little-to-nothing from CSS too...

So far, I've managed to create and modify the <category>'s in index.html with my CSS with default style and :hover styles because I wrote the following code:

.blocklyTreeRow:not(.blocklyTreeSelected):hover

{

   background-color: transparent;

}

However, when I'm trying :active styles now, my CSS declarations are being overriden somehow. With help from my friends, we were able to see that a javascript file may be imposing itself above my CSS override. Is there any way I can declare a similar code as above to make my CSS override this innate Blockly JS file or do I have to edit this JS file in order to add my stylesheet desired declarations?

So far, I've only managed to get rid of the blue-ish color when I click on a category by editiing this line of code from toolbox.js file:

Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) {

 var toolbox = this.toolbox_;

 if (node == this.selectedItem_ || node == toolbox.tree_) {

   return;

 }

 if (toolbox.lastCategory_) {

   toolbox.lastCategory_.getRowElement().style.backgroundColor = '';

 }

 if (node) {

    //var hexColour = node.hexColour || '#57e'*/ <------------

    var hexColour = '#00000000' // TRANSPARENT <------------

    node.getRowElement().style.backgroundColor = hexColour;

   // Add colours to child nodes which may have been collapsed and thus

   // not rendered.

   toolbox.addColour_(node);

 }

 //code goes on...

I'm wondering if there's an easier way of doing this...

Thanks in advance,

Eryck Pedro.

[Beka Westberg]

Hello,

So as far as I can tell there is currently no easy way to restyle the toolbox, although it is possible (scratch does this, as well as others) and it looks like there's a feature request up for setting a css class on category nodes.

I'm not really good at css myself, but I do have a few links that might help you get started. Here's a link to how scratch creates a custom category menu. And here's a link to some simple restylings you can do.

I hope that helps! If you have any other questions please reply!

Beka

[Eryck Pedro]

Hello again.

First, thanks a lot for the answer! It turns out to be true what I was fearing: it should take way too much of an effort I'm willing to put by creating javascript code to override the Element's in the category created by Blockly's default...

About the other link you mentioned, I already do something similar to manipulate CSS declarations in the default and on hover appearances in the categories. It really is weird that it's not that simple to change behaviours when I click a category link, haha.

I'll be checking on regularly if there's an update for the CSS in the feature request you also mentioned.

Thanks again,

Eryck.

[Coda Highland]

I've actually found that maintaining dynamic toolbox categories isn't
all that bad. Since I'm declaring all of my custom blocks in my code
anyway, I just add an attribute to each one that says which category
it belongs to and what toolbox XML it needs. I then have a function
that returns a closure for the callback, and all that closure does is
loop over the relevant blocks, returning the XML.

The only thing I end up having to do manually is defining the
categories in the toolbox.xml file. There's probably a way to avoid
doing this, too, but I haven't bothered searching for it.

/s/ Adam

> --
> 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.

[Coda Highland]

Actually, I need to retract that message. I misread what you were
trying to do -- specifically I missed that Element was capitalized.

Apologies for the noise.

/s/ Adam