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.

There are also two new sidebar tabs to check out: All Properties and File Properties, both with commands you can assign hotkeys to.

If one or two of these options work for you, great! Nothing more to see here. But if you’re here, you would probably like a bit more control over what’s shown.


There are a few new theme variables, or custom CSS properties (small “p”), to adjust the Properties view interface. Most of them can be found on the developer documentation Properties page. They won’t work for everyone, but should for most folks. By “won’t work” I mean, they may not be specific enough to do what you want to do.

The biggest request, so far, seems to be hiding the Properties interface in either Reading or Live Preview modes, or for only in certain notes using a cssclass.

Hide Properties view in Reading & Live Preview modes

/* hide properties view in reading & live preview modes */
body {
    --metadata-display-reading: none; /* default: block */ 
    --metadata-display-editing: none; 
}

Hide Properties view in Reading mode only

/* hide properties view in reading mode */
body {
    --metadata-display-reading: none;
    /*--metadata-display-editing: none; */ 
}

Hide Properties view in Reading & Live Preview modes for certain notes using a cssclass

.PropZero {
    --metadata-display-reading: none; 
    --metadata-display-editing: none; 
}

with this anywhere in the YAML of a note you want to change:

---
cssclasses: PropZero
---

Of course PropZero can be changed to your preference.


I’ll add to this as we go, but some other snippets that may be useful:

Hide Properties heading

.metadata-properties-heading {
    display: none;
}

*don’t use this one with the hide Properties on collapse snippet below or if you want to be able to collapse the Properties view.

Hide Properties on collapse → show heading on hover

/* hide properties on collapse - show heading on hover */
.metadata-properties-heading.is-collapsed:not(:hover) {
    transition: linear .3s;
    opacity: 0;
    height: 0em;
}

.metadata-properties-heading.is-collapsed {
    transition: linear .3s .2s;
    height: 1em;
}

CleanShot 2023-09-04 at 18.05.21

Hide the “Add Property” button

.metadata-container .metadata-add-button {
    display: none;
}

Hide Properties with no value(s)

.metadata-property:has([placeholder="No value"]) {
    display: none;
}

Hide a specific Property type e.g., cssclasses

[data-property-key="propertyname"] {
    display:none;
}

Adjust the Property label width

/* adjust property label width - default value is 9em */
body {
    --metadata-label-width: 15em;
}

Remove small bottom gap from the Properties container

/* remove small gap from the properties container */
.metadata-container {
    margin-block-end: 0px;
}

Style Property values

We can’t style individual values yet (that I know of), but we can style all of them in one Property… if you’re into that.

.metadata-property[data-property-key="aliases"] .multi-select-pill { 
    background: green; 
    color: yellow; 
}

.metadata-property[data-property-key="tags"] .multi-select-pill { 
    background: orange; 
    color: blue; 
}

Style Properties view background and label text

A bit much, but you can give your note a headband using the custom variables.

body {
    --metadata-property-background: yellow;
    --metadata-label-text-color: red;
}

Screenshot 2023-09-06 073643

Reorder properties

you can use CSS to control displayed order like so (courtesy of sailKite).

/* reorder properties */
.metadata-properties > [data-property-key] {
    order: 999;
}
.metadata-properties > [data-property-key="aliases"] {
    order: 1;
}
.metadata-properties > [data-property-key="cssclasses"] {
    order: 2;
}
.metadata-properties > [data-property-key="tags"] {
    order: 3;
}

Capitalise properties

The YAML of the note itself isn’t changed, only how it’s displayed in the Properties View UI (courtesy of sailKite).

/* capitalise properties */
.cm-atom.cm-hmd-frontmatter, .metadata-property-key-input {   
    text-transform: capitalize; 
}

Some other links to check out:


P.S. - Being half-Kiwi myself, I realized I neglected all our Southern Hemisphere friends in the title. Replace “The Fall Collection” with “The Spring Collection” in your mind :wink:.

30 Likes

Wow, that is awesome list! Thank your for sharing!

And although your snippets solve most user cases, I would like the developers to add settings for displaying properties to make it easier for users.

2 Likes

Super, has helped me a lot.
What I would still like to do, but unfortunately can not manage:
When opening the note, the property block should be displayed collapsed (except for the headline) and only if necessary I would like to expand it by clicking on the provided button. Is there a solution for this?
Thanks a lot

I think a Properties view default collapsed state for all notes would need to be handled by a plugin.

That said, Obsidian should remember the collapsed state of notes once you make the change yourself.

1 Like

Any insides how to control properties in pdf export (to show them)?

Related: How can I include metadata properties in the PDF output?

I was about to post the FR link for a “Properties in PDF toggle”, but see it’s linked in the one you posted. As of now, it doesn’t seem possible to have Properties in a PDF or the pop-up Page Preview window.

Hi @ariehen and thanks for all these examples! I’m trying to use one of your snippets to hide properties for certain notes (i.e. Dashboard for example) but can’t get it work.
What I did is:

  • copy/pase this code in a text file:
.PropZero {
    --metadata-display-reading: none; 
    --metadata-display-editing: none; 
}
  • saved it as "PropZero.css in the snippets folder of my vault
  • activate the snippet in obsidian
  • added “PropZero” as a cssclass value in the properties of my dashboard note (that has also another cssclass called “dashboard”)
  • restarted obsidian

But the properties are still there. Any hint on what I’m doing wrong? (Using Minimal Theme)
THX! :slightly_smiling_face:

Hey @nestorito! I just tried in a fresh vault using Minimal with only the Dashboard++ and PropZero snippets enabled. Seems working on this end.

A few things I can think of to try:

  • Make sure the YAML of your note looks something like this:
---
cssclasses:
  - dashboard
  - PropZero
---
  • If your .dashboard CSS is working fine, you know that .css file it’s in is good. You can add the .PropZero { ... } CSS at the end of that; it doesn’t need to be in it’s own file. The .css file(s) snippets are in can be named anything, but if they are corrupt or malformed, the CSS won’t work. Of course don’t know if that’s the case here, but it’s a possibility.

Thanks @ariehen, now it works! Thanks again

Just asking for another properties tweaks. How to add note title to File properties view without modifying metadata, i.e. just make the file name always visible instead of needing to hover the tab icon “File properties for”. You could preserve the hover function but then offer two title positions: one for 1st row below the tab icon and second option to show title next to the tab icon (to the right).

Hey @ariehen , is there any way I can set metadata-label-width to auto adjust according to my text length?

So you mean have this width expand with the content and be different note-to-note?

Screenshot 2023-10-29 at 19.42.57

There may be a way, but I’m not sure. I’ll post back here if I come across or sort something out. :slightly_smiling_face:

Yes exactly this way. Those…should not appear and properties column/width should adjust to the text length automatically as per content. As of now, I have set it to 15em as per your snippet and it works amazingly but its just OCD in me that is acting out. Thank you so much for your inputs.

For those who use sidebars with multiple panes and want smaller fonts in File properties:

/* hides "Properties" title, also hides dropdown */
.metadata-properties-heading {
  display: none;
}

.metadata-properties, .metadata-properties *, .metadata-add-button, .metadata-properties-heading {
  font-family: var(--font-monospace), "azeret mono", "space mono", "jetbrains mono";
  --metadata-label-font-size: 11px;
  --metadata-input-font-size: 11px;
}

body {
  --metadata-label-font-weight: 500;
  --metadata-label-text-color: #bdeec;
  --metadata-gap: 0;
  --metadata-padding: 0 0 .24rem 0;
  --metadata-label-width: max(22.5%, 8rem);
  --metadata-input-height: calc(var(--metadata-label-font-size) * 2.1);
}

.metadata-property-key .metadata-property-icon {
  --icon-color: #bdeec;
  --icon-size: 1rem;
}

.metadata-container {
  border-bottom: dashed .2rem var(--background-modifier-border);
  margin-bottom: 1.3rem;
  /* for minimal theme */
  --input-height: var(--metadata-input-height);
}
  • The bulk of this was done by @jorgemrtr; thanks!
1 Like

Hi @rds
You could tried this css below and see if its work in your case.
This will make the property block displayed collapsed when opening the note in default and display when clicked

.metadata-content {
  display: none !important;
}

.metadata-content[style*="display: none;"] {
  display: flex !important;
  flex-direction: column;
}

.metadata-content[style*="display: none;"] .metadata-property {
  display: flex !important;
}

hello, Is there a way to do more compact the property table eg reduce space between property rows.
thanks

This shaves a few pixels off (the default is 3px):

/* remove 3px gap between property rows */ 
body {
    --metadata-gap: 0px;
} 
2 Likes