Diagram Pro: how to add custom CSS to a shape by using it's ID

Misc
1

Has anybody tried to edit a diagram’s behaviors by using a stylesheet extension?

I want to change the fill color of rectangles if it contained a link, but couldn’t get it to work.

I am able to use this:
rect:hover {fill:yellow;} to change the back color if you hover over a rectangle, but of course it does this for ALL rectanges in the diagrams.

When I try to use the normal id selector

#fZ_21-XwIVoQ0YUx8mT4-6{ fill:green;} Where the ID after the hash is the shape’s ID number, nothing happens.

Thoughts?

2

The shape id doesn’t appear in the generated SVG that is used for displaying the diagram so you can’t use it in CSS. You can check this by yourself by using the browser DOM inspector.

it does this for ALL rectanges in the diagrams

This should restrict the shapes:

*[pointer-events="all"]:hover {
  fill: yellow;
}

Hope this helps,
Marius

3

Aw shucks… I did check the inspector but I was hoping that I was missing something. Thanks for your quick answer!