Hey all, first of all, love the bpmn.io library! It is really cool and fun to play around with. I am wondering where I should look for custom styling of the canvas/viewport.
I have a work around to make the canvas locked into one position:
g.viewport {
transform: scale(0.75, 0.75) translate(80px);
}
and to make the labels horizontal:
.djs-label {
transform: none;
}
I am looking for advice on customizing the canvas. I am currently using chrome dev tools to try and mix up the CSS. I am not sure how far this can take me though. Any thoughts?
In what way do you want to customize the canvas? What are you trying to achieve?
Hey Phillipp, I am looking for something like this.
Can you you give more context? From the screenshot I can’t tell what it is you want to achieve.
I am really looking for any advice on editing how the modeler looks using CSS/jQuery. Some specific differences in the screen shot would be that there is no header on the left side of the modeler, the border of the viewport is customized (has different border radius, shadow), and the actor’s names are no longer transformed 90 degrees (that one was easy to figure out).
More context: I want the modeler to blend in more with the rest of the app because as of now it does not.
I’m struggling to understand what exactly it is you need help with? You can customize anything to your needs using CSS. There is no need for jQuery.
Well that’s good to know. Can you offer me any suggestions on how I can adjust the border of the viewport using CSS? g.viewport is pretty limited and most elements have the similar classes (djs-visual, djs-shape, djs-element).
What exactly do you refer to when speaking of the viewport?