How to customize a shapes color?

Developers
1

Hello,
I’m working on changing the filling color of the bpmn:StartEvent shape
below the steps:

  1. in the overrided PaletteProvider.js i made below changes:

     	'create.start-event': createAction(
 		'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none icon-start-color'   
 	),

  2. in the style.css:

.icon-start-color {
color: #e50344;
}

but an errors ocurs when i run the page check below screenshoot, it seems that the className parameter in the createAction method don’t handle another classes with the properties you want and add.
Could you please give some hint to set the shape color ?

thanks and regards :slight_smile:

PaletteProvider.prototype.getPaletteEntries = function (element) {

	var actions = {},
		create = this._create,
		elementFactory = this._elementFactory,
		spaceTool = this._spaceTool,
		lassoTool = this._lassoTool,
		handTool = this._handTool,
		globalConnect = this._globalConnect,
		translate = this._translate;

	function createAction(type, group, className, title, options) {

		function createListener(event) {
			var shape = elementFactory.createShape(assign({
				type: type
			}, options));

			if (options) {
				shape.businessObject.di.isExpanded = options.isExpanded;
			}

			create.start(event, shape);
		}

		var shortType = type.replace(/^bpmn\:/, '');

		return {
			group: group,
			className: className,
			title: title || 'Create ' + shortType,
			action: {
				dragstart: createListener,
				click: createListener
			}
		};
	}
...

2

Hi,

Check out this example for one of the ways how to set colors (and persist, if necessary).

There is also another example related to colors.

Cheers,
Vladimir

1 Like