Customizing Look and Feel

I have been tasked with customizing icons and the overall look and feel of the bpmn elements. However I don’t know where to begin at all. Where can I find the icons for editing as well as the necessary CSS that can be modified?

Hey @cseanorter,

basically we’re maintaining a BPMN font which we use in bpmn-js. New icons are created as SVG images using inkscape. We’re using fontello to generate font files from these images which are then copied to the assets directory of bpmn-js. You can also find some documentation here.

If you need further help, please let us know. We are always happy if we can improve our documentation on that topic (and are also accepting pull requests, if you want to contribute :wink:).

Some additional resources:

Ask for specifics and we are glad to help.

I have so many questions. Which IDE are you using or which is best for this development environment. I am a front end designer trying to purely change aesthetics, can you provide a list of files and where they exist in the directory structure that are related to the task of changing icons and physical appearance. If one were going to change the fonts from the SVG format to images how would one start that process. Basically I am used to Microsoft technologies and am completely lost with this environment.

I can understand that you feel a bit lost in our project with the background you described.

Being able to easily customize the look and feel is not our main priority right now. Because of that we do not provide a bullet-proof step by step walk through on how to do these things. It is not too easy depending on what you want to do, too.

Still, all these adjustments can be done via a customized BpmnRenderer and PaletteProvider components (see palette configuration examples linked above for how to use pictures instead of fonts). You’d need to have some profound knowledge of JavaScript to dig into the project and apply these customizations.

So long story short: We cannot provide you any consulting on the customization topic right now. We are happy to provide you further assistance based on concrete questions, if you have any.