aliases: [YAML, YAML frontmatter]
title: YAML
color: blue
image: files/img.pngYAML frontmatter styling is used to selectively style individual nodes. A cool application is to assign images to nodes!
The following properties are supported out of the box, but you can use any property you like (read on!).
title: Change the displayed label on a node. Works very well with Zettlkasten workflowscolor: Change the color of a node. For example, you can do hexidecimals like color: '#123456' or with color names: color: blue.shape: Change the shape of a node. You can use the same shapes as in the Style Pane.width and height: Change the width and height of a node.image: Use the given image as a background image on the node. You can use both external links (https) to a website image, or an image in your vault. Some caveats: External images can only be used if the site is configured to accept cross-reference requests! This means it won't work for the majority of external links. cssclass: Can be used to assign classes to the notes for CSS Styling.img.png is in the files folder, you should do image: files/img.png.cssclass: List of CSS classes that can be used for additional styling of nodes.If you have been using other YAML properties that you would like to map to some styling option, that's possible! You will need to use some CSS though.
Here is how some of the given properties above are implemented in CSS:
node[title] {
label: data(title);
}
node[shape] {
shape: data(shape);
}
node[image] {
background-image: data(image);
}
Something similar can be done for any YAML property! Select nodes that have the property using node[property_name], then assign the styling attribute using attribute: data(property_name).
If you have been using categories, like the genre of an album, you can use the following CSS:
node[genre = 'drama'] {
background-color: black;
}
More ways to filter data are found in the Cytoscape.js documentation.