CSS Styling Demo
This demo shows how to style the built-in templates and UI elements of the
yFiles for HTML
library with CSS to match your color theme.
In this example, we specify the following set of colors in a separate CSS stylesheet. See
the sheet for guidance on how to target certain elements of the graph.
CSS styling customized for the following elements
- Viewport rectangle in the Overview
- Highlight when hovering a graph element
- Selection indicator for the graph elements
- Focus indicator for the graph elements
- Marquee selection rectangle
- Resize handles
- Label candidates when dragging a label
- Port candidates
- Tooltips
- Snap-lines
- Scroll-bars
- Label Editor
CSS transitions customized for the following elements
- Node Creation
- Tooltips
- Label editor