How to keep custom graphic in CustomcontextPad?

Developers Modeler
1

Hello,
my customContextPad displays the following:

image

and when I hold the mouse cursor over the SemanticTask-Element, it switches the graphics as follows:

image

how can I fix the problem?

2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

this codesandbox should be suitable: Parcel Sandbox (csb.app)

you can regard what I described above by clicking on the Task with the S-Symbol and then open its contextPad by clicking on the STask.

Hope you can help with this

Thanks in advance!

4

The custom background you’ve set in your CSS is simply overridden by the :hover styles of bpmn-js. I’d recommend you create your custom icons just like the other icons in the context pad - by using a single class.

5

could you describe it in a more detailled way? What do you mean by ‘using a single class’ ? Thanks very much

6

The context pad allows you to specify a CSS class that will be added to the context pad entry. How you make use of that class is up to you. bpmn-js uses an icon font for this purpose.

Here’s a simple example: https://codesandbox.io/s/custom-context-pad-entry-example-zf8yt

7

Thanks very much, now I understand what you meant.
Just one more question: what is the purpose of ‘:before’ here?

.foo:before {
  content: "FOO";
}
8

Feel free to read about it: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

1 Like