Help with CSS on overlays in Modeler Plugin wanted

Users
1

I wonder if somebody has some spare time to help me with this plugin: https://github.com/camunda-community-hub/camunda-platform-to-cloud-migration/tree/main/camunda-modeler-plugin-platform-to-cloud-converter. It does what it should - but it looks really ugly :slight_smile: I did not succeed in adding a proper CSS - maybe somebody can help me out? As you can see below - there are messages that might be shown on elements…

2022-02-18_19-46-27

This is where the content gets added: https://github.com/camunda-community-hub/camunda-platform-to-cloud-migration/blob/main/camunda-modeler-plugin-platform-to-cloud-converter/client/ConvertToCamundaCloudPlugin.js#L94

Any help is much appreciated (also taking PRs of course :stuck_out_tongue: )

Thanks in advance
Bernd

1 Like
2

Hey Bernd,

I will have a look at your plugin and see if I can help. :+1:

1 Like
3

Hi Bernd,

the styles are already correctly included into the Camunda Modeler (see https://github.com/camunda-community-hub/camunda-platform-to-cloud-migration/blob/main/camunda-modeler-plugin-platform-to-cloud-converter/index.js#L7). So the stylesheet is picked up and the styles are present in the Camunda Modeler.

So far the overlays have embedded styles, and not css-classes, so that would need to change (see for example https://github.com/camunda-community-hub/camunda-platform-to-cloud-migration/blob/main/camunda-modeler-plugin-platform-to-cloud-converter/client/ConvertToCamundaCloudPlugin.js#L107).

But then the setup already in principle works (styles from styles.css are loaded and will be applied accordingly).

Does this help? Or do you require support with the CSS? For some css styling for overlays, one could look for inspiration into the existing embedded comments plugin.

Thanks
Max

4

Thanks Max! I actually struggled to apply the right CSS classes to the right divs - that’s why eventually just added that embedded styles to at least see the content :slight_smile: If you have a good idea for adjusting the CSS and the adOverlay function - I would be super happy!