Beneath views, Kumu uses a powerful CSS-based language to control the appearance of your maps.
If you're familiar with CSS, the advanced view editor will quickly become your best friend. The view builder only exposes a small set of the available properties. Being able to write views by hand is the only way to harness the full power of Kumu.
Note: We've adopted standard CSS properties and values wherever possible, straying where conventional values were irrelevant or misleading (eg
display: block), and adding properties specific to Kumu (such as
There are just few more things you should know about the valid values listed below:
Where you see...
You can use...
Any CSS web color or hex color code
Any two numbers separated by a space, e.g.
Only the number
Any number between
The name of any CSS web safe font family
The name of any font family.
Any URL. URLs starting with
Any combination of letters, numbers, supported markdown (including raw HTML), or names of your fields wrapped in double curly brackets
That exact keyword
All values are unitless.
The table below lists all of the properties recognized by elements, connections, and loops. Hover over the information icon at the far right of the table rows to see additional details and valid values for each property (when there are multiple valid values, we've listed them as separate snippets of
Override the arrow color for a connection.
Used in combination with arrow-min-height to set arrow height.
Used in combination with arrow-height to set arrow height.
Used in combination with arrow-width to set arrow width.
Controls arrow visibility for directed connections.
Used in combination with arrow-min-width to set arrow width.
Controls border color.
Controls border opacity.
Controls border width.
Controls bullseye color.
Controls bullseye opacity.
Controls bullseye size.
Controls bullseye visibility.
Controls shapes' color. Gradient only available for connections.
Controls line curvature.
Controls the length of connection dashes (first number) and the distance between them (second number).
Controls color of delay markings.
Controls height of delay markings.
Controls delay markings' position along the connection.
Controls width of delay markings.
Controls visibility of delay markings.
Controls space between delay markings.
Controls inclusion in the map. Hidden objects will be fully removed from the map.
Defines field and color scale for flags.
Controls space between flags and their elements.
Controls thickness of flags.
Controls label font color.
Controls label font family.
Controls label font size.
Controls label style.
Controls label font weight.
Controls height of elements that are squares and/or rectangles.
Adds an icon as the item's image.
Controls the icon color.
Controls image size.
Provides source url of image.
Controls image visibility
Replaces the default label with a label template.
Controls alignment of element labels.
Controls label visibility for all types.
Controls whether an item is in the foreground or background.
Controls connection resting length.
Controls amount of space between the border of an element and its connections.
Controls loop label opacity and element opacity.
Controls the color of selected elements' outlines.
Controls the distance between selected elements and their outlines.
Controls the opacity of selected elements' outlines.
Controls the width of selected elements' outlines.
Controls amount of space between the border of an element and its contents (image or bullseye).
Controls connection opacity.
Controls connection pattern. Equivalent of style.
Controls whether or not an item can be clicked.
Sets the popover content
Controls the inset of pre-labels and post-labels.
Controls the offset of pre-labels and post-labels.
Controls whether or not the profile can be opened
Controls element and connection scale (multiple of base size).
Controls shadow color.
Controls shadow opacity.
Controls shadow size.
Controls shadow visibility
Controls base size.
Controls connection strength.
Controls connection style. Equivalent of pattern.
Controls alignment of element labels.
Controls text wrapping and truncating.
Controls visibility. Hidden objects will still affect layout and metrics.
Controls width of elements that are squares and/or rectangles.