Using Callouts to style your Properties

[ariehen]

Have a look at the CSS variables for Properties view as well as:

Properties view CSS - The Fall Collection

With all the new Properties coming on the block, ahem in your notes, you may wonder: do I want the full red carpet experience or the exposed brick for the front? Okay, I’ll stop. The first place you are going to want to check is Settings -> Editor -> Properties in document. Visible: The default setting. Hidden: The Properties view interface is hidden in both Reading View and Live Preview. Source: The Properties view interface is rendered in Reading View, and shown as raw YAML in Live Preview. …

---

Not as fun or versatile as callouts, but you can change the look quite a bit using only the custom variables mentioned above.

body {
    --metadata-background: #ffc04d;  
    --metadata-border-width: 3px;  
    --metadata-border-color: #005aff;
    --metadata-border-radius: 20px;
    --metadata-divider-color: yellow;
    --metadata-divider-width: 1px;
}