How to edit blocks design and block colors in ai2 at localhost?
1 Like
Can you please explain it more clearly with some links and images whatever you want
1 Like
Check this out @Nisarga_Adhikary
I think , you should change this line:
It will change all the pallets header background colour.
More precisely, the box header which are coded in java takes the css style as an input to style it.Hence changing the css, simply change all of them .see also here:
2 Likes
This isn't for blocks maybe
1 Like
Nisarga_Adhikary:
block colors
Hi @Nisarga_Adhikary ,
The blockly colours are coded in the blockly editor java script files.You could change the built in blocks color by changing the color hex values here;
* @fileoverview Visual blocks editor for MIT App Inventor
* Color definitions for blocks
*
* @author mckinney@mit.edu (Andrew F. McKinney)
* @author ewpatton@mit.edu (Evan W. Patton)
*/
'use strict';
Blockly.HSV_SATURATION = 0.7;
Blockly.CONTROL_CATEGORY_HUE = "#B18E35"; // [177, 143, 53]
Blockly.LOGIC_CATEGORY_HUE = "#77AB41"; // [119, 171, 65]
Blockly.MATH_CATEGORY_HUE = "#3F71B5"; // [63, 113, 181]
Blockly.TEXT_CATEGORY_HUE = "#B32D5E"; // [179, 45, 94]
Blockly.LIST_CATEGORY_HUE = "#49A6D4"; // [73, 166, 212]
Blockly.COLOR_CATEGORY_HUE = "#7D7D7D"; // [125, 125, 125]
Blockly.VARIABLE_CATEGORY_HUE = "#D05F2D"; // [208, 95, 45]
Blockly.PROCEDURE_CATEGORY_HUE = "#7C5385"; // [124, 83, 133]
Blockly.DICTIONARY_CATEGORY_HUE = "#2D1799"; // [45, 23, 153]
Also, you can change the events, methods and property setters and getters blocks from here:
* All regular component blocks have a field instanceName whose value is the name of their
* component. For example, the blocks representing a Button1.Click event has
* instanceName=='Button1'. All generic component blocks have a field typeName whose value is
* the name of their component type.
*/
/**
* Block Colors Hues (See blockly.js for Saturation and Value - fixed for
* all blocks)
*/
Blockly.ComponentBlock.COLOUR_EVENT = Blockly.CONTROL_CATEGORY_HUE;
Blockly.ComponentBlock.COLOUR_METHOD = Blockly.PROCEDURE_CATEGORY_HUE;
Blockly.ComponentBlock.COLOUR_GET = '#439970'; // [67, 153, 112]
Blockly.ComponentBlock.COLOUR_SET = '#266643'; // [38, 102, 67]
Blockly.ComponentBlock.COLOUR_COMPONENT = '#439970'; // [67, 153, 112]
Blockly.ComponentBlock.COMPONENT_SELECTOR = "COMPONENT_SELECTOR";
/**
* Add a menu option to the context menu for {@code block} to swap between
* the generic and specific versions of the block.
Note that the events blocks takes the control category color constant value and the methods takes the procedure hue constant value, but you could change it, to any other hex color.
2 Likes
It don't wok to set blocks color
MohamedTamer:
Blockly.HSV_SATURATION = 0.7;
Blockly.CONTROL_CATEGORY_HUE = "#B18E35"; // [177, 143, 53]
Blockly.LOGIC_CATEGORY_HUE = "#77AB41"; // [119, 171, 65]
Blockly.MATH_CATEGORY_HUE = "#3F71B5"; // [63, 113, 181]
Blockly.TEXT_CATEGORY_HUE = "#B32D5E"; // [179, 45, 94]
Blockly.LIST_CATEGORY_HUE = "#49A6D4"; // [73, 166, 212]
Blockly.COLOR_CATEGORY_HUE = "#7D7D7D"; // [125, 125, 125]
Blockly.VARIABLE_CATEGORY_HUE = "#D05F2D"; // [208, 95, 45]
Blockly.PROCEDURE_CATEGORY_HUE = "#7C5385"; // [124, 83, 133]
Blockly.DICTIONARY_CATEGORY_HUE = "#2D1799"; // [45, 23, 153]
did you run ant
after changing.
1 Like
Note that you can save some time if you run ant noplay
to restrict the build to a subset of the system.
1 Like